Skip to content

Learning Management System Project Frontend using React - iNeuron.

Notifications You must be signed in to change notification settings

ChinmayKaitade/LMS-Frontend-React-iNeuron

Repository files navigation

LMS Frontend

Setup Instruction

  1. Clone the project.
    git clone https://github.com/ChinmayKaitade/LMS-Frontend-React-iNeuron.git
  1. Move into the directory.
    cd LMS-Frontend-React-iNeuron
  1. Install dependencies.
    npm i
  1. Run the server.
    npm run dev

Setup Instructions for Tailwind

Tailwind Official Documentation

  1. Install tailwindcss.
    npm install -D tailwindcss postcss autoprefixer
  1. Create tailwind config file.
    npx tailwindcss init -p
  1. Add file extensions to tailwind config file in the contents property.
    "./src/**/*.{html,js,jsx,ts,tsx}", "./index.html",

  1. Add the tailwind directives at the top of the index.css file.
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  1. 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

  1. Add rule in .eslint.cjs.
    'simple-import-sort/imports': 'error'
  1. Add simple-import-sort plugin in eslint.cjs.
    plugins: [..., 'simple-import-sort']
  1. To enable auto import sort on file save in vscode

    • Open settings.json
    • add the following config
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }