Free, high-quality tutorials for Next.js, React, Tailwind CSS, TypeScript, and more.
- 📚 Rich Tutorial Content - Comprehensive tutorials with code examples
- 🎨 Beautiful UI - Modern, responsive design with dark mode support
- 🔍 Search - Full-text search across all tutorials (Ctrl/Cmd + K)
- 🏷️ Categorized - Tutorials organized by technology and difficulty
- 📱 Mobile-First - Fully responsive design
- ⚡ Fast - Built with Next.js 16 App Router and React Server Components
- 🌙 Dark Mode - System-aware theme switching
- 📖 MDX Support - Write tutorials in Markdown with JSX components
- 🎯 Syntax Highlighting - Beautiful code blocks with Shiki
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Content: MDX with next-mdx-remote
- Syntax Highlighting: Shiki
- Icons: Lucide React
- Node.js 18+
- npm, yarn, or pnpm
- Clone the repository:
git clone https://github.com/tatineeeeeee/devlearn.git
cd devlearn- Install dependencies:
npm install- Run the development server:
npm run dev├── app/ # Next.js App Router
│ ├── api/ # API routes
│ ├── about/ # About page
│ ├── categories/ # Categories page
│ ├── tutorials/ # Tutorial pages
│ │ ├── [category]/ # Category pages
│ │ │ └── [slug]/ # Individual tutorial pages
│ └── layout.tsx # Root layout
├── components/ # React components
├── content/ # Tutorial content (MDX)
│ └── tutorials/
│ ├── nextjs/
│ ├── react/
│ ├── tailwind/
│ └── typescript/
├── lib/ # Utility functions
│ ├── mdx.ts # MDX processing
│ ├── tutorials.ts # Tutorial data helpers
│ └── utils.ts # General utilities
└── public/ # Static assets
- Create a new
.mdxfile in the appropriate category folder:
content/tutorials/[category]/[slug].mdx
- Add frontmatter at the top:
---
title: "Your Tutorial Title"
description: "A brief description of your tutorial"
date: "2026-01-20"
author: "Your Name"
tags: ["tag1", "tag2"]
difficulty: "beginner" | "intermediate" | "advanced"
featured: true | false
---- Write your content in MDX format with code examples!
Modify the color palette in tailwind.config.js or use Tailwind's built-in colors.
Add new categories by creating folders in content/tutorials/ and updating the categoryMeta in components/CategoryGrid.tsx.
Contributions are welcome! Here's how you can help:
- Write Tutorials - Share your knowledge with the community
- Fix Bugs - Help improve the codebase
- Improve UI/UX - Make the site better for everyone
- Documentation - Help others understand the project
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-tutorial) - Commit your changes (
git commit -m 'Add amazing tutorial') - Push to the branch (
git push origin feature/amazing-tutorial) - Open a Pull Request
This project is open source and available under the MIT License.
If you find this project useful, please consider:
- Giving it a star on GitHub ⭐
- Sharing it with others
- Contributing tutorials or improvements
Made with ❤️ by the DevLearn community