DevBuzz

Where Developers Build, Share, and Grow.

Tech Stack

• Frontend: Next.js App Router (15), React 19, TypeScript, TailwindCSS
• Backend: Next.js API Routes, Prisma ORM, PostgreSQL (via Neon)
• Authentication: Custom OTP login, session cookies, bcrypt
• UI & Styling: TailwindCSS, ShadCN UI, Lucide Icons, Radix UI
• State Management: Redux Toolkit
• Email: Resend + React Email
• Notifications: Sonner
• Database Hosting: Neon

Folder Structure

├── app/
│   ├── api/                # API routes (posts, auth, session, vote)
│   ├── feed/               # Feed and post detail pages
│   └── layout.tsx          # App shell with theme provider
│
├── components/
│   ├── common/             # Reusable UI components (Navbar, Skeletons)
│   ├── comments/           # Threaded comments (CommentsThread.tsx)
│   └── ui/                 # ShadCN UI components (Button, Input, etc.)
│
├── lib/
│   ├── prisma.ts           # Prisma client
│   └── session.ts          # Cookie/session helpers
│
├── prisma/
│   └── schema.prisma       # Database schema
│
├── public/                 # Static assets
├── styles/                 # Tailwind setup
└── types/                  # Shared TypeScript types

Getting Started

Clone the repository and install dependencies:

git clone https://github.com/your-username/devbuzz
cd devbuzz
npm install

To start the development server:

npm run dev
# or yarn / pnpm / bun

Open http://localhost:3000 to view it in your browser.

Database Setup (PostgreSQL on Neon)

Create a PostgreSQL database using Neon and configure your .env file:

DATABASE_URL="postgresql://<your-username>:<your-password>@<your-host>/<your-db>?sslmode=require"

Then push the Prisma schema:

npx prisma db push
npx prisma generate

Authentication Flow

• OTP login system using /api/auth/send-otp and /api/auth/verify-otp
• OTPs are hashed with bcrypt
• Session cookies are stored in PostgreSQL
• Session protection across pages and APIs

Also set:

JWT_SECRET="<your-jwt-secret>"

Email Integration

• Uses Resend to send OTPs
• Uses react-email to render transactional email content

RESEND_API_KEY="<your-resend-api-key>"

Scripts & Tooling

npm run dev        # Start dev server (Turbopack)
npm run build      # Build for production
npm run lint       # Lint the code

Features

• OTP authentication with secure session cookies
• Post creation and threaded comment replies
• Voting system (upvote/downvote once per user)
• Inline reply forms with deep nesting
• Toast feedback with Sonner
• Typed APIs and frontend state
• Dark mode support with next-themes
• Tailwind + ShadCN UI + Lucide Icons

References

Home Page

Feed view with posts and voting

Profile Page

User activity and contribution history

Post Creation

Simple editor with title + content fields

Post Detail

Shows comments and replies with voting

Auth Page

Enter email to receive OTP

OTP Verification

Enter your one-time passcode to log in