Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/smakosh/CRA-boilerplate
Personal CRA boilerplate
https://github.com/smakosh/CRA-boilerplate
boilerplate formik personal react react-router yup
Last synced: 2 months ago
JSON representation
Personal CRA boilerplate
- Host: GitHub
- URL: https://github.com/smakosh/CRA-boilerplate
- Owner: smakosh
- License: mit
- Archived: true
- Created: 2020-06-02T10:03:47.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-30T14:35:28.000Z (almost 3 years ago)
- Last Synced: 2024-08-02T13:20:31.686Z (5 months ago)
- Topics: boilerplate, formik, personal, react, react-router, yup
- Language: TypeScript
- Size: 1.14 MB
- Stars: 42
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-morocco - CRA boilerplate - boilerplate.svg?style=social)](https://github.com/smakosh/CRA-boilerplate/stargazers) - A CRA boilerplate for large projects in JavaScript and TypeScript. By [@smakosh](https://github.com/smakosh) (Uncategorized / Uncategorized)
README
# CRA boilerplate
## Getting started
1- Clone the repository
```bash
git clone [email protected]:smakosh/CRA-boilerplate.git
```
2- Create an account on the following platforms if you'd like to use them
- Google Recaptcha
- Google Analytics
- Twitter
- Sentry
- [Vercel](https://vercel.com?utm_source=smakosh) (Highly recommended to deploy your React app smoothly)
3- Create your `.env` file locally on dev environment
```bash
cp .env.development.template .env
```
## Installation and kickstart
4- Install dependencies using Yarn
```bash
yarn
```
5- Start your React app
```bash
yarn start
```
## Features
- Uses a feature based file structure
- Context API used effectively following [Kent C. Dodds](https://kentcdodds.com/blog/how-to-use-react-context-effectively/)'s article
- Reusable logic with React hooks
- UI elements separated from the features, so that you can push them as an UI library on NPM in the future as your project grow and you start to export features as their standalone apps
- Authentication already built in
- Code splitting of your Authenticated/Unauthenticated routes using Supense and React.lazy
- Helpers functions
- SEO component ready and configured for you
- Interfaces per feature
## TODO
- [ ] Add react-query to handle server state
- [ ] Replace useFetchUser with a useQuery
- [ ] Move to cookies
- [ ] Setup React testing library
- [ ] Setup Cypress
- [ ] Setup Ontwik-UI with react-flex-ready
- [ ] Include the full auth flow with reset and forgotten password
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more details