Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ChrisUser/vite-complete-react-app
Vite React template with: typescript, axios, sass, react-router, redux toolkit and much more already configured.
https://github.com/ChrisUser/vite-complete-react-app
axios moment react redux-toolkit typescript vite
Last synced: 1 day ago
JSON representation
Vite React template with: typescript, axios, sass, react-router, redux toolkit and much more already configured.
- Host: GitHub
- URL: https://github.com/ChrisUser/vite-complete-react-app
- Owner: ChrisUser
- Created: 2024-03-23T21:35:56.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-06-29T20:15:20.000Z (4 months ago)
- Last Synced: 2024-08-02T19:36:29.987Z (3 months ago)
- Topics: axios, moment, react, redux-toolkit, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 239 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-vite - vite-complete-react-app - Starter template for building web applications using `React`, `TypeScript`, `Redux Toolkit`, `React Router`, `Axios`, `Sass`, `Moment`, `ESLint`, `Prettier` and `React Testing Library`. (Get Started / Templates)
- awesome-vite - vite-complete-react-app - Starter template for building web applications using `React`, `TypeScript`, `Redux Toolkit`, `React Router`, `Axios`, `Sass`, `Moment`, `ESLint`, `Prettier` and `React Testing Library`. (Get Started / Templates)
README
New React App
# Usage
To clone and use this template type the following commands:
```sh
npx degit chrisuser/vite-complete-react-app my-app
```
```sh
cd my-app
```
Then, based on your package manager:
## npm
```sh
npm install
```
```sh
npm run dev
```
## yarn
```sh
yarn
```
```sh
yarn dev
```
> [!TIP]
> Remember to update the project name inside the `package.json` file.
## ⚗️ Technologies list
- [TypeScript](https://www.typescriptlang.org/)
- [Sass](https://sass-lang.com/)
- [Redux Toolkit](https://redux-toolkit.js.org/)
- [Router](https://reactrouter.com/)
- [Axios](https://axios-http.com/)
- [Moment](https://momentjs.com/)
- [ESlint](https://eslint.org/) & [Prettier](https://prettier.io/)
---
> [!TIP]
> After cloning the repo you can delete all the previous text for a cleaner README.
This is a blank README file that you can customize at your needs.\
Describe your project, how it works and how to contribute to it.
# 🚀 Available Scripts
In the project directory, you can run:
## ⚡️ start
```
npm start
```
or
```
yarn start
```
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
## 🧪 test
```
npm test
```
or
```
yarn test
```
Launches the test runner in the interactive watch mode.
## 🦾 build
```
npm build
```
or
```
yarn build
```
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
## 🧶 lint
```
npm lint
```
or
```
yarn lint
```
Creates a `.eslintcache` file in which ESLint cache is stored. Running this command can dramatically improve ESLint's running time by ensuring that only changed files are linted.
## 🎯 format
```
npm format
```
or
```
yarn format
```
Checks if your files are formatted. This command will output a human-friendly message and a list of unformatted files, if any.
# 🧬 Project structure
This is the structure of the files in the project:
```sh
│
├── public # public files (favicon, .htaccess, manifest, ...)
├── src # source files
│ ├── __tests__ # all test files
│ ├── components
│ ├── pages
│ ├── resources # images, constants and other static resources
│ ├── store # Redux store
│ │ ├── actions # store's actions
│ │ └── reducers # store's reducers
│ ├── styles
│ ├── types # data interfaces
│ ├── utility # utilities functions and custom components
│ ├── App.tsx
│ ├── index.tsx
│ ├── RootComponent.tsx # React component with all the routes
│ ├── serviceWorker.ts
│ ├── setupTests.ts
│ └── vite-env.d.ts
├── .env
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── index.html
├── jest.config.cjs
├── package.json
├── README.md
├── tsconfig.json
└── vite.config.json
```
# 📖 Learn More
You can learn more in the [Vite documentation](https://vitejs.dev/guide/).
To learn React, check out the [React documentation](https://reactjs.org/).
#
Bootstrapped with Vite.