.NET for the Back-end
React for the Front-end
Redux for storing data from database on Front-end
Cloudinary server for storing videos and images
Stripe service for receiving payments
This is a Platform for creating and taking the courses. Here is a web API that helps you interact with a database that stores courses data, and the client side to create and take courses (log in, create and complete lessons, upload and watch videos, take tests).
To run the project locally see "How to run".
- first of all, you need to install .Net 8.0 (if you do not already have it)
- open this folder in VS Code
Now you're ready to start. If you want to run the app:
- run Docker Desktop and the following command to create postgres database
$ docker run --name devCourse -e POSTGRES_USER=appuser -e POSTGRES_PASSWORD=secret -p 5432:5432 -d postgres:latest
- go to API folder, set 6 user-secrets: 3 for Cloudinary (that stores videos) and 3 for Stripe (is used for payments):
$ cd API
$ dotnet user-secrets set "<KeyName>" "<Value>"
- run the API:
$ dotnet restore
$ dotnet run
- run client side using the following commands:
$ cd client
$ npm install
$ npm start
- to receive webhook information from Stripe when payment is successful and grant the user access to the course, run the following command:
$ stripe listen -f http://localhost:5000/api/payments/webhook -e charge.succeeded
Then you should see this message about successful registretion.
Managing courses is allowed only to users with "Teacher" role. They have "Редагувати курси" tab on the top bar.
Here you can create a new course or edit existing. Only active courses are visible for users.
You can change any information, create new sections, lessons and so on.
Also create and edit tests.
Share link to your course with others.
Go to the main page and buy any course.
Choose your plan.
Review purchase.
Enter card data. Use the following test card data:
card number: 4242 4242 4242 4242
expiry date: any future date
CVV: any 3 digits
You should see the success message.
Go the course.
Choose the lesson and start learning.
The lesson consists of videos and tests that should be completed after the lesson.
Complete the videos. Pass the tests.
After answering, you immediately see whether you are right or not.
At the end, you will see your score.
Also you can see what stage each lesson is at (completed, in progress, not started) and how many completed lessons are in each section.
The app is also adapted to smaller devices such as a phone or tablet. For example, for smaller screens, a side menu appears in the header, which repeats the same buttons that are on the large screens. The content of the pages is also appropriate.
If you want to test how the Web API works it would be enough to run only API folder (see "How to run").
- then open http://localhost:5000/swagger in your browser and try to use some endpoints to get or change data in database.
Example of getting lesson by id, where you can see information about the lesson, as well as a list of keywords and lessons that are recommended to be completed/repeated before.
If you want to run tests (you also can see that all tests are passed in Github Actions)
- go back to the root folder maths-course if you are not there
- run the following command
$ dotnet test ./API.Tests
Example:
