https://github.com/lipex360x/react-boilerplate
React + Typescript Boilerplate with Vite
https://github.com/lipex360x/react-boilerplate
atomic-design plop-generators react styled-components typescript vite
Last synced: 4 months ago
JSON representation
React + Typescript Boilerplate with Vite
- Host: GitHub
- URL: https://github.com/lipex360x/react-boilerplate
- Owner: lipex360x
- Created: 2022-06-28T22:19:13.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-15T23:45:12.000Z (over 2 years ago)
- Last Synced: 2023-03-27T21:56:12.487Z (about 2 years ago)
- Topics: atomic-design, plop-generators, react, styled-components, typescript, vite
- Language: TypeScript
- Homepage: https://react-gen-boilerplate.netlify.app/
- Size: 319 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React Boilerplate
React + Typescript Boilerplate with Vite
---
---
#### :bookmark_tabs: Content Index
- [Introduction](#zap-introduction)
- [Startup](#zap-startup)
- [Changeble Points](#zap-changeble-points)
- [Generate Modules/Pages](#zap-generator)
- [Technologies](#zap-technologies)
- [Live Preview](https://react-gen-boilerplate.netlify.app/)
---
#### :zap: Introduction
This is a boilerplate for React Project using Atomic Design with generator
---
#### :zap: Startup
- Start project with this Templante
- Install dependencies with `yarn` or `npm install`
- run `yarn dev` or `npm run dev`
---
#### :zap: Changeble points
- Configure **Project Name** in `./package.json`
- Configure **Project Title in** `./index.html`
- Configure **Theme Styles** in `src/styles/constants`
- Configure **Global Styles** in `src/styles/global.ts`
- Configure **Theme** in `src/styles/themes/default.ts`
- Rename `.env.example` to `.env` and change API address (if necessary)
- Change **README.md**
- Change **Screen Example** in `./assets/screen.png`
---
#### :zap: Generator
- Run: `yarn gen` or `npm run gen` in terminal
- Follow the instructions
---
#### :zap: Technologies
```
Axios
Immer
React Hook Form
React Hot Toast
Styled Components
Styled Media Query
Zod
Zustand
Plop
```
---
:point_up_2: [Go to Content Index](#bookmark_tabs-content-index)
---
:pushpin: Tips: for easier navigation by github, consider installing the [Octotree](https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc) plugin