https://github.com/phyohtetarkar/hope-elearning-web
E-learning frontend project using micro-frontend architecture
https://github.com/phyohtetarkar/hope-elearning-web
e-learning elearning frontend-web microfrontends monorepo nextjs reactjs turborepo
Last synced: 7 months ago
JSON representation
E-learning frontend project using micro-frontend architecture
- Host: GitHub
- URL: https://github.com/phyohtetarkar/hope-elearning-web
- Owner: phyohtetarkar
- License: mit
- Created: 2024-03-19T13:55:57.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-04T14:30:44.000Z (over 1 year ago)
- Last Synced: 2025-04-04T00:22:21.919Z (9 months ago)
- Topics: e-learning, elearning, frontend-web, microfrontends, monorepo, nextjs, reactjs, turborepo
- Language: TypeScript
- Homepage:
- Size: 7.21 MB
- Stars: 31
- Watchers: 2
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# E-learning web
This project is a frontend part of [E-learning backend](https://github.com/phyohtetarkar/hope-elearning-backend/). This project implements micro-frontend architecture built with [Turborepo](https://turbo.build/).
**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
- Node.js 18.17 or later
- E-learning backend APIs
- TinyMCE self-hosted
This project use [TinyMCE](https://www.tiny.cloud/) for some rich text editing. You need to download TinyMCE self-hosted source [here](https://www.tiny.cloud/get-tiny/self-hosted/) and then unzip and place inside **public** folder or you can host anywhere you wish to place. Read more about TinyMCE self-hosted [here](https://www.tiny.cloud/blog/get-started-with-tinymce-self-hosted/).
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](https://nextjs.org/)
- `elearning-admin`: E-learning admin app using [Next.js](https://nextjs.org/)
- `@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.json`s used throughout the monorepo
- `@elearning/tailwind-config`: tailwindcss configuration including base css
### Directory structure
```bash
.
├── apps
│ ├── admin
│ └── web
├── packages
│ ├── assets
│ ├── block-editor
│ ├── config-eslint
│ ├── config-tailwind
│ ├── config-typescript
│ ├── global-store
│ ├── lib
│ └── ui
└── ...
```
### Multi-Zones
[Multi-Zones](https://nextjs.org/docs/app/building-your-application/deploying/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](https://www.typescriptlang.org/) for static type checking
- [ESLint](https://eslint.org/) for code linting
- [Prettier](https://prettier.io) 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
