https://github.com/sanjaraiy/lms_frontend

This repository showcases a Learning Management System built with HTML, Tailwind CSS, JavaScript, and React.js. Enhance your learning experience with a sleek and interactive platform! 🚀🎓
https://github.com/sanjaraiy/lms_frontend

chartjs custom-hooks dasyui html5 javascript reack-hooks-form react-hooks reactjs redux-toolkit tailwind-css vite

Last synced: about 2 months ago
JSON representation

This repository showcases a Learning Management System built with HTML, Tailwind CSS, JavaScript, and React.js. Enhance your learning experience with a sleek and interactive platform! 🚀🎓

• Host: GitHub
• URL: https://github.com/sanjaraiy/lms_frontend
• Owner: sanjaraiy
• Created: 2023-09-12T21:14:37.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-12T03:44:14.000Z (6 months ago)
• Last Synced: 2024-07-13T03:47:33.228Z (6 months ago)
• Topics: chartjs, custom-hooks, dasyui, html5, javascript, reack-hooks-form, react-hooks, reactjs, redux-toolkit, tailwind-css, vite
• Language: JavaScript
• Homepage:
• Size: 2.48 MB
• Stars: 2
• Watchers: 2
• 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/sanjaraiy/Lms_frontend.git

```

2. Move into the directory

```

   cd LMS-frontend

```

3. install  dependencies

```

   npm install

```

4. run the server

```

  npm run dev

```

### Setup instructions for Tailwind

[ Tailwind official instruction doc ](https://tailwindcss.com/docs/installation)

1. Install tailwindcss

```

 npm install -D tailwindcss postcss autoprefixer

 npx tailwindcss init -p 

```

2. Create tailwind config file

```

 npx tailwindcss init

```

3. Add file extensions to tailwind config file in the content 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

```

plugins: [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 esline

1. Install simple import sort

```

npm i -D eslint-plugin-simple-import-sort

```

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 }

```