Portfolio

Loading experience...

Portfolio

Blog Platform

A monorepo full-stack blog application inspired by Medium, built using Hono (Cloudflare Workers), React, and Zod.

Aug 2025
3 Repository

Technology Stack

React 18
Vite
Tailwind CSS
Hono
Prisma ORM
PostgreSQL
Zod
Axios
Cloudflare Workers
Bcrypt
Vercel

Key Features

Full-stack blog content creation and management
Secure authentication with Bcrypt password hashing
Shared Zod validation schemas across frontend and backend
Serverless backend deployment on Cloudflare Workers
Frontend optimized with React 18 and Vite
Responsive mobile-first design with Tailwind CSS
Full CRUD operations for blog posts
Axios-based API communication
CI/CD ready deployment pipelines
Monorepo structure for maintainable modular code

Tags

React 18
Vite
Tailwind CSS
Hono
Prisma
PostgreSQL
Zod
Axios
Cloudflare Workers
Bcrypt
Vercel

Project Details

A full-stack blog platform providing secure authentication, scalable content management, and a modern web experience using serverless architecture, React frontend, and shared validation logic.

System Architecture:

Full-Stack Monorepo (3 Packages)

  • Backend: Hono framework running on Cloudflare Workers with Prisma ORM and PostgreSQL
  • Frontend: React 18 + Vite with React Router for SPA navigation
  • Shared Logic: Zod schemas for centralized form and API validation
  • Authentication: Secure registration and login with Bcrypt password hashing
  • API Communication: Axios-based requests between frontend and backend

Blogging Flow:

User Journey

  1. User Registration & Login: Secure sign-up and authentication using hashed passwords
  2. Browse Posts: Explore blog posts with smooth navigation
  3. Create/Edit Posts: Authenticated users can publish or update posts
  4. Validation: All form inputs validated using shared Zod schemas
  5. API Requests: Axios ensures seamless communication between frontend and backend
  6. Deployment: Backend deployed on Cloudflare Workers, frontend hosted on Vercel

Advanced Features:

Content & Validation

  • Full CRUD Operations: Create, read, update, and delete blog posts
  • Zod-based Validation: Centralized validation logic ensures consistent rules across frontend and backend
  • Type-Safe Database: Prisma ORM provides safe and structured database interactions

Security & Authentication

  • Bcrypt Password Hashing: Ensures secure storage of user credentials
  • Session Management: Maintains secure user sessions across the platform

Performance & Scalability

  • Serverless Backend: Cloudflare Workers provide fast, scalable API endpoints
  • Optimized Frontend: Vite + React 18 delivers high-performance SPA experience
  • CI/CD Friendly: Easy deployment pipelines for both frontend and backend

Technical Implementation:

Frontend

  • React 18 + Vite: Component-driven architecture for maintainable code
  • Tailwind CSS: Responsive, mobile-first UI design
  • React Router: Efficient page routing
  • Axios: Handles API requests reliably

Backend

  • Hono Framework: Lightweight, serverless API framework
  • Prisma ORM: Type-safe database queries and migrations
  • PostgreSQL: Structured relational database
  • Bcrypt: Password hashing for secure authentication

Administrative Features:

  • Post Management: Admins can manage all blog posts
  • User Management: Securely handle registered users
  • Analytics (Optional): Track user activity and post engagement

Advanced System Features:

User Experience

  • Responsive Design: Mobile-first layouts
  • Secure Authentication: Password hashing and session protection
  • Validated Forms: Shared Zod schemas across frontend and backend

Deployment & Scaling

  • Serverless API: Scalable Cloudflare Workers backend
  • Frontend Hosting: Vercel for production-ready deployment
  • CI/CD Ready: Optimized for reliable releases

Business Impact:

Blog Website provides a modern, secure, and scalable platform for content creators. Users gain seamless browsing, posting, and account management, while the platform ensures secure authentication, validated content, and high-performance serverless deployment.

This project demonstrates expertise in full-stack development, serverless architecture, secure authentication, modern frontend frameworks, and monorepo organization.