The Daily Post: A Modern Full-Stack Blog Platform

Overview

The Daily Post is a modern, full-stack blog platform built with React 19, Vite, Node.js, and MongoDB. It enables users to create, share, and discover engaging blog posts with a beautiful UI, robust backend, and advanced features like rich text editing, image uploads, and infinite scrolling.

The platform combines a fast Vite-powered frontend with an Express.js backend secured by JWT authentication, providing a seamless experience for both readers and content creators.

What Users Can Do

Authentication & Security

• User Registration & Login: Secure signup/login with JWT authentication
• Password Security: Passwords hashed using bcrypt
• Protected Routes: Middleware ensures only authorized access
• Input Validation: Zod schemas for robust backend validation

Blog Management

• Rich Blog Editor: Create posts with rich text using React Quill
• Image Uploads: Upload images with Uploadthing integration
• Infinite Scrolling: Browse blogs with seamless infinite loading
• Blog CRUD: Create, read, update, and delete posts
• Author Profiles: Display author info and avatars
• Date Tracking: Automatic timestamps for posts

UI & User Experience

• Modern UI: Built with React 19, Tailwind CSS, Radix UI, Lucide icons
• Responsive Design: Mobile-friendly layouts
• Animations: Framer Motion for smooth transitions
• Toasts & Notifications: React Hot Toast for instant feedback
• SPA Navigation: React Router DOM for seamless page transitions

Why I Built This

I created The Daily Post to provide a complete blogging solution:

• Writers need a simple yet powerful platform to share their stories
• Existing platforms lack modern features like infinite scroll and fast performance
• Wanted to build a full-stack application with proper authentication
• Demonstrate skills in both frontend and backend development
• Create a platform with excellent developer experience using Vite

Tech Stack

Backend

• Node.js - JavaScript runtime for scalable server-side logic
• Express.js - Fast, minimalist web framework
• MongoDB & Mongoose - NoSQL database and ODM for schema modeling
• JWT - Secure authentication tokens
• bcrypt - Password hashing
• Zod - Type-safe schema validation
• CORS - Cross-origin resource sharing

Frontend

• React 19 - Latest UI library for building interactive interfaces
• Vite - Next-gen build tool for fast development
• React Router DOM - SPA routing
• TanStack Query - Advanced data fetching, caching, and state management
• Axios - HTTP client for API requests
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Accessible UI primitives
• Lucide Icons - Beautiful icon set
• Framer Motion - Animation library
• React Hot Toast - Toast notifications
• React Quill & Quill - Rich text editor

API Endpoints

Authentication Routes

• POST /api/user/auth/register - User registration
• POST /api/user/auth/login - User login

Blog Routes

• POST /api/blogs/createblogs - Create a new blog post (Protected)
• GET /api/blogs - Get all blog posts
• GET /api/blogs/:id - Get specific blog post
• PUT /api/blogs/:id - Update blog post (Protected)
• DELETE /api/blogs/:id - Delete blog post (Protected)

Image Upload Routes

• POST /api/upload/image - Upload blog images (Protected)

Database Schema

User Model

{
  username: String (unique, required),
  email: String (required),
  password_hash: String (required),
  firstName: String (required),
  lastName: String (required),
  createdAt: Date
}

Blog Model

{
  title: String (required),
  content: String (required),
  author: ObjectId (ref: User),
  date: Date,
  image: String,
  createdAt: Date,
  updatedAt: Date
}

Project Structure

The-Daily-Post/
├── backend/
│   ├── config.js              # Configuration settings
│   ├── index.js               # Express server entry point
│   ├── middlewares/auth.js    # Authentication middleware
│   ├── models/db.js           # Database models (User, Blog)
│   ├── routes/
│   │   ├── user.js            # User authentication routes
│   │   ├── blogs.js           # Blog CRUD operations
│   │   └── uploadthingRoutes.js
│   └── uploadthing.js         # Uploadthing integration
├── frontend/
│   ├── src/
│   │   ├── App.jsx            # Main React component
│   │   ├── components/        # Reusable UI components
│   │   ├── pages/             # Application pages
│   │   ├── hooks/             # Custom React hooks
│   │   └── lib/               # Utility functions
│   └── vite.config.js         # Vite configuration
└── README.md

Key Features

Rich Text Editor

• React Quill integration for full formatting capabilities
• Support for headings, lists, bold, italic, links, and more
• Clean HTML output stored in MongoDB

Image Upload System

• Uploadthing integration for reliable image hosting
• Protected upload routes requiring authentication
• Automatic image optimization

Infinite Scrolling

• TanStack Query powered infinite loading
• Lodash throttle for optimized scroll handling
• Seamless user experience without pagination buttons

Authentication Flow

1. User registers with email and password
2. Password is hashed using bcrypt before storage
3. JWT token issued upon successful login
4. Token validated via middleware on protected routes
5. Secure logout with token invalidation

Performance Optimizations

• Vite Build Tool: Lightning-fast development server and optimized production builds
• TanStack Query Caching: Intelligent data caching reduces API calls
• Throttled Requests: Lodash throttle prevents excessive API requests during scroll
• Code Splitting: React Router enables route-based code splitting

Future Enhancements

• [ ] Blog categories and tags
• [ ] Advanced search and filter functionality
• [ ] User profiles with avatars
• [ ] Comments system
• [ ] Social media sharing
• [ ] Email notifications
• [ ] Blog analytics dashboard
• [ ] SEO optimization
• [ ] Author follow system
• [ ] Reading time estimates