https://github.com/chinmaykaitade/lms-frontend-react-ineuron
Learning Management System Project Frontend using React - iNeuron.
https://github.com/chinmaykaitade/lms-frontend-react-ineuron
axios chartjs daisy-ui eslint-config eslint-rules react-dom react-hot-toast react-icons react-redux react-router-dom reactjs redux-toolkit tailwind-css thunk-reactjs
Last synced: 6 months ago
JSON representation
Learning Management System Project Frontend using React - iNeuron.
- Host: GitHub
- URL: https://github.com/chinmaykaitade/lms-frontend-react-ineuron
- Owner: ChinmayKaitade
- Created: 2024-08-02T02:29:15.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-12T02:19:23.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T17:23:24.040Z (over 1 year ago)
- Topics: axios, chartjs, daisy-ui, eslint-config, eslint-rules, react-dom, react-hot-toast, react-icons, react-redux, react-router-dom, reactjs, redux-toolkit, tailwind-css, thunk-reactjs
- Language: JavaScript
- Homepage:
- Size: 2.57 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# LMS Frontend
### Setup Instruction
1. Clone the project.
```
git clone https://github.com/ChinmayKaitade/LMS-Frontend-React-iNeuron.git
```
2. Move into the directory.
```
cd LMS-Frontend-React-iNeuron
```
3. Install dependencies.
```
npm i
```
4. Run the server.
```
npm run dev
```
### Setup Instructions for Tailwind
[Tailwind Official Documentation](https://tailwindcss.com/docs/installation)
1. Install tailwindcss.
```
npm install -D tailwindcss postcss autoprefixer
```
2. Create tailwind config file.
```
npx tailwindcss init -p
```
3. Add file extensions to tailwind config file in the contents property.
```
"./src/**/*.{html,js,jsx,ts,tsx}", "./index.html",
```
4. Add the tailwind directives at the top of the `index.css` file.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
5. Add the following details in the plugin property of tailwind config.
```
[require("daisyui"), require("@tailwindcss/line-clamp")]
```
### Adding Plugins and Dependencies
```
npm install @reduxjs/toolkit react-redux react-router-dom react-icons react-chartjs-2 chart.js daisyui axios react-hot-toast @tailwindcss/line-clamp
```
### Configure auto import sort eslint
1. Install simple import sort.
```
npm i -D eslint-plugin-simple-import-sort
```
plugin installed for Easy auto-fixable import sorting
2. Add rule in `.eslint.cjs`.
```
'simple-import-sort/imports': 'error'
```
3. Add simple-import-sort plugin in `eslint.cjs`.
```
plugins: [..., 'simple-import-sort']
```
4. To enable auto import sort on file save in vscode
- Open `settings.json`
- add the following config
```
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
```