https://github.com/nima-moradi1/blog-app
a full blog app with admin panel and user panel. create posts , make comments, answer to comments,
https://github.com/nima-moradi1/blog-app
context-api expressjs nextjs15-typescript react-query tailwindcss
Last synced: 4 months ago
JSON representation
a full blog app with admin panel and user panel. create posts , make comments, answer to comments,
- Host: GitHub
- URL: https://github.com/nima-moradi1/blog-app
- Owner: Nima-Moradi1
- Created: 2025-02-22T09:40:34.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2025-02-22T10:09:58.000Z (4 months ago)
- Last Synced: 2025-02-22T10:28:06.484Z (4 months ago)
- Topics: context-api, expressjs, nextjs15-typescript, react-query, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ๐ Next.js-V.15 Full-Stack Blog-Application
## ๐ Project Overview
This project is a **Full-Stack Blog application** built with **Next.js**, **TypeScript**, and a **MongoDB, Node.js, Express backend**. It features a **fully responsive UI**, an **admin panel**, **Secure authentication**, **RESTful API implementation**, **server-side rendering (SSR)**, and advanced functionalities like **pagination, sorting, filtering, and nested routes**.
---
## ๐ Tech Stack
### **Frontend (Next.js & React)**
- **Next.js** โ Server-side rendering (SSR), routing, API routes
- **TypeScript** โ Type safety, improved maintainability
- **Tailwind CSS** โ Utility-first styling, responsive design
- **React Query** โ State management, API data fetching and caching
- **Axios** โ HTTP requests to backend
- **Middleware Handler** โ Custom middleware for authentication, logging, and request validation
### **Authentication & Authorization**
- **OTP-based login & signup** โ Secure authentication using Username-Password
- **JWT-based authorization** โ Role-based access for users and admins
- **Middleware for protected routes** โ Ensures only authorized users can access restricted content
### **Advanced UI Features**
- **Nested Routes** โ Clean and modular routing
- **Pagination** โ Optimized data loading with page navigation
- **Sorting & Filtering** โ Efficient data manipulation for a better user experience
- **Fully Responsive Design** โ Works seamlessly on all devices
### **Admin Panel**
- **Dashboard for site owners** โ Manage users, content, and site settings
- **Admin Role Authorization** โ Only admins can access and modify specific data > delete comments, delete posts, update them and ...
- **Create Posts** โ You can create as many posts as you want!
- **Comments** โ You can give feedback through comments, or even หฎanswerหฎ the users' comments >> dynamically updating the ui while fetching API without refreshing the page or more requests!
### **Backend (Node.js, Express & MongoDB)**
- **Node.js & Express.js** โ REST API implementation, request handling
- **MongoDB** โ NoSQL database for scalable data storage
- **Mongoose** โ ODM for MongoDB schema and model management
- **REST API Implementation** โ Full CRUD operations with authentication
---
## ๐ Installation & Setup
### **1๏ธโฃ Clone the Repository**
```sh
git clone https://github.com/Nima-Moradi1/blog-app.git
cd blog-app
```
### **2๏ธโฃ Install Dependencies**
```sh
npm install
```
### **3๏ธโฃ Set Up Environment Variables**
Create a `.env` file in the root directory and configure your environment variables:
```sh
>>Frontend :
NEXT_PUBLIC_API_URL=http://localhost:5001
>>Backend :
APP_DB=####
ACCESS_TOKEN_SECRET_KEY=####
REFRESH_TOKEN_SECRET_KEY=####
COOKIE_PARSER_SECRET_KEY=####
TOKEN_SECRET_KEY=####
CLIENT_URL=http://localhost:3000
SERVER_URL=http://localhost:5001
NODE_ENV=development
PORT=5001
ALLOW_CORS_ORIGIN=http://localhost:3000
DOMAIN=localhost
```
### **4๏ธโฃ Run the Development Server**
Frontend (Next.js):
```sh
npm run dev
```
Backend (Express.js):
```sh
cd backend
npm start
```
### **5๏ธโฃ Build for Production**
```sh
npm run build && npm start
```
---
## ๐ฅ Features
โ
Full **Next.js** & **TypeScript** support
โ
**Fully responsive** design with TailwindCSS
โ
**React Query** for data fetching & caching
โ
**React Context** for storing user data (State manager)
โ
**JWT-based (httpOnly Cookies) authentication**
โ
**Nested routes**, **pagination**, **sorting & filtering**
โ
**Admin panel** for website admin
โ
**RESTful API** with Express & MongoDB
โ
**Middleware handlers** for security & access control
โ
**Server-Side Rendering (SSR)** for better performance
โ
**Full authorization & role-based access**
โ
**Full CRUD operations** on the backend
---
## ๐ API Endpoints (Examples)
๐Provided in a JSON file for you in the repository๐
---
## ๐ค Contribution Guidelines
Feel free to contribute! ๐
1. Fork the repo
2. Create a new branch (`feature/your-feature`)
3. Commit your changes (`git commit -m 'Added new feature'`)
4. Push to your branch (`git push origin feature/your-feature`)
5. Create a pull request
---
## ๐ฌ Contact
For any questions or collaborations, reach out at:
๐ง **[email protected]**
GitHub: [Nima-Moradi1](https://github.com/Nima-Moradi1)
---
### ๐ Happy Coding! ๐