InkSphere

InkSphere is a modern, high-performance blogging platform built on the MERN stack. It features real-time interactions, a robust authentication system, an intuitive admin dashboard, and advanced security configurations.

Key Features

• Robust Authentication: Secure email/password login, OTP verification, and password recovery.
• Real-Time Capabilities: Live notifications and active user updates powered by Socket.IO.
• Advanced Security: Implemented rate limiting, data sanitization (NoSQL injection prevention), XSS filtering, and HTTP header protection via Helmet.
• Content Management: Comprehensive CRUD operations for blog posts, rich text integration, and media handling.
• Admin Dashboard: Centralized management for users, blogs, and platform queries.
• Responsive UI: A beautiful, fully responsive frontend engineered with React, Vite, and Tailwind CSS.
• Optimized Performance: Manual chunking in Vite for faster load times and an optimized API structure.

---

Architecture & Tech Stack

Frontend (/client)

• Framework: React.js (Bootstrapped with Vite)
• Styling: Tailwind CSS
• State Management: Redux Toolkit
• Networking: Axios, Socket.IO Client
• Icons & Graphics: Lucide React, React Icons

Backend (/server)

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB (with Mongoose ODM)
• Real-Time Comm: Socket.IO
• Security: Helmet, Express-Mongo-Sanitize, XSS, HPP, Express-Rate-Limit

---

Getting Started

Follow these steps to set up the project locally.

Prerequisites

• Node.js (v16+ recommended)
• MongoDB (Local or Atlas URL)

1. Clone the Repository

git clone <your-repository-url>
cd inksphere

2. Backend Setup

cd server
npm install

Create a .env file in the server directory and add the following template (do not use real values here):

PORT=<YOUR_PORT>
MONGO_URL=<YOUR_MONGODB_CONNECTION_STRING>
JWT_SECRET=<YOUR_JWT_SECRET>
CLIENT_URL=<YOUR_FRONTEND_URL>

Start the backend server:

npm run dev

3. Frontend Setup

Open a new terminal window:

cd client
npm install

Create a .env file in the client directory and add the required variables:

VITE_API_URL=<YOUR_BACKEND_API_URL>

Start the frontend development server:

npm run dev

---

Deployment (Vercel)

The project is fully configured for deployment on Vercel.

1. Backend Deployment:

   • Create a new Vercel project and select the server directory.
   • Configure the environment variables in the Vercel dashboard.
   • Deploy.

2. Frontend Deployment:

   • Create a new Vercel project and select the client directory.
   • Add the VITE_API_URL environment variable pointing to your deployed backend URL.
   • Deploy.

---

Folder Structure

inkSphere/
├── client/                 # Frontend React Application
│   ├── src/                # React Source Code
│   ├── public/             # Static Assets
│   ├── .env.production     # Production Environment Variables
│   ├── vite.config.js      # Vite Configuration
│   └── package.json        
└── server/                 # Backend Node/Express Application
    ├── config/             # Database & Environment Configs
    ├── controllers/        # Route Handlers / Business Logic
    ├── middleware/         # Custom Express Middlewares
    ├── models/             # Mongoose Schemas
    ├── routes/             # API Endpoints
    ├── app.js              # Express App Configuration
    ├── server.js           # Server Entry Point & Socket.IO Setup
    ├── vercel.json         # Vercel Deployment Configuration
    └── package.json        

---

Developed by Mr.Taha.