A full-stack blog application built with Next.js 15, MongoDB, and Tailwind CSS. Users can read blogs, subscribe via email, and admins can manage blog posts through a dedicated admin panel.
🔗 Live Demo: blog-app-llly.vercel.app
- Home Page — Browse all blog posts with category filtering
- Blog Detail Page — Read full blog content with author info and social share buttons
- Email Subscription — Users can subscribe with their email
- Admin Panel — Add, view, and delete blog posts and manage subscriptions
- Responsive Design — Works on mobile and desktop
| Technology | Usage |
|---|---|
| Next.js 15 | Full-stack React framework |
| MongoDB Atlas | Database for blogs and emails |
| Tailwind CSS | Styling |
| Axios | API requests |
| React Toastify | Toast notifications |
| Vercel | Deployment |
blog-app/
├── app/
│ ├── admin/
│ │ ├── addProduct/ # Add new blog page
│ │ ├── blogList/ # Manage blogs page
│ │ ├── subscriptions/ # Manage subscriptions page
│ │ └── layout.jsx # Admin layout with sidebar
│ ├── blogs/
│ │ └── [id]/ # Dynamic blog detail page
│ └── api/
│ ├── blog/ # Blog CRUD API routes
│ └── email/ # Email subscription API routes
├── components/
│ ├── AdminComponents/ # Sidebar, BlogTableItem, SubsTableItem
│ ├── Header.jsx
│ ├── Footer.jsx
│ └── Blogitem.jsx
├── assets/ # Images and icons
└── lib/ # MongoDB connection
- Node.js 18+
- MongoDB Atlas account
- Clone the repository
git clone https://github.com/Krishtiy/blog-app.git
cd blog-app- Install dependencies
npm install- Create a
.env.localfile in the root directory
MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/blog-app?appName=Cluster0- Run the development server
npm run dev- Open http://localhost:3000 in your browser
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/blog |
Get all blogs |
| GET | /api/blog?id= |
Get single blog |
| POST | /api/blog |
Create new blog |
| DELETE | /api/blog?id= |
Delete a blog |
| GET | /api/email |
Get all subscriptions |
| POST | /api/email |
Add email subscription |
| DELETE | /api/email?id= |
Delete subscription |
This app is deployed on Vercel. Every push to the main branch triggers an automatic redeployment.
Krishtiy — GitHub