Create a Synxty App

Start your projects like a pro

Table of Contents

• 📃 Why?
• 🎨 Creating a Project
• 📁 Folder Structure
• ▶️ Available Scripts Within the Created Project
• 🧠 Learn More
• ⚖️ License

📃 Why?

Well...

✅ TypeScript is default
✅ Next.js because SEO is essential and SSR is included
✅ styled-components, write CSS with JS? Thanks
✅ Jest, the only library you need to test your app behavior
✅ Your code will always be beautiful with Prettier
✅ ESLint to keep a code pattern between the team
✅ lint-staged to assure that every code gets linted when committed
✅ Your commits will be meaningful with commitizen and commitlint
✅ A complete README file, every project deserves one

Overall, creating a project with create-synxty-app is as easy as create-react-app or create-next-app but it sets you and your team ready to develop with a much better experience.

🎨 Creating a Project

Using npm, run the following command:

npx create-synxty-app my-app

or, using yarn:

yarn create synxty-app my-app

Note: Since you're probably going to run this commands in a full stack application, if you don't specify the name of the project it defaults to web.

And that's it!

📁 Folder Structure

After the installation completes, a new directory is created with the name of your app. This is the structure that you get inside your project:

my-app/
├── README.md
├── node_modules/
├── package.json
├── .gitignore
├── .eslintrc.json
├── .eslintignore
├── tsconfig.json
├── commitlint.config.js
├── .babelrc
├── setupTests.js
├── jest.config.js
├── next-env.d.ts
├── next.config.js
├── .prettierrc
├── .github/
│   └── assets/
│       └── banner.png
├── public/
│   ├── favicon.ico
│   └── synxty.svg
└── src/
    ├── layouts/
    │   ├── Home/
    │   │    ├── index.tsx
    │   │    ├── index.spec.tsx
    │   │    └── styles.ts
    ├── pages/
    │   ├── _app.tsx
    │   ├── _document.tsx
    │   └── index.tsx
    └── styles/
        └── global.ts

▶️ Available Scripts Within the Created Project

npm run dev or yarn dev

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.

npm run test or yarn test

Launches the test runner.

npm run build or yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.

npm start or yarn start

Runs the app in production.

🧠 Learn More

To learn React, check out the React documentation.
To learn Next.js, check out the Next.js documentation.
To learn styled-components, checkout the styled-components documentation.

⚖️ License

This template is open source software licensed as MIT.

Thank you, made with 💗 by Synxty.