MaLearn is a comprehensive e-learning platform built with Next.js 15, Payload CMS, and MongoDB. It supports multi-role user management, course creation, payment integration, and cryptocurrency transactions.
- Multi-Role User System: Admin, Instructor, and Student roles with different permissions
- Course Management: Create, manage, and sell courses with multimedia content
- Payment Integration: Support for both fiat currency (Stripe) and cryptocurrency payments
- Quiz System: Create assessments with multiple question types
- Progress Tracking: Track student progress through courses
- Responsive Design: Mobile-first design with Tailwind CSS
- Next.js 15: Latest React framework with App Router
- Payload CMS: Headless CMS for content management
- MongoDB: NoSQL database for scalable data storage
- Redis: Caching and session management
- Docker: Containerized development environment
- TypeScript: Type-safe development
- Authentication: Built-in auth with email verification
- Frontend: Next.js 15, React, TypeScript, Tailwind CSS
- Backend: Payload CMS, Node.js
- Database: MongoDB, Redis
- Payment: Stripe, Cryptocurrency support
- Infrastructure: Docker, Docker Compose
- Development: ESLint, Prettier, Vitest, Playwright
- Node.js 18+
- Docker Desktop
- pnpm (recommended) or npm
- Git
git clone <repository-url>
cd ma-learnpnpm installCopy the example environment file:
cp .env.example .envUpdate the following environment variables in .env:
PAYLOAD_SECRET: A secure secret key for Payload CMSDATABASE_URI: MongoDB connection stringSTRIPE_SECRET_KEY: Your Stripe secret keySTRIPE_WEBHOOK_SECRET: Stripe webhook secret
# Using the management script (recommended)
./manage.sh start
# Or manually
docker-compose up -d
pnpm dev# Using the management script
./manage.sh reset
# Or manually
export PAYLOAD_SECRET="your-secret-key-here-change-this-in-production"
export DATABASE_URI="mongodb://localhost:27017/malearn"
npx tsx src/endpoints/seed/simple-seed.ts- Frontend: http://localhost:3000
- Admin Panel: http://localhost:3000/admin
- API: http://localhost:3000/api
- Admin: admin@malearn.com / admin123
- Instructor: instructor@malearn.com / instructor123
- Student: student@malearn.com / student123
The manage.sh script provides convenient commands for platform management:
# Start development environment
./manage.sh start
# Stop development environment
./manage.sh stop
# Reset database and reseed
./manage.sh reset
# Show platform status
./manage.sh status
# Run tests
./manage.sh test
# Build for production
./manage.sh build
# Show help
./manage.sh help- Users: User management with role-based access control
- Courses: Course content, pricing, and curriculum
- Enrollments: Student-course relationships and progress tracking
- Quizzes: Assessment system with multiple question types
- Categories: Course categorization
- Pages: Static content pages
- Posts: Blog/news posts
- Media: File uploads and media management
- Admin: Full platform management access
- Instructor: Course creation and management
- Student: Course enrollment and learning
- Fiat Currency: Stripe integration for credit card payments
- Cryptocurrency: Support for ETH, BTC, MATIC, BNB
pnpm testpnpm test:e2epnpm test:integrationpnpm build
pnpm startdocker-compose -f docker-compose.yml -f docker-compose.prod.yml up --build- MongoDB: Database on port 27017
- Redis: Cache and sessions on port 6379
- Nginx: Reverse proxy on port 80
# Start all services
docker-compose up -d
# Stop all services
docker-compose down
# View logs
docker-compose logs -f
# Reset volumes
docker-compose down -v# Database
DATABASE_URI=mongodb://localhost:27017/malearn
MONGODB_URL=mongodb://localhost:27017/malearn
# Payload CMS
PAYLOAD_SECRET=your-secret-key-here
PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000
# Payment
STRIPE_SECRET_KEY=sk_test_your_stripe_key
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret
# Cryptocurrency
NEXT_PUBLIC_ENABLE_CRYPTO_PAYMENTS=true
NEXT_PUBLIC_SUPPORTED_CHAINS=ethereum,polygon,bsc
# Email
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your-email@gmail.com
SMTP_PASSWORD=your-app-password- Payload Config:
src/payload.config.ts - Next.js Config:
next.config.js - Tailwind Config:
tailwind.config.mjs - Docker Config:
docker-compose.yml
- Tailwind CSS configuration in
tailwind.config.mjs - Global styles in
src/app/(frontend)/globals.css - Component-specific styles using CSS modules
- Add new collections in
src/collections/ - Configure fields and access control
- Update API endpoints as needed
- Configure Stripe in environment variables
- Add new cryptocurrency support in payment handlers
- Update pricing models in course collections
- Email/password authentication
- Role-based access control
- Session management with Redis
- Input validation and sanitization
- CSRF protection
- Rate limiting on API endpoints
- Secure secret management
- Environment variable validation
- Production security headers
- Real-time compilation feedback
- Error reporting and stack traces
- Performance monitoring
- Health check endpoints
- Error logging and monitoring
- Performance metrics
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests for new features
- Run the test suite
- Submit a pull request
- Follow TypeScript best practices
- Use conventional commit messages
- Add documentation for new features
- Maintain test coverage
This project is licensed under the MIT License - see the LICENSE file for details.
- Database Connection: Ensure MongoDB is running and accessible
- Build Errors: Check Node.js version and dependencies
- Docker Issues: Verify Docker Desktop is running
- Environment Variables: Ensure all required env vars are set
- Check the issue tracker for known problems
- Review the documentation
- Submit bug reports with detailed information
- Join our community discussions
- Advanced analytics dashboard
- Multi-language support
- Video streaming optimization
- Mobile app development
- Advanced quiz types
- Certificate generation
- Social learning features
- Scalability improvements
- AI-powered recommendations
- Advanced reporting
- Integration marketplace
- Multi-tenant support
Made with ❤️ by the MaLearn team
-
Start with Docker
# Using the convenience script ./docker-dev.sh up # Or using Make make dev # Or using Docker Compose docker-compose up -d
-
Start the application
pnpm install pnpm dev
-
Access the platform
- Application: http://localhost:3000
- Admin Panel: http://localhost:3000/admin
- MongoDB Express: http://localhost:8081
- Redis Commander: http://localhost:8082
If you have not done so already, you need to have standalone copy of this repo on your machine. If you've already cloned this repo, skip to Development.
Go to Payload Cloud and clone this template. This will create a new repository on your GitHub account with this template's code which you can then clone to your own machine.
Use the create-payload-app CLI to clone this template directly to your machine:
pnpx create-payload-app my-project -t websiteUse the git CLI to clone this template directly to your machine:
git clone -n --depth=1 --filter=tree:0 https://github.com/payloadcms/payload my-project && cd my-project && git sparse-checkout set --no-cone templates/website && git checkout && rm -rf .git && git init && git add . && git mv -f templates/website/{.,}* . && git add . && git commit -m "Initial commit"- First clone the repo if you have not done so already
cd my-project && cp .env.example .envto copy the example environment variablespnpm install && pnpm devto install dependencies and start the dev server- open
http://localhost:3000to open the app in your browser
That's it! Changes made in ./src will be reflected in your app. Follow the on-screen instructions to login and create your first admin user. Then check out Production once you're ready to build and serve your app, and Deployment when you're ready to go live.
The Payload config is tailored specifically to the needs of most websites. It is pre-configured in the following ways:
See the Collections docs for details on how to extend this functionality.
-
Users are auth-enabled collections that have access to the admin panel and unpublished content. See Access Control for more details.
For additional help, see the official Auth Example or the Authentication docs.
-
Posts are used to generate blog posts, news articles, or any other type of content that is published over time. All posts are layout builder enabled so you can generate unique layouts for each post using layout-building blocks, see Layout Builder for more details. Posts are also draft-enabled so you can preview them before publishing them to your website, see Draft Preview for more details.
-
All pages are layout builder enabled so you can generate unique layouts for each page using layout-building blocks, see Layout Builder for more details. Pages are also draft-enabled so you can preview them before publishing them to your website, see Draft Preview for more details.
-
This is the uploads enabled collection used by pages, posts, and projects to contain media like images, videos, downloads, and other assets. It features pre-configured sizes, focal point and manual resizing to help you manage your pictures.
-
A taxonomy used to group posts together. Categories can be nested inside of one another, for example "News > Technology". See the official Payload Nested Docs Plugin for more details.
See the Globals docs for details on how to extend this functionality.
-
HeaderThe data required by the header on your front-end like nav links.
-
FooterSame as above but for the footer of your site.
Basic access control is setup to limit access to various content based based on publishing status.
users: Users can access the admin panel and create or edit content.posts: Everyone can access published posts, but only users can create, update, or delete them.pages: Everyone can access published pages, but only users can create, update, or delete them.
For more details on how to extend this functionality, see the Payload Access Control docs.
Create unique page layouts for any type of content using a powerful layout builder. This template comes pre-configured with the following layout building blocks:
- Hero
- Content
- Media
- Call To Action
- Archive
Each block is fully designed and built into the front-end website that comes with this template. See Website for more details.
A deep editorial experience that allows complete freedom to focus just on writing content without breaking out of the flow with support for Payload blocks, media, links and other features provided out of the box. See Lexical docs.
All posts and pages are draft-enabled so you can preview them before publishing them to your website. To do this, these collections use Versions with drafts set to true. This means that when you create a new post, project, or page, it will be saved as a draft and will not be visible on your website until you publish it. This also means that you can preview your draft before publishing it to your website. To do this, we automatically format a custom URL which redirects to your front-end to securely fetch the draft version of your content.
Since the front-end of this template is statically generated, this also means that pages, posts, and projects will need to be regenerated as changes are made to published documents. To do this, we use an afterChange hook to regenerate the front-end when a document has changed and its _status is published.
For more details on how to extend this functionality, see the official Draft Preview Example.
In addition to draft previews you can also enable live preview to view your end resulting page as you're editing content with full support for SSR rendering. See Live preview docs for more details.
We've added hooks to collections and globals so that all of your pages, posts, footer, or header changes will automatically be updated in the frontend via on-demand revalidation supported by Nextjs.
Note: if an image has been changed, for example it's been cropped, you will need to republish the page it's used on in order to be able to revalidate the Nextjs image cache.
This template comes pre-configured with the official Payload SEO Plugin for complete SEO control from the admin panel. All SEO data is fully integrated into the front-end website that comes with this template. See Website for more details.
This template also pre-configured with the official Payload Search Plugin to showcase how SSR search features can easily be implemented into Next.js with Payload. See Website for more details.
If you are migrating an existing site or moving content to a new URL, you can use the redirects collection to create a proper redirect from old URLs to new ones. This will ensure that proper request status codes are returned to search engines and that your users are not left with a broken link. This template comes pre-configured with the official Payload Redirects Plugin for complete redirect control from the admin panel. All redirects are fully integrated into the front-end website that comes with this template. See Website for more details.
We have configured Scheduled Publish which uses the jobs queue in order to publish or unpublish your content on a scheduled time. The tasks are run on a cron schedule and can also be run as a separate instance if needed.
Note: When deployed on Vercel, depending on the plan tier, you may be limited to daily cron only.
This template includes a beautifully designed, production-ready front-end built with the Next.js App Router, served right alongside your Payload app in a instance. This makes it so that you can deploy both your backend and website where you need it.
Core features:
- Next.js App Router
- TypeScript
- React Hook Form
- Payload Admin Bar
- TailwindCSS styling
- shadcn/ui components
- User Accounts and Authentication
- Fully featured blog
- Publication workflow
- Dark mode
- Pre-made layout building blocks
- SEO
- Search
- Redirects
- Live preview
Although Next.js includes a robust set of caching strategies out of the box, Payload Cloud proxies and caches all files through Cloudflare using the Official Cloud Plugin. This means that Next.js caching is not needed and is disabled by default. If you are hosting your app outside of Payload Cloud, you can easily reenable the Next.js caching mechanisms by removing the no-store directive from all fetch requests in ./src/app/_api and then removing all instances of export const dynamic = 'force-dynamic' from pages files, such as ./src/app/(pages)/[slug]/page.tsx. For more details, see the official Next.js Caching Docs.
To spin up this example locally, follow the Quick Start. Then Seed the database with a few pages, posts, and projects.
Postgres and other SQL-based databases follow a strict schema for managing your data. In comparison to our MongoDB adapter, this means that there's a few extra steps to working with Postgres.
Note that often times when making big schema changes you can run the risk of losing data if you're not manually migrating it.
Ideally we recommend running a local copy of your database so that schema updates are as fast as possible. By default the Postgres adapter has push: true for development environments. This will let you add, modify and remove fields and collections without needing to run any data migrations.
If your database is pointed to production you will want to set push: false otherwise you will risk losing data or having your migrations out of sync.
Migrations are essentially SQL code versions that keeps track of your schema. When deploy with Postgres you will need to make sure you create and then run your migrations.
Locally create a migration
pnpm payload migrate:createThis creates the migration files you will need to push alongside with your new configuration.
On the server after building and before running pnpm start you will want to run your migrations
pnpm payload migrateThis command will check for any migrations that have not yet been run and try to run them and it will keep a record of migrations that have been run in the database.
Alternatively, you can use Docker to spin up this template locally. To do so, follow these steps:
- Follow steps 1 and 2 from above, the docker-compose file will automatically use the
.envfile in your project root - Next run
docker-compose up - Follow steps 4 and 5 from above to login and create your first admin user
That's it! The Docker instance will help you get up and running quickly while also standardizing the development environment across your teams.
To seed the database with a few pages, posts, and projects you can click the 'seed database' link from the admin panel.
The seed script will also create a demo user for demonstration purposes only:
- Demo Author
- Email:
demo-author@payloadcms.com - Password:
password
- Email:
NOTICE: seeding the database is destructive because it drops your current database to populate a fresh one from the seed template. Only run this command if you are starting a new project or can afford to lose your current data.
To run Payload in production, you need to build and start the Admin panel. To do so, follow these steps:
- Invoke the
next buildscript by runningpnpm buildornpm run buildin your project root. This creates a.nextdirectory with a production-ready admin bundle. - Finally run
pnpm startornpm run startto run Node in production and serve Payload from the.builddirectory. - When you're ready to go live, see Deployment below for more details.
The easiest way to deploy your project is to use Payload Cloud, a one-click hosting solution to deploy production-ready instances of your Payload apps directly from your GitHub repo.
This template can also be deployed to Vercel for free. You can get started by choosing the Vercel DB adapter during the setup of the template or by manually installing and configuring it:
pnpm add @payloadcms/db-vercel-postgres// payload.config.ts
import { vercelPostgresAdapter } from '@payloadcms/db-vercel-postgres'
export default buildConfig({
// ...
db: vercelPostgresAdapter({
pool: {
connectionString: process.env.POSTGRES_URL || '',
},
}),
// ...We also support Vercel's blob storage:
pnpm add @payloadcms/storage-vercel-blob// payload.config.ts
import { vercelBlobStorage } from '@payloadcms/storage-vercel-blob'
export default buildConfig({
// ...
plugins: [
vercelBlobStorage({
collections: {
[Media.slug]: true,
},
token: process.env.BLOB_READ_WRITE_TOKEN || '',
}),
],
// ...There is also a simplified one click deploy to Vercel should you need it.
Before deploying your app, you need to:
- Ensure your app builds and serves in production. See Production for more details.
- You can then deploy Payload as you would any other Node.js or Next.js application either directly on a VPS, DigitalOcean's Apps Platform, via Coolify or more. More guides coming soon.
You can also deploy your app manually, check out the deployment documentation for full details.
If you have any issues or questions, reach out to us on Discord or start a GitHub discussion.