Template for React Apps using TypeScript obviously...
This project was made for react developers that need a more
sophisticated configuration to start their react-apps. We believe in a simple
but high scalable template. We left the folders that shape the structure of this
template empty, since it is not necessary to fill all the files to demonstrate each and
every use case. We provide with a very descriptive documentation so developers will
understand how to operate them.
in the other hand... this is a personal project 🙃. I hope this template can help at least someone to bootstrap their react projects. 🚀🚀🚀
NPM is the project package manager.
Because create-sara-project
has a lot of configurations, we have tested the app with this environment versions:
If something is not working, try to update to these specific versions...
If you have previously installed:
npm i create-sara-project -g
and you want to update it, run:
npm update create-sara-project -g
Run the following command to install create-sara-project globally
npm i create-sara-project -g
create-sara-project
Once you run the command the app will ask you the app name and the template type...
you can run the development server:
cd <app_name>
npm start
npm run cypress:open
npm test
npm run build
Cypress is the testing framework for this project.
Check the ./cypress configuration folder.
SARA uses Docker to containerize this app. Check the Dockerfile configuration file.
The mix of tools used to ensure code and commit style and best practices:
- ESLint
- Prettier
- Commitlint
- Lint Staged
- Husky
If you are building a monorepo, here is an example of how to implement a monorepo with create-sara-project 🚀
.
├── src
│ ├── assets
│ │ ├── fonts
│ │ │ └── ...
│ │ ├── css
│ │ │ └── ...
│ │ ├── icons
│ │ │ └── ...
│ │ └── img
│ │ └── ...
│ ├── components
│ │ ├── ...
│ │ ├── Modals
│ │ │ └── ...
│ │ ├── Toastr
│ │ │ └── ...
│ │ └── <component-name>
│ │ ├── <component-name>.types.ts # Component types
│ │ ├── <component-name>.module.css
│ │ └── <component-name>.tsx
│ ├── layouts
│ │ └── ... # AuthLayout/AdminLayout/etc
│ ├── config
│ │ ├── ...
│ │ └── constants.ts
│ ├── contexts
│ │ ├── ...
│ │ └── <page_name>
│ │ └── Page.context.ts # Context page/multiple pages
│ │
│ ├── store # Without the need of redux, just useReducer hook
│ │ ├── actions
│ │ │ └── ...
│ │ └── reducers
│ │ └── ...
│ ├── pages
│ │ ├── ...
│ │ └── <page_name> # Keep unique page components here
│ │ ├── ...
│ │ ├── <component-name>.tsx
│ │ └── <folder>
│ │ ├── ...
│ │ ├── <component-name>.tsx
│ │ └── <folder>
│ ├── utils
│ │ └── ...
│ ├── shared # api/global-state related interfaces/types
│ │ ├── interfaces
│ │ │ └── ...
│ │ └── types
│ │ └── ...
│ ├── cache
│ │ └── ...
│ ├── animations # variants from framer motion
│ │ └── ...
│ ├── hooks
│ │ └── ...
│ ├── App.tsx
│ ├── index.tsx
│ └── services # rest-api related routes and validators (zod)
│ ├── routes
│ │ └── ...
│ └── schemas # zod schemas
│ ├── ...
│ └── <model.zod>.ts
├── cypress
│ ├── .gitignore
│ ├── support
│ │ └── ...
│ ├── plugins
│ │ └── ...
│ ├── fixtures
│ │ └── ...
│ └── integration
│ └── ...
├── scripts
│ └── ...
├── ...
├── ...
├── ...
└── README.md