Before we go all technical and start with 1's and 0's my dear geek!.
Here's a sneak peak of what we are going to be working with.
Yup!... It's an LMS system, like one of those you don't really see much on the internet as it takes a rich and full approach from course registration to payment with the original course on Youtube.
This is where I step in and crank it up a notch like every hired mercenary in tech. So what inspired me to do this? After a thorough search on the internet i realised one thing. You couldn't see this application hosted anywhere and me spidey senses started tingling. I knew this would be a good challenge to make available to the public. So i grabbed my laptop, coffee and the rest was history...
So what would you be learning here, how to set up & contribute to this ongoing project. I will be working you through the important parts of the application for easy set-up. So now let's get technical...
Below are the steps we will be taking to get you up and running.
π₯· Fork & clone LMS repo
βοΈ Setup & Migrate Prisma Schema
π₯· Fork & clone LMS API repo
π Start creating courses
π₯· Fork & clone LMS repo.
Head to the lms repo and do the needful. You would want to also click on watch as more features are being introduced.
Copy link and clone the repo to your local.
$ mkdir lms_project && cd lms_project
$ git clone git@github.com:MrChike/LMS.git
Cloning into 'LMS'...
remote: Enumerating objects: 1530, done.
remote: Counting objects: 100% (1185/1185), done.
remote: Compressing objects: 100% (602/602), done.
remote: Total 1530 (delta 546), reused 1025 (delta 482), pack-reused 345 (from 1)
Receiving objects: 100% (1530/1530), 53.13 MiB | 6.74 MiB/s, done.
Resolving deltas: 100% (588/588), done.
$ git clone https://github.com/MrChike/LMS-API
Cloning into 'LMS-API'...
remote: Enumerating objects: 131, done.
remote: Counting objects: 100% (131/131), done.
remote: Compressing objects: 100% (85/85), done.
remote: Total 131 (delta 75), reused 100 (delta 44), pack-reused 0 (from 0)
Receiving objects: 100% (131/131), 31.87 KiB | 238.00 KiB/s, done.
Resolving deltas: 100% (75/75), done.
Your frontend root folder should look like this and if you notice we will be starting with the .env.sample file as this is important to run the application
Rename the .env.sample file to .env and populate with the necessary credentials. NB: The link to the external services to populate below are located at the end of this article.
NEXT_PUBLIC_APP_URL=http://127.0.0.1:3000
NEXT_PUBLIC_TEACHER_ID=
NEXT_PUBLIC_BACKEND_API_URL=http://127.0.0.1:8000
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
DATABASE_URL=protocol://username:password@host:port/database
UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=
MUX_TOKEN_ID=
MUX_TOKEN_SECRET=
STRIPE_WEBHOOK_SECRET=
STRIPE_API_KEY=
βοΈ Setup & Migrate Prisma Schema
After you're done. run the following prisma commands
$ npx prisma generate
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
β Generated Prisma Client (v5.3.0) to ./node_modules/@prisma/client in 519ms
Start using Prisma Client in Node.js (See: https://pris.ly/d/client)
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
or start using Prisma Client at the edge (See: https://pris.ly/d/accelerate)
import { PrismaClient } from '@prisma/client/edge'
See other ways of importing Prisma Client: http://pris.ly/d/importing-client
$ npx prisma db push
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database "lms", schema "public" at "192.168.86.133:5432"
π Your database is now in sync with your Prisma schema. Done in 449ms
β Generated Prisma Client (v5.3.0) to ./node_modules/@prisma/client in 574ms
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β Update available 5.3.0 -> 5.22.0 β
β Run the following to update β
β npm i --save-dev prisma@latest β
β npm i @prisma/client@latest β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
$ npm install
(#########β β β β β β β β β ) β § reify:@img/sharp-darwin-arm64: timing reifyNode:node_m
$ node scripts/seed.ts #create course categories
Success
I prefer to see what i'm working with so i'm using pgadmin to monitor my postgres DB. You can use your prefered tool.
Or you can run npx prisma studio command to monitor your database table.
$ npx prisma studio
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Prisma Studio is up on http://localhost:5555
Now that we have our prisma schema all set up. Let's set up the backend.
π₯· Fork & clone LMS API repo
Clone and navigate to the api folder as seen below
Rename the .env.sample file to .env and populate with the database credentials. For the SECRET_KEY you can populate that with Djecrety
SECRET_KEY=
DATABASE_NAME=
DATABASE_USER=
DATABASE_PASSWORD=
DATABASE_HOST=
DATABASE_PORT=
CORS_ALLOWED_ORIGINS=http://localhost:3000
CORS_ALLOW_HEADERS=content-type,Authorization,X-Requested-With,X-CSRFToken
CORS_ALLOW_METHODS=*default_methods
CORS_ORIGIN_WHITELIST=http://localhost:3000
Run the commands
$ python3 -m venv env
$ source env/bin/activate
$ pip install -r requirements.txt
$ python3 manage.py migrate
Operations to perform:
Apply all migrations: account, admin, auth, contenttypes, sessions
Running migrations:
Applying account.0001_initial... OK
Applying account.0002_alter_profile_table... OK
Applying account.0003_alter_attachment_table_alter_category_table_and_more... OK
Applying contenttypes.0001_initial... OK
$ python3 manage.py createsuperuser #populate with your own credentials
Email: mrchike@mailinator.com
User id: mrchike
First name: chike
Last name: egonu
Password:
Password (again):
Superuser created successfully.
$ python3 manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
November 18, 2024 - 22:29:22
Django version 5.1.3, using settings 'lms_api.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
confirm that user has been created in prisma studio or your preferred database app.
Now that you have created a user and the backend is up and running, we will be moving on to the next step.
vim lms_project/LMS/app/(dashboard)/(routes)/(root)/page.tsx
... #Update email and password to your created user. I know it's not best practice so i'm working πn it.
export const fetchUserData = async (email="yours@email.com", password="yours@password") => {
try {
const response = await api.post('/account/token/', {
email,
password,
});
console.log('app/(dashboard)/(routes)/(root)/page.tsx', response.data.userId)
return response.data;
} catch (error) {
console.error('Error fetching user data:', error); // Log error if any
}
};
Update the NEXT_PUBLIC_TEACHER_ID environment variable with your newly created userId (in my case mrchike) and run the command npm run dev or npm run build
$ npm run dev
> lms-tutorial@0.1.0 dev
> next dev
- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- info Loaded env from /home/mrchike/code/features/education/LMS/.env
- event compiled client and server successfully in 3.4s (20 modules)
- wait compiling...
- event compiled client and server successfully in 1335 ms (20 modules)
- wait compiling /middleware (client and server)...
- event compiled successfully in 2.2s (45 modules)
- wait compiling /(dashboard)/(routes)/(root)/page (client and server)...
After compilation you will be able to access the page and you can...
π Start creating courses
As it stands you've been able to successfully setup the project on your local. I would more than happy to collaborate with you as there's a whole lot of features to be implemented in the pipeline. Hopefully, they wet your appetite...
- Include extra Video Streaming Option for YouTube & Vimeo
- Implement Docker Support for easy support dealing with dependency issues on different OS
- Include Localization Support for students in multiple countries
- Include extra upload platforms like S3
- Live Classroom Collaboration Between students for Brainstorming, Debates and presentations.
- Advanced Logging System with Grafana
- Create a Course Rating System
Looking forward to working with Ya! π₯Ή
Resources:
Top comments (0)