News Publisher Application

A full-stack news publishing platform built with NextJS + Express APIs. An application demonstrates professional development practices with comprehensive authentication, role-based access control, and scalable architecture.

Technical Stack

Frontend - Next.js 15 with Advanced Rendering

• Next.js with App Router architecture
• Server-Side Rendering (SSR) for optimal SEO and performance
• Hybrid rendering strategy combining static generation with dynamic server components
• Cloudinary integration for optimized image delivery and transformations

Backend - Express.js API with Robust Architecture

• Express.js 5 RESTful API with modern middleware patterns
• Prisma ORM with PostgreSQL database
• Passport.js authentication with Google OAuth2 and local strategies
• bcrypt for secure password hashing
• Zod for runtime schema validation
• Multer for file upload handling
• Express-session for secure session management

Key Features

• Multi-tier Authentication System with Google OAuth and local strategies
• Role-Based Access Control (Admin, Writer, Reader) with granular permissions
• Infinite Scrolling with optimized data fetching and caching
• Real-time Comments System with user authentication
• Advanced Image Management via Cloudinary with automatic optimization
• Comprehensive Testing Suite using Jest with 80%+ coverage
• Input Validation on both client and server sides
• Session Management with secure cookie handling
• Responsive Design with mobile-first approach

Project Architecture

news-publisher-application/
├── backend/                     # Express.js API Server
│   ├── src/
│   │   ├── auth/               # Authentication strategies
│   │   ├── config/             # External service configurations
│   │   ├── errors/             # Custom error handling
│   │   ├── middleware/         # Request processing middleware
│   │   ├── prisma/             # Database schema and configuration
│   │   ├── routers/            # API route definitions
│   │   ├── services/           # Business logic layer
│   │   ├── utils/              # Utility functions and validation
│   │   ├── validations/        # Input validation schemas
│   │   └── seed/               # Database seeding utilities
│   └── tests/                  # Comprehensive test suite
│
├── front/                      # Next.js Frontend Application
│   ├── src/
│   │   ├── app/                # App Router pages and layouts
│   │   │   ├── (auth)/         # Authentication routes
│   │   │   ├── createpost/     # Content creation interface
│   │   │   ├── post/           # Individual post display
│   │   │   ├── user/           # User profile management
│   │   │   └── approvepost/    # Admin content moderation
│   │   ├── components/         # Reusable UI components
│   │   │   ├── header/         # Navigation and branding
│   │   │   ├── footer/         # Site footer with links
│   │   │   └── scroll/         # Infinite scroll implementation
│   │   ├── lib/                # Client-side utilities
│   │   └── types/              # TypeScript type definitions
│   └── public/                 # Static assets and images
│
└── screenshots/                # Application interface documentation

Environment Configuration

Backend Environment (.env)

Create a .env file in the /backend directory:

# Server Configuration
PORT=5000
NODE_ENV=development
FRONTEND_URL=http://localhost:3000

# Database Connection
DATABASE_URL="postgresql://username:password@localhost:5432/news_publisher_db"

# Session Security
SESSION_SECRET=your_super_secure_session_secret_key_here

# Google OAuth Configuration
GOOGLE_CLIENT_ID=your_google_client_id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_CALLBACK_URL=http://localhost:5000/api/auth/google/callback

# Cloudinary Configuration
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

Frontend Environment (.env.local)

Create a .env.local file in the /front directory:

# Backend API URL
NEXT_PUBLIC_BACKEND_URL=http://localhost:5000

# Cloudinary Configuration
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name

Test Environment (.env.test)

Create a .env.test file in the /backend directory for testing:

PORT=5001
NODE_ENV=test
FRONTEND_URL=http://localhost:3000
DATABASE_URL="postgresql://username:password@localhost:5432/news_publisher_test_db"
SESSION_SECRET=test_session_secret
GOOGLE_CLIENT_ID=test_client_id
GOOGLE_CLIENT_SECRET=test_client_secret
GOOGLE_CALLBACK_URL=http://localhost:5001/api/auth/google/callback
CLOUDINARY_CLOUD_NAME=test_cloud_name
CLOUDINARY_API_KEY=test_api_key
CLOUDINARY_API_SECRET=test_api_secret

Installation and Setup

Backend Setup

cd backend
npm install
npm run prisma:generate
npm run prisma:migrate

Frontend Setup

cd front
npm install

Development Server

# Terminal 1 - Backend
cd backend
npm run dev

# Terminal 2 - Frontend
cd front
npm run dev

Database Mockup Setup

Mock User Database

The application includes a comprehensive mock data system. To populate your database with sample content:

cd backend/src/mockups
ts-node database_posts_mockup.ts

Sample Mock Data Structure

The mock system creates users and posts with realistic data. Here's an example post structure:

{
  "title": "Advanced TypeScript Patterns in Modern Web Development",
  "subtitle": "Exploring conditional types and template literals for better code",
  "titleImage": "typescript_patterns_img_01", # This should be you image id in Cloudinary
  "authorId": 2,
  "date": "2025-01-15T10:30:00Z",
  "updatedDate": null,
  "content": "Any content that you want to have here",
  "category": "Technology",
  "commentsEnabled": true,
  "lastUpdate": null,
  "approved": true
}

Mock User Roles

The system creates users with different permission levels:

• Admin (ID: 1): Full system access, user management, post approval
• Writers (IDs: 2-5): Content creation and editing capabilities
• Readers: Comment and interaction permissions

Database Reset and Migration

# Complete database reset
npx prisma migrate reset --schema=./src/prisma/schema.prisma

# Apply latest migrations
npx prisma migrate dev --schema=./src/prisma/schema.prisma

# Generate Prisma client
npm run prisma:generate

Testing

Backend Testing

cd backend
npm test

Application Screenshots

The following screenshots demonstrate key features and user interfaces:

Main Application Interface

Main Page - Homepage with featured articles and infinite scroll

Post Creation - Rich text editor with image upload capabilities

Post Approval - Admin interface for content moderation

Comment Functionality - Real-time commenting system with authentication

User Management - Admin panel for user role management

User Profile - Individual user pages with post history

Production Deployment

Build Process

# Backend
cd backend
npm run build
npm start

# Frontend
cd front
npm run build
npm start