{"id":20454482,"url":"https://github.com/sangtrandev00/e-learning-platform","last_synced_at":"2025-09-24T19:31:10.109Z","repository":{"id":186526629,"uuid":"666702740","full_name":"sangtrandev00/e-learning-platform","owner":"sangtrandev00","description":"E Learning Platform, buying selling enrolling course, managing look more insight course at dashboard","archived":false,"fork":false,"pushed_at":"2024-01-28T02:07:39.000Z","size":1770,"stargazers_count":6,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-15T11:16:00.319Z","etag":null,"topics":["antd","react-player","react-typescript","redux-toolkit","router-dom-v6","rtk-query","sass","vitejs"],"latest_commit_sha":null,"homepage":"https://e-learning-platform-dev.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sangtrandev00.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-15T09:42:17.000Z","updated_at":"2024-10-31T20:06:55.000Z","dependencies_parsed_at":"2023-10-24T02:46:23.520Z","dependency_job_id":null,"html_url":"https://github.com/sangtrandev00/e-learning-platform","commit_stats":null,"previous_names":["sangtrandev00/e-learning-platform"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sangtrandev00%2Fe-learning-platform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sangtrandev00%2Fe-learning-platform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sangtrandev00%2Fe-learning-platform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sangtrandev00%2Fe-learning-platform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sangtrandev00","download_url":"https://codeload.github.com/sangtrandev00/e-learning-platform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234112218,"owners_count":18781750,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antd","react-player","react-typescript","redux-toolkit","router-dom-v6","rtk-query","sass","vitejs"],"created_at":"2024-11-15T11:16:04.390Z","updated_at":"2025-09-24T19:31:09.641Z","avatar_url":"https://github.com/sangtrandev00.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FRONTEND: E LEARNING PLATFORM\n\u003c!-- [![YouTube Video](https://img.youtube.com/vi/gyMwXuJrbJQ/default.jpg)](https://www.youtube.com/watch?v=gyMwXuJrbJQ)\n\n[![YouTube Video](https://img.youtube.com/vi/VIDEO_ID/0.jpg){width=480px height=360px}](https://www.youtube.com/watch?v=VIDEO_ID) --\u003e\n\u003cimg src=\"./src/assets/images/e-learning-website.png\" alt=\"Screenshot\" width=\"100%\" \u003e\n\n\u003cp style=\"text-align: center; font-style: italic\"\u003eThis Image of Homepage of E Learnning Platform\u003c/p\u003e\n\u003c!-- \u003ciframe width=\"480\" height=\"360\" src=\"https://www.youtube.com/embed/gyMwXuJrbJQ\" frameborder=\"0\" allowfullscreen\u003e\u003c/iframe\u003e --\u003e\n\n\n## 1. Project Description Overview: \n+ Develop a comprehensive e-learning platform that\nserves as a marketplace for selling online courses.\n+ Our platform\noffers a seamless experience for users to browse and purchase courses, study the course materials, and track their progress. \n+ The administrator has the ability to manage orders and analyze student performance\n+ Take a look to visit the website: \nhttps://e-learning-platform.pro\n\n## 2. Main Module features\n\n### 2.1 Authentication feature: \n+ Using JWT authenticate for both user and admin site\n+ Users can signup \n   - After signup, users are able to login (with username and password have created at website)\n   - Password using bcrypt algorithm\n   - Info to signup: Name, Email, Password, Phone\n+ Users are able to login \n  - After login state of website will change.\n+ Admin login. After login with (User is authorized to view/manage models base on the current role (USER, TEACHER) )\n+ Logout. Both user and admin are able to logout of website. When user or admin logout of website (the state of website will reset from the begining, and it will send a request to backend to excute logout and make JSON WEB TOKEN invalid)\n## 2.2 Main core features\n### 2.2.1 Before login\n#### **2.2.1.1. Client**\n- **Header**: With Navigation, help users can navigate over website\n- **Footer**: With related links such as about, contact, page introduction and other connection like socials.\n- **Menu**: With full categories of website.\n- **Homepage**: \n  -  Users are able to see overview about website with slogan, banner, benefits, statistic, courses by categories (Popular, Frontend, Backend, Devops Courses) at website\n  -  Each Section show 4 course items, and view more button, which make section load x2 number of items.\n    - At banner user can click to view courses, start now to open login modal\n    - When not logined, user when click to the button (Enroll/ Buy now) it will force user to login first then continue.\n    - Load more to views at each categories section.\n    - When click at title and thumbnail of course it will go to course detail\n- **Course Detail**:\n  - View detail for every course with\n  - Infomation of course detail:\n    -  Course name\n    -  Numbers of Ratings\n    - Average stars\n    -  Last updated\n    -  Thumbnail\n    -  Number of students\n    -  Course Price / Free\n    -  Buttons: Enroll now/Add to cart/ Buy now.\n    -  Course includes (total videos length, number of sections, lessons)\n    -  Contents will learn\n    -  And layout sections of the course with numbers lessons, videos, minutes,...\n    -  Each section of course content have:\n       - Section name\n       - Number of lesson\n       - Total hours of that section  \n       - lessons follow by section.\n    - Each lesson have info:\n      - Lesson name\n      - Total video lengths of that lesson \n    - Course's author information: with name and avatar.\n  - User can add to cart (the course). Go to View Cart\n- **Courses Page**:\n    - Users are able to views all the courses of website\n    - Users can search for courses. This feature, I applied full-text search with nodejs and mongoodb. If course's name or description includes the word in \"search terms\" it will be displayed.\n    - Users can filter buy author name, level, price, topic. (All this feature i used logic at backend using nodejs)\n    - Users can sort for buying newest courses.\n    - Paginate the courses. With 12 coures per each page.\n    - \u003eNote: The Information of Course component, which shows at Homepage and Courses page is:\n      + The thumbnail\n      + Course name\n      + Course Description\n      + Buttons: Enroll/Buynow\n      + Price of course/ Free\n      + Author avatar and author's name\n      + Badge\n\n- **View Cart**: \n  - User can add to cart without login at website. The Cart will store at localStorage, persist the state even if user close browser.\n  -  At cart page, user can remove cart, view briefly information of course, total price of cart, number of courses have added, continute to checkout (if logined).\n- **Other pages**: Contact, About page\n#### 2.2.1.2. Admin Pages:\n    **Only show admin login page when not logged in**\n### 2.2.2 After login:\n\n#### How to login at Client ?\n#### Step 1: Click Sign in Button\n\n\n#### Step 2: Enter email and password:\n+ Email: test_page@gmail.com\n+ Password: 123456\n\n![Test Page](./src/assets/images/e-learning-website-client-login.png \"Test Page\")\n\n\n#### 2.2.2.1 Client (Add more features when logined)\n- **Header**: Show information of user (with avatar, username, email )\n- **Homepage**: \n  - Change state of website. Show my courses (the courses have ordered of users)\n  - Users are able to buy courses, enroll (if free) when logined.\n  - After enrolled to go to subcribe course and create an order at database. \n  - After click to buy now to go checkout page, and continute to check and create order.\n  - If that course's already bought buy user, the course item will show (Go to Course) Button. Let the user navigate to Study Watch Video Place.\n-  **Course Detail**: \n   -  Users are able to buy now, enroll if free.\n   -  Go to course study place if already bought.\n- **My Learning Place**: (React Player)\n  - Users are able to view all of courses have ordered before\n  - See overview of number of courses, total hours of video have watch/done.\n  - Click to course item to go to course study place (watch video)\n- **View Profile of user**:\n  - View Profile of user with total course have ordered, total hours of videos have done, info name. \n- **Course Study Place**: \n    - Users are able to track current progress of user'course\n    - Watch video, complete video\n    - After complete 100% course's lessons, Users are able to get certificates of course (with PDF file have name, date finished, course name)\n#### 2.2.2.2 Admin\n\n#### How to login ?\n#### Step 1: Go to Website\nhttps://e-learning-platform.pro/author-login\n#### Step 2: Login with Admin author (contact me to get the account)\n![Author Login](./src/assets/images/e-learning-website-admin-login.png \"Author Login\")\n#### Step 3: Enjoy with admin dashboard and other features.\n\n\u003cimg src=\"./src/assets/images/e-learing-dashboard.png\" alt=\"e-learing-admin-dashboard\"\u003e\n\u003cp style=\"text-align:center; font-style: italic\"\u003eE learning dashboard overview\u003c/p\u003e\n\n- **Dashboard**: \n  - View overall reports at the website (with total sales for 30 days, all users, all courses, all categories),\n  -  view new singups, revenue, course sales for (7/30/60 days ago)\n- **Categories**: \n  - Manage categories with list categories by table format have pagination \n  - Create/edit/delete category\n  - Search category by name, filter category by category name \n- **Courses**:\n  - Manage courses with list courses by table format and grid format have pagination \n  - Create/delete course \n  - After creating a course, admin is able to add section and lessons for course\n  - Lesson type is youtube video format.\n  - Search course by name (full-text search)\n  - Filter course by categories, author's name\n- **Users**:\n  - Manage users with list users by table format, have pagination \n  - Create/edit/delete user, \n  - Search user by name (full-text search)\n- **Orders**:\n  - Manage orders with list orders by table format, have pagination.\n  - View the overall of each orders includes total revenue of website, total number of sales, total amounts of each orders, numbers of courses, date ordered\n  - Search order by user's name\n  - Filter orders by course, buy previous date ordered (7 days, 30 days, yesterday, today).\n\n- **Reports Centers**:\n  - ** User Progress**:\n    - List users's insight with total study time of users for all courses, total courses have ordered, in completed course  \n  - ** Course Insight**:  \n    - List course's insight with total of learners, average study times of students per all students of this course, total videos durations, and all lessons of the course.\n- **Authorization**:\n  - Website author with 2 main role (ADMIN - TEACHER)\n  - Admin with full control of permissions\n  - Teachers are able to view courses of themselves, create/edit/ delete courses of themselves, View categories, not able to edit or delete\n## 3. Technologies in use:\n+ Languages: HTML, CSS, SCSS\n+ Responsive Web Design \n+ Framework/libraries: React Typescript, Redux, RTK Query, Ant Design\n+ Build tool: Vitejs\n\n## 4. Related Links:\n+ Backend Repository Link: [backend repository link here](https://github.com/sangtrandev00/backend-course-prj)\n+ Author's Person Website: https://trannhatsang.com\n\n\n## 5. License\n+ Author: Tran Nhat Sang\n+ Website: https://trannhatsang.com\n+ Email: nhatsang0101@gmail.com\n+ Contact me everytime!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsangtrandev00%2Fe-learning-platform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsangtrandev00%2Fe-learning-platform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsangtrandev00%2Fe-learning-platform/lists"}