Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/princeinscripts/lms-website
Learning Management System (LMS) project, MERN (MongoDB, Express.js, React, Node.js) stack
https://github.com/princeinscripts/lms-website
axios bcrypt bcryptjs chartjs cloudinary cookie-parser cors dotenv express jwt-authentication mongodb mongoose multer nodejs nodemailer nodemon react react-router redux-toolkit vite
Last synced: about 1 month ago
JSON representation
Learning Management System (LMS) project, MERN (MongoDB, Express.js, React, Node.js) stack
- Host: GitHub
- URL: https://github.com/princeinscripts/lms-website
- Owner: PrinceInScripts
- Created: 2023-12-05T11:01:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-16T11:04:11.000Z (11 months ago)
- Last Synced: 2024-01-16T17:14:48.479Z (11 months ago)
- Topics: axios, bcrypt, bcryptjs, chartjs, cloudinary, cookie-parser, cors, dotenv, express, jwt-authentication, mongodb, mongoose, multer, nodejs, nodemailer, nodemon, react, react-router, redux-toolkit, vite
- Language: JavaScript
- Homepage:
- Size: 50 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
About Learning Management System (LMS) projec
* [Configuration and Setup](#configuration-and-setup)
* [Key Features](#key-features)
* [Technologies used](#technologies-used)
- [Frontend](#frontend)
- [Backend](#backend)
- [Database](#database)
* [📸 Screenshots](#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 ](https://www.npmjs.com/package/react) - JavaScript library that is used for building user interfaces specifically for single-page applications
- [React Hooks ](https://reactjs.org/docs/hooks-intro.html) - For managing and centralizing application state
- [react-router-dom](https://www.npmjs.com/package/react-router-dom) - To handle routing
- [axios](https://www.npmjs.com/package/axios) - For making Api calls
- [Css](https://developer.mozilla.org/en-US/docs/Web/CSS) - For User Interface
- [CK-Editor](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html) - Rich Text Editor
- [React icons](https://react-icons.github.io/react-icons/) -
Small library that helps you add icons to your react apps.
#### Backend
- [Node js](https://nodejs.org/en/) -A runtime environment to help build fast server applications using JS
- [Express js](https://www.npmjs.com/package/express) -The server for handling and routing HTTP requests
- [Mongoose](https://mongoosejs.com/) - For modeling and mapping MongoDB data to JavaScript
- [express-async-handler](https://www.npmjs.com/package/express-async-handler) - Simple middleware for handling exceptions inside of async express routes and passing them to your express error handlers
- [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken) - For authentication
- [Bcryptjs](https://www.npmjs.com/package/bcryptjs) - For data encryption
- [Nodemailer](https://nodemailer.com/about/) - Send e-mails from Node.js
- [Dotenv](https://www.npmjs.com/package/dotenv) - Zero Dependency module that loads environment variables
- [multer](https://www.npmjs.com/package/multer) - Node.js middleware for uploading files
- [cors](https://www.npmjs.com/package/cors) - Provides a Connect/Express middleware
#### Database
- [MongoDB ](https://www.mongodb.com/) - It provides a free cloud service to store MongoDB collections.
## Screenshots
