About Learning Management System (LMS) projec

• Configuration and Setup
• Key Features
• Technologies used
  • Frontend
  • Backend
  • Database
• 📸 Screenshots

Configuration and Setup

In order to run this project locally, simply fork and clone the repository or download as zip and unzip on your machine.

• Open the project in your prefered code editor.
• Go to terminal -> New terminal (If you are using VS code)
• Split your terminal into two (run the Frontend on one terminal and the Backend on the other terminal)

In the first terminal

$ cd client
$ npm install (to install frontend-side dependencies)
$ npm run  start (to start the frontend)

In the second terminal

• cd backend and Set environment variables in config.env under ./config
• Create your mongoDB connection url, which you'll use as your MONGO_URI
• Supply the following credentials

#  ---  Config.env  ---

NODE_ENV = development
PORT =5000
FRONTEND_URL =http://localhost:3000
MONGO_URL =
JWT_SECRET =
JWT_EXPIRY = 60m

CONTACT_US_EMAIL

#cloundinary
CLOUDINARY_CLOUD_NAME = 
CLOUDINARY_API_KEY = 
CLOUDINARY_API_SECRET = 

# Nodemailer
SMTP_HOST = "smtp.gmail.com"
SMTP_PORT = 
SMTP_USERNAME = 
SMTP_PASSWORD = 
SMTP_FROM_EMAIL =

# Razorpay
RAZORPAY_KEY_ID = 
RAZORPAY_SECRET = 
RAZORPAY_PLAN_ID = 

# --- Terminal ---

$ npm install (to install backend-side dependencies)
$ npm start (to start the backend)

Key Features

• User registration and login
• Authentication using JWT Tokens
• Redux Toolkit: State management for an intuitive and responsive user interface.
• Tailwind CSS Line Clamp: Effortless text truncation for a clean and modern design.
• Axios: Efficient HTTP client for smooth asynchronous data handling.
• Upload user ımages and story ımages to the server
• Chart.js: Integrated charting capabilities for insightful data visualization.
• Cloudinary: Streamlined media management for images and videos.
• React-Router-Dom: Smooth navigation within the single-page application.
• Responsive Design

Technologies used

This project was created using the following technologies.

Frontend

• React js - JavaScript library that is used for building user interfaces specifically for single-page applications
• React Hooks - For managing and centralizing application state
• react-router-dom - To handle routing
• axios - For making Api calls
• Css - For User Interface
• CK-Editor - Rich Text Editor
• React icons - Small library that helps you add icons to your react apps.

Backend

• Node js -A runtime environment to help build fast server applications using JS
• Express js -The server for handling and routing HTTP requests
• Mongoose - For modeling and mapping MongoDB data to JavaScript
• express-async-handler - Simple middleware for handling exceptions inside of async express routes and passing them to your express error handlers
• jsonwebtoken - For authentication
• Bcryptjs - For data encryption
• Nodemailer - Send e-mails from Node.js
• Dotenv - Zero Dependency module that loads environment variables
• multer - Node.js middleware for uploading files
• cors - Provides a Connect/Express middleware

Database

• MongoDB - It provides a free cloud service to store MongoDB collections.

Screenshots