An open API service indexing awesome lists of open source software.

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: 3 months ago
JSON representation

React + Typescript Boilerplate with Vite

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