E-learning web

This project is a frontend part of E-learning backend. This project implements micro-frontend architecture built with Turborepo.

Features:

• - [x] Course Management
• - [x] Blog Management
• - [x] Quiz Management
• - [x] Category
• - [x] Tag
• - [x] Course Bookmark
• - [x] Course Review
• - [x] User Management
• - [x] AI powered content editor
• - [x] Dark mode support
• - [ ] Subscription

Requirements

1. Node.js 18.17 or later
2. E-learning backend APIs
3. TinyMCE self-hosted

This project use TinyMCE for some rich text editing. You need to download TinyMCE self-hosted source here and then unzip and place inside public folder or you can host anywhere you wish to place. Read more about TinyMCE self-hosted here.

Required .env file properties are inclued inside each apps as .env.example file.

What's inside?

This Turborepo includes the following packages/apps:

Apps and Packages

• elearning-web: E-learning consumer app using Next.js
• elearning-admin: E-learning admin app using Next.js
• @elearning/ui: UI and other central components shared by both elearning-web and elearning-admin applications
• @elearning/lib: a utility library shared by both elearning-web and elearning-admin applications
• @elearning/global-store: redux global store shared by both elearning-web and elearning-admin applications
• @elearning/block-editor: customized tiptap based AI-powered block editor
• @elearning/assets: fonts and images assets
• @elearning/eslint-config: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• @elearning/typescript-config: tsconfig.jsons used throughout the monorepo
• @elearning/tailwind-config: tailwindcss configuration including base css

Directory structure

.
├── apps                   
│   ├── admin     
│   └── web  
├── packages                   
│   ├── assets     
│   ├── block-editor     
│   ├── config-eslint     
│   ├── config-tailwind     
│   ├── config-typescript     
│   ├── global-store     
│   ├── lib    
│   └── ui       
└── ...

Multi-Zones

Multi-Zones is a way of having independent Next.js applications that all render on a common domain. This is a method for building separation of concerns in large teams. It works well if a single domain has separate groupings of pages where a user doesn't navigate between the groups very often.

In this project, ./apps/web is our main app, and ./apps/admin is a separate app that handles all routes for /admin/**.

Utilities

This Turborepo has some additional tools already setup for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Build

To build all apps and packages, run the following command:

cd elearning-frontend
pnpm build

Develop

To develop all apps and packages, run the following command:

cd elearning-frontend
pnpm i
pnpm dev

Support me

Screenshots