A modern, community-driven blog platform built with Next.js 15, designed for tech enthusiasts, developers, and innovators to share knowledge, insights, and connect with fellow developers.
- 📝 Article Submission System - Community members can submit articles through a rich editor
- 👤 User Authentication - Secure authentication powered by Clerk
- 🎨 Rich Text Editor - TipTap editor with markdown support for article creation
- 📱 Responsive Design - Mobile-first design with beautiful UI components
- 🌙 Dark/Light Theme - Theme switching with next-themes
- 📊 Admin Dashboard - Article review and management system
- 🔍 Content Filtering - Filter articles by categories and tags
- 📖 Markdown Rendering - Full markdown support with syntax highlighting
- ⚡ Next.js 15 - Latest Next.js with App Router
- 🎯 TypeScript - Full type safety
- 💅 Tailwind CSS - Modern styling with custom animations
- 🧩 Radix UI - Accessible UI components
- 🔐 Middleware Protection - Route protection and authentication
- 📁 File Upload - Support for markdown file uploads
- 🎭 Component Library - Reusable UI components
- Framework: Next.js 15
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: Radix UI
- Authentication: Clerk
- Editor: TipTap
- Markdown: remark, gray-matter
- Icons: Lucide React
- Forms: React Hook Form + Zod
- Node.js 18+
- npm, yarn, or pnpm
- Clone the repository
git clone <repository-url>
cd Blog- Install dependencies
> npm install
# or
> pnpm install
# or
> yarn install- Set up environment variables
Create a
.env.localfile in the root directory:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key- Run the development server
> npm run dev
# or
> pnpm dev
# or
> yarn dev- Open your browser Navigate to http://localhost:3000
Blogs/
├── app/ # Next.js 15 App Router
│ ├── admin/ # Admin dashboard
│ ├── api/ # API routes
│ ├── blog/ # Blog pages
│ ├── contact/ # Contact page
│ ├── login/ # Login page
│ ├── write-for-us/ # Article submission
│ └── layout.tsx # Root layout
├── components/ # Reusable components
│ ├── ui/ # UI component library
│ ├── navbar.tsx # Navigation component
│ ├── footer.tsx # Footer component
│ └── ... # Other components
├── data/ # JSON data files
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── public/ # Static assets
└── styles/ # Global styles
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
- Users can submit articles through the "Write for Us" page
- Supports both file upload (.md files) and rich text editor
- Form validation with proper error handling
- Preview functionality for markdown content
- Clerk-based authentication system
- Protected routes with middleware
- User role management
- IIITDM email validation for submissions
- Admin approval system for submitted articles
- JSON-based storage for articles and submissions
- Category and tag-based organization
- Featured posts highlighting
- Modern, responsive design
- Dark/light theme toggle
- Smooth animations and transitions
- Accessible components with Radix UI
- Mobile-optimized interface
The project uses a custom Tailwind configuration with:
- Custom color schemes
- Animation utilities
- Typography settings
- Responsive breakpoints
Strict TypeScript configuration for:
- Type safety
- Better developer experience
- Improved code quality
> npm install -g vercel
> vercel> npm run build
> npm run startRequired environment variables:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY- Clerk public keyCLERK_SECRET_KEY- Clerk secret key
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is licensed under the MIT License.
For support and questions:
- Create an issue in the repository
- Contact the development team
- Check the documentation