https://github.com/j-grosse/e-learning-app

My E-Learning Web App Project (React, Typescript, Tailwind, MongoDB with Node/Express Backend)
https://github.com/j-grosse/e-learning-app

expressjs mongodb mongoose nodejs react tailwindcss typescript

Last synced: 16 days ago
JSON representation

My E-Learning Web App Project (React, Typescript, Tailwind, MongoDB with Node/Express Backend)

• Host: GitHub
• URL: https://github.com/j-grosse/e-learning-app
• Owner: j-grosse
• License: mit
• Created: 2024-01-10T09:02:38.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-16T20:14:51.000Z (20 days ago)
• Last Synced: 2025-01-16T21:23:02.713Z (20 days ago)
• Topics: expressjs, mongodb, mongoose, nodejs, react, tailwindcss, typescript
• Language: JavaScript
• Homepage: https://e-learn-68it.onrender.com
• Size: 8.75 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# E-Learning Web App

## About the project

This is my own E-Learning Portal portfolio project, I started in january 2024.

This E-Learning Web App is an Web App that aims to revolutionize the way people learn and acquire knowledge. With a user-friendly interface and a wide range of interactive features, our platform provides an engaging learning experience for students of all ages and backgrounds.

![](website-screenshot.jpg)

## Main Features

### 1. View and buy courses from the database

Courses are loaded from the MongoDB Atlas database and schown to the user. The user can click on a card to see the course details, buy the course and enroll.

### 2. Add Courses via CMS

Tutors can login and create courses by adding course material (e.g. Rich text, Videos, Images, PDFs) via the Contentful headless CMS.

### 3. Work on courses and see learning progress

Students can see the course material of courses they are enrolled in. The student's lerning progress is measured.

## Technologies used

### Front end

React.js, shadcn/ui react components (using Tailwind CSS & Radix UI)

vite, react router dom, axios

### Back end

Node.js, Express.js, MongoDB Atlas, Mongoose.js, dotenv, bcrypt, jwt

## Theming

Theming is using shadcn/ui (index.css) and Tailwind (tailwind.config.js).

## Installation

git clone https://github.com/j-grosse/e-learning-app.git

cd e-learning-app/client  

npm i  

cp .env.example .env

cd ..  

cd server  

npm i  

cp .env.example .env

-> add your environment variables to the files /server/.env and /client/.env

## Running the app

To run the app in terminal

cd server  

npm run dev  

cd ..  

cd client  

npm run dev

## Deployment

To deploy the app on render.com

- choose "create Web Service"

- add environment variables in "Environment" (but for VITE_SERVER_BASE_URL use the url where the app is deployed e.g. VITE_SERVER_BASE_URL=https://e-learn-68it.onrender.com)

- add deployment settings:  

  Branch: main  

  Root Directory: server  

  Build Command: npm i && cd ../client && npm i && npm run build  

  Start Command: npm start