Blog Platform

A modern, full-featured blog platform built with Next.js, featuring authentication, blog post management, and a clean, responsive UI.

Project Description

This is a blog platform where users can authenticate, view blog posts, and manage their own content. The application demonstrates best practices in Next.js development, including proper authentication flow, form handling with validation, and clean architecture patterns.

Tech Stack

• Next.js (Page Router) - React framework for production
• NextAuth - Authentication for Next.js applications
• react-hook-form - Performant, flexible forms with easy validation
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• ESLint & Prettier - Code quality and formatting

Features

Authentication

• Secure authentication using NextAuth with credentials provider
• Session management on both client and server side
• Protected routes for authenticated users only

Blog Features

• Public Access (Guest & Authenticated Users)

  • View all blog posts in a clean, organized list
  • Read individual blog post details

• Authenticated Users Only

  • Create new blog posts with title and content
  • Delete only their own blog posts
  • Author information automatically attached to posts

Project Structure

src/
├── components/
│   ├── auth/          # Authentication components
│   ├── blog/          # Blog-related components
│   ├── common/        # Reusable UI components
│   └── layout/        # Layout components (Navbar, Layout)
├── data/
│   └── mockData.ts    # In-memory data store
├── lib/               # Utility functions and configurations
├── pages/
│   ├── api/
│   │   ├── auth/      # NextAuth configuration
│   │   └── posts/     # Blog post API routes
│   ├── blog/
│   │   ├── [id].tsx   # Blog post detail page
│   │   ├── create.tsx # Create blog post page
│   │   └── index.tsx  # Blog listing page
│   ├── login.tsx      # Login page
│   └── index.tsx      # Home page (redirects to /blog)
├── types/             # TypeScript type definitions
└── styles/            # Global styles

How to Run Locally

1. Clone the repository

   git clone <repository-url>
   cd blog-platform

2. Install dependencies

   npm install

3. Set up environment variables

   The .env.local file is already configured with development defaults:

   NEXTAUTH_URL=http://localhost:3000
   NEXTAUTH_SECRET=super-secret-key-change-in-production

4. Run the development server

   npm run dev

5. Open your browser

   Navigate to http://localhost:3000

6. Login with demo accounts

   Use any of these email addresses (any password will work):

   • john@example.com
   • jane@example.com
   • bob@example.com

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint errors
• npm run format - Format code with Prettier

Architectural Decisions

Authentication Strategy

• NextAuth with Credentials Provider: Chosen for simplicity and demonstration purposes. In production, OAuth providers (Google, GitHub) would be recommended.
• JWT Sessions: Used for stateless authentication, improving scalability.

Data Management

• In-Memory Mock Data: Used for demonstration purposes without requiring database setup. In production, this would be replaced with a proper database (PostgreSQL, MongoDB, etc.).
• Server-Side Rendering (SSR): Used for blog listings and details to improve SEO and initial load performance.

Form Handling

• react-hook-form: Chosen for its excellent performance, small bundle size, and built-in validation capabilities.

Styling

• Tailwind CSS: Provides rapid UI development with utility classes while maintaining consistency and responsive design.

Code Quality

• TypeScript: Ensures type safety and better developer experience.
• ESLint + Prettier: Enforces consistent code style and catches potential issues early.

Project Organization

• Feature-Based Structure: Components are organized by feature (auth, blog, layout) for better maintainability.
• Separation of Concerns: Clear separation between UI components, API routes, data layer, and type definitions.

API Routes

Authentication

• POST /api/auth/signin - Sign in with credentials
• POST /api/auth/signout - Sign out

Blog Posts

• GET /api/posts - Get all blog posts
• POST /api/posts - Create new blog post (requires authentication)
• GET /api/posts/[id] - Get single blog post
• DELETE /api/posts/[id] - Delete blog post (requires authentication, author only)

Known Limitations

1. In-Memory Data Storage: Data is stored in memory and will be reset on server restart. In production, a database should be used.

2. Simple Authentication: Uses a basic credentials provider without password hashing. Production apps should use secure password storage and OAuth providers.

3. No Image Support: Blog posts currently only support text content. Image upload functionality would enhance the platform.

4. No Pagination: All posts are loaded at once. For production with many posts, pagination should be implemented.

5. Limited Validation: While form validation is present, additional server-side validation and sanitization should be added for production use.

6. No Rich Text Editor: Content is plain text only. A rich text editor (e.g., TipTap, Quill) would improve user experience.

Future Enhancements

• Implement proper database (PostgreSQL, MongoDB)
• Add rich text editor for blog content
• Implement pagination and search functionality
• Add image upload for blog posts
• Implement post categories and tags
• Add comment system
• Implement user profiles and avatars
• Add post editing functionality
• Implement draft/publish workflow
• Add unit and integration tests

License

MIT