Typewriter - A typewriter-themed blog platform
A modern, typewriter-themed, type-safe blogging platform built with Nextjs with end-to-end type safety using tRPC, efficient state management using Zustand and clean, responsive user interface.
Project Demo
Key Features
Content Management
- Full CRUD Operations for blog posts and categories
- Draft System with offline-first persistence using localStorage
- Many-to-Many Relationships between posts and categories
- Category Filtering with sidebar navigation
- Post Statistics including word count and reading time estimation
User Experience
- Dark/Light Mode with persistent theme preferences
- Fully Responsive Design optimized for all devices
- Smooth Animations and transitions throughout the application
- Loading & Error States with toast notifications
- Mobile-Optimized Navigation with touch-friendly interactions
Architecture
- End-to-End Type Safety with tRPC and TypeScript
- Optimistic UI Updates for instant user feedback
- Server-Side Rendering with Next.js App Router
- Type-Safe Database Queries using Drizzle ORM
- Form Validation with Zod schemas and TanStack Form
Pages & Routes
- Landing Page with hero section and feature showcase
- Posts Listing with grid layout and category badges
- Individual Post View with full content display
- Create/Edit Posts with text editing
- Category Management for organizing content
Tech Stack
Core Technologies
- Next.js 15 (App Router) - React framework with server-side rendering
- TypeScript - Type-safe development
- PostgreSQL - Relational database (Neon hosted)
- Drizzle ORM - Type-safe database ORM
- tRPC - End-to-end type-safe API layer
- Zod - Schema validation
State Management & Data Fetching
- TanStack Query (React Query) - Server state management (integrated via tRPC)
- TanStack Form - Type-safe form state management with validation
- Zustand - Global client state for drafts
UI & Styling
- Tailwind CSS - Utility-first CSS framework
- Radix UI - Accessible component primitives
- Lucide Icons - Icon library
- Sonner - Toast notifications