Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jefferson1104/boilerplate-reactjs
Customized boilerplate for ReactJS projects with Vite, TypeScript, Styled-Components, Jest, featuring Prettier, ESLint, OAuth, and browser storage.
https://github.com/jefferson1104/boilerplate-reactjs
firebase jest react-testing-library reactjs styled-components typescript vitejs
Last synced: 2 days ago
JSON representation
Customized boilerplate for ReactJS projects with Vite, TypeScript, Styled-Components, Jest, featuring Prettier, ESLint, OAuth, and browser storage.
- Host: GitHub
- URL: https://github.com/jefferson1104/boilerplate-reactjs
- Owner: jefferson1104
- Created: 2024-01-08T18:04:44.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-02-20T21:15:04.000Z (9 months ago)
- Last Synced: 2024-02-20T22:28:02.196Z (9 months ago)
- Topics: firebase, jest, react-testing-library, reactjs, styled-components, typescript, vitejs
- Language: TypeScript
- Homepage:
- Size: 919 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
REACTJS BOILERPLATE
## :memo: About project
This is a boilerplate to be used as a foundation for front-end projects, featuring Vite, TypeScript, ReactJS, and Styled-Components as main technologies. It includes custom configurations with Prettier and ESLint for code standardization and organization. Additionally, it provides examples of componentization, usage of ReactJS library hooks, custom hooks, OAuth authentication, data persistence using browser storage mechanisms, unit testing examples, among other features. This comprehensive kit will provide a solid base to efficiently start ReactJS projects with consistency.
## :rocket: Technologies
- [Vite](https://vitejs.dev/)
- [ReactJS](https://pt-br.reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/docs/)
- [Jest](https://jestjs.io/pt-BR/)
- [react-testing-library](https://testing-library.com/docs/react-testing-library/intro/)
- [styled-components](https://styled-components.com/)
- [firebase](https://firebase.google.com/docs)
- [plop](https://plopjs.com/)
- [eslint](https://eslint.org/)
- [prettier](https://prettier.io/)
## :cyclone: Run this project
```bash
# Creating your project using this boilerplate
$ npx degit jefferson1104/boilerplate-reactjs PROJECT_NAME
# Project directory
$ cd PROJECT_NAME
# Install dependencies
$ npm install
# Run in development mode http://localhost:5173/
$ npm run dev
```
## Commands
- `npm run dev`: start app in development mode in `http://localhost:5173`
- `npm run build`: create the production build version
- `npm run preview`: starts a simple server with the build production code
- `npm run lint`: runs ESLint to test all components and pages
- `npm run test`: run Jest to test all components and pages
- `npm run test:watch`: run Jest in watch mode
- `npm run generate`: create the component structure in an automated way
## 🎨 Screenshots
