🚀 NextBlog

A Modern, Full-Stack Blogging Platform

NextBlog is a modern, high-performance, full-stack blogging platform built with the Next.js 13 framework. Designed with flexibility and scalability in mind, the platform provides a complete ecosystem for digital content creation. It comes equipped with a highly interactive rich text editor for crafting engaging posts, secure and frictionless authentication for user management, and a robust, type-safe database architecture that ensures data is handled efficiently.

Whether you're looking to share your thoughts with the world, build a community, or showcase your technical portfolio, NextBlog offers a polished, production-ready foundation right out of the box.

---

📋 Table of Contents

• ✨ Features
• 🛠️ Tech Stack
• 🚀 Getting Started
  • Prerequisites
  • Installation
  • Environment Variables
• 📁 Project Structure
• 📜 Scripts
• 🤝 Contributing
• 📄 License

---

✨ Features

• ⚡ Next.js 13 App Router: Leverages the latest Next.js features for optimal performance and SEO.
• 🔐 Secure Authentication: Seamless user login and session management powered by NextAuth.js.
• ✍️ Rich Text Editing: Integrated react-quill for an intuitive content creation experience, sanitized with dompurify to prevent XSS attacks.
• 🗄️ Database ORM: Uses Prisma ORM for type-safe database queries and seamless schema migrations.
• 🔄 Client-Side Data Fetching: Utilizes SWR for fast, reactive data fetching and caching.
• ☁️ Cloud Storage: Firebase integration for scalable image and asset handling.

🛠️ Tech Stack

Category	Technology
Framework	Next.js (v13)
UI Library	React (v18)
Database ORM	Prisma
Authentication	NextAuth.js
Rich Text Editor	React Quill
Data Fetching	SWR
Storage	Firebase

🚀 Getting Started

Follow these steps to set up the project locally on your machine.

Prerequisites

Ensure you have the following installed:

• Node.js: v16.8 or higher
• Package Manager: npm, yarn, or pnpm
• Database: A relational database (PostgreSQL, MySQL, etc.) for Prisma.
• Firebase: A Firebase project for handling file uploads/storage.

Installation

1. Clone the repository:

   git clone https://github.com/nazifatasneem13/NextBlog.git
   cd NextBlog

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up the database: Push the Prisma schema to your database to create the required tables:

   npx prisma db push
   # or for migrations: npx prisma migrate dev

4. Run the development server:

   npm run dev
   # or
   yarn dev

   Open http://localhost:3000 with your browser to see the application running.

Environment Variables

Create a .env file in the root directory and configure the following variables:

Variable	Description
DATABASE_URL	Your database connection string (e.g., PostgreSQL or MySQL URL).
NEXTAUTH_SECRET	A random string used to hash tokens, sign/encrypt cookies and generate cryptographic keys.
NEXTAUTH_URL	The canonical URL of your site (e.g., http://localhost:3000).
FIREBASE_API_KEY	(Example) Add your specific Firebase config keys here.
FIREBASE_PROJECT_ID	(Example) Add your specific Firebase config keys here.

(Note: Adjust the Firebase variables according to your actual configuration in the app).

📁 Project Structure

NextBlog/
├── .next/                  # Next.js build output
├── prisma/                 # Prisma schema and migrations
│   └── schema.prisma       # Database schema definition
├── public/                 # Static assets (images, fonts, etc.)
├── src/                    # Source code (if using src directory)
│   ├── app/                # App Router (Pages, Layouts, API routes)
│   ├── components/         # Reusable React components
│   └── lib/                # Utility functions and configurations
├── .env                    # Environment variables
├── next.config.js          # Next.js configuration
├── package.json            # Project dependencies and scripts
└── README.md               # Project documentation

📜 Scripts

Here are the available npm scripts for this project:

• npm run dev - Starts the development server.
• npm run build - Builds the application for production deployment.
• npm run start - Starts the production server (after building).
• npm run lint - Runs ESLint to check for code quality and formatting issues.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page if you want to contribute.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License.