My Role: Full Stack Developer — Designed, developed, and deployed the entire platform end-to-end as the sole developer.
Overview
CodeBreakers Blog is a full-stack blogging platform built for the CodeBreakers college coding community — a space where developers learn, write, and share technical knowledge with each other. Built to replace scattered social media posts and informal notes with a single, purpose-built platform that handles publishing, discovery, and engagement.
On the reader side, users can browse the latest blogs on the homepage feed, search by keywords, explore posts by tags, and engage with content through likes and comments. Every blog page features an auto-generated table of contents, syntax-highlighted code blocks, embedded images and videos, and a clean dark-mode reading experience optimized for technical content.
Authors get a powerful floating-toolbar rich text editor powered by TipTap v3, supporting text formatting, image uploads to AWS S3, code blocks with syntax highlighting, tables, and video embeds. Authentication is handled through Better Auth, real-time interactions via Socket.io, rate limiting and bot protection via Arcjet, and the entire platform is deployed on Vercel with Prisma ORM managing the database.
Key Highlights
Built a floating-toolbar rich text editor supporting code, images, tables, and video
Implemented auto-generated table of contents for every blog post
Real-time likes and comments powered by Socket.io
Cloud image storage with AWS S3 and presigned URL upload flow
Tag-based blog discovery with full-text search across the feed
Public author profile pages with follower/following system
SEO-ready with auto-generated slugs, sitemap.xml, and robots.txt
Secured with Arcjet rate limiting and bot protection
Features
- Searchable homepage blog feed
- Tag-based filtering and discovery
- Auto-generated table of contents
- Syntax-highlighted code blocks with copy button
- Like and comment system
- Text-to-speech blog reader
- Floating toolbar rich text editor (TipTap v3)
- Image, video, table, and code block embeds
- Auto-generated slug from title
- Thumbnail image uploader
- Blog preview before publishing
- Edit and delete own blogs
- Public author profile pages
- Follow / unfollow other authors
- Followers and following count
- Personal blog management dashboard
- Better Auth with session management
- OAuth and OTP sign-in support
- Server-side protected routes
- Arcjet rate limiting and bot protection
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, RSC) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 + Radix UI |
| Database | Prisma ORM |
| Authentication | Better Auth |
| Rich Text Editor | TipTap v3 |
| Real-time | Socket.io |
| File Storage | AWS S3 |
| Forms | React Hook Form + Zod |
| Animations | Framer Motion + GSAP |
| Charts | Recharts |
| Security | Arcjet (rate limiting & bot protection) |
| Nodemailer | |
| Deployment | Vercel |
Project Structure
Screenshots
