Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/synxty/create-synxty-app
Start your projects like a pro
https://github.com/synxty/create-synxty-app
commitizen commitlint eslint husky nextjs npx react
Last synced: about 2 months ago
JSON representation
Start your projects like a pro
- Host: GitHub
- URL: https://github.com/synxty/create-synxty-app
- Owner: synxty
- License: mit
- Created: 2020-09-08T16:38:56.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-11T23:56:59.000Z (over 4 years ago)
- Last Synced: 2024-10-11T00:02:16.842Z (3 months ago)
- Topics: commitizen, commitlint, eslint, husky, nextjs, npx, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/create-synxty-app
- Size: 97.7 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Create a Synxty App
## Start your projects like a pro
### Table of Contents
- [📃 Why?](#-why)
- [🎨 Creating a Project](#-creating-a-project)
- [📁 Folder Structure](#-folder-structure)
- [▶️ Available Scripts Within the Created Project](#️-available-scripts-within-the-created-project)
- [🧠 Learn More](#-learn-more)
- [⚖️ License](#️-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](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](https://reactjs.org/).
To learn Next.js, check out the [Next.js documentation](https://nextjs.org/docs/getting-started).
To learn styled-components, checkout the [styled-components documentation](https://styled-components.com/docs).
## ⚖️ License
This template is open source software [licensed as MIT](LICENSE).
___
Thank you, made with 💗 by [Synxty](https://github.com/synxty).