Knowscope

A learning management system (LMS) built using the MERN stack (MongoDB, Express, React, and Node.js).

• You may visit the deployed app here:
  knowscope.vercel.app

---

Features

• Login/logout-based user authorization and authentication
  Secure sign in and account registration with role-based access.


• Course enrollment
  Users can enroll in any course of their interest, watch course previews (if provided), and accomplish courses within their browser of choice.


• Course rating
  Users can rate courses to express their satisfication of their overall learning experience, giving insight to potential enrollees whether they should enroll in a course or not.


• Search filtering
  The LMS provides a search bar to help users look for a specific course through keywords.


• Payment processing integration
  Through a fully functional checkout flow, users can purchase courses in a secure approach.


• 'Educator' account type
  Users may chose to become an Educator in the LMS, giving them access to view the Educator dashboard, add courses, view courses that they have created, as well view a list of all enrollees registered within the system.


• Adding courses
  As previously mentioned, Educators can have the ability to publish their own courses in the LMS. They can add as many lectures as they want to tackle the whole scope of a course. Educators can also set their own course pricing and discounts.


• Embedded YouTube lecture video
  With Educators adding courses, embedding video content in their courses is mandatory to further supplement and enrich the learning experience of users. Educators can embed videos via YouTube URLs, and they can set them whether can be previewed by users before purchasing a cours or not.


• Responsive UI
  Seamless experience in navigating throughout the app via desktop, tablet, and mobile layouts.

---

Tech Stack

Name	Details
Vite 7.2.4	Development environment
Express 5.1.0 Node.js 22.20.0	Back-end
Quill 2.0.3	Rich text editor
Multer 2.0.2	File upload handling
Cloudinary 2.8.0	Media management API
uniqid 5.4.0	Unique ID generation
Stripe 20.0.0	Payment processing
Svix 1.42.0	Webhook signature verification
CORS 2.8.5	Express middleware
MongoDB Atlas Mongoose 8.20.1	Database
Axios 1.13.2	Promise-based HTTP client
Clerk React SDK 5.56.2 Clerk Express SDK 1.7.52	Authentication and user management SDK
React 19.2.0 react-router-dom 7.9.6 Tailwind CSS 4.1.17 React Typed 2.0.12 React Fast Marquee 1.6.5 Motion 12.23.24 rc-progress 4.0.0	UI
React-Toastify 11.0.5	Notifications
Humanize Duration 3.33.1	Human-readable time formatting
react-youtube 10.1.0	Embedded YouTube player

---

Setup

Prerequisites

• Ensure you have Node.js installed.
  Download Node.js (Windows Installer):
  Node.js — Download Node.js®

• You may need Postman to test GET and POST requests made by the client-side, as well as responses retreived from APIs invoked within the app.
  
  Download Postman (Windows 64-bit):
  Download Postman | Get Started for Free

• You must have an account for the following services:

Service	Reasons why it's needed
Clerk	You need to obtain environment variables for the app's client-side and server-side so that Clerk's authentication and user management integration to work properly. It'll allow you to add/remove educator privileges to a registered account.
MongoDB	Gives you access and control to the app's cloud database. You need to obtain environment variables for the app's server-side, permitting MongoDB to store, delete, and update data processed in the app.
Stripe	Allows the app to integrate a full checkout flow for processing course purchases. You need to obtain environment variables for the app's server-side, giving Stripe access to implement its checkout flow.
Cloudinary	Allows the app to handle image content storage, optimization, and delivery when users request for them. You need to obtain environment variables for the app's server-side, allowing Cloudinary to manage image optimization and delivery once images are saved as URLs via string values in the MongoDB database.
Vercel	Allows the app to be deployed and accessed on the web. You need to deploy the folders client and server as separate projects.

Getting Started

• Running the project locally

# Clone this repository
git clone https://github.com/andreiagbisit/knowscope.git
  
# Navigate into the client-side directory
cd client

# Navigate into the server-side directory
cd server
  
# Install dependencies
npm install
  
# Start the client-side
npm run dev

# Start the server-side
npm run server

• .env - client-side
  (LOCAL) - put this file in the root of client
  (DEPLOYED) - Access your client-side's Vercel project and go to Settings > Environment Variables and add them in the fields Key and Value

VITE_CLERK_PUBLISHABLE_KEY=[publishable key]
VITE_CURRENCY = '[currency symbol]'
VITE_BACKEND_URL = http://localhost:[port number] (local) / [Vercel project link of the back-end] (deployed)

• .env - server-side
  (LOCAL) - put this file in the root of server
  (DEPLOYED) - Access your server-side's Vercel project and go to Settings > Environment Variables and add them in the fields Key and Value

CURRENCY='[currency code]'

MONGODB_URI=[connection string]
  
CLERK_WEBHOOK_SECRET= '[webhook secret]'
CLERK_PUBLISHABLE_KEY=[publishable key]
CLERK_SECRET_KEY=[secret key]

CLOUDINARY_NAME = "[name]"
CLOUDINARY_API_KEY = "[API key]"
CLOUDINARY_SECRET_KEY = "[secret key]"

STRIPE_PUBLISHABLE_KEY=[publishable key]
STRIPE_SECRET_KEY=[secret key]
STRIPE_WEBHOOK_SECRET=[webhook secret]

Deployment

• vercel.json configuration
  Create two files named vercel.json then copy and paste the following code. Afterwards, place the files in the root of the folders client and server, according to their code content.

• vercel.json - client-side

  {
    "rewrites": [
      {
        "source": "/(.*)",
        "destination": "/"
      }
    ]
  }

• vercel.json - server-side

{
    "version": 2,
    "builds": [
        {
            "src": "server.js",
            "use": "@vercel/node",
            "config": {
                "includeFiles": [
                    "dist/**"
                ]
            }
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "server.js"
        }
    ]
}

---

Clerk - set user as Educator

1. Sign in to your Clerk account.
2. On Applications, select the app that contains the users you want to configure.
3. Select the Users tab.
4. In the table under the All tab, pick the user you want to give Educator privileges to.
5. Under the Profile tab of the selected user, navigate to Metadata > Private and click Edit.
6. Within the provided area, paste the following:

  "role": "educator"
  

---