A full-stack, real-time-capable comments engine featuring nested replies, dynamic voting, and a persistent relational database. This project implements a sophisticated frontend-to-backend architecture, moving beyond simple state persistence to a fully decoupled API-driven system.
- React & Tailwind CSS: Component-based UI with a utility-first styling approach.
- TanStack Query (React Query): Orchestrates server-state management, caching, and optimistic UI updates.
- shadcn/ui: Built on Radix UI primitives for accessible, high-quality interactive components.
- NestJS: A progressive Node.js framework used to build a modular, scalable server architecture.
- TypeORM: Data mapper pattern for managing relational entities and complex migrations.
- Neon (PostgreSQL): Serverless relational database for persistent storage.
The system supports multi-level nested replies. Unlike basic implementations, this utilizes a relational schema to manage parent-child relationships between comments and replies efficiently.
Leveraging TanStack Query, the application performs optimistic updates for votes and deletions. Users experience zero latency for interactive actions while the system synchronizes state with the NestJS API in the background.
Static date strings were replaced with dynamic timestamps. The application calculates relative time (e.g., "3 hours ago") on the fly, ensuring the data remains relevant without manual refreshes.
A complete implementation of Create, Read, Update, and Delete functionality, integrated with backend validation and TypeORM persistence.
The database is designed with two primary entities: User and Comment.
- Self-Referencing Relationships: Comments can reference a parent comment to create infinite threading capabilities.
- Score Persistence: Voting logic is handled on the server side to ensure data integrity across different sessions and users.
The NestJS backend provides a RESTful interface for the React frontend. Error handling and data validation are managed via NestJS pipes, ensuring that the frontend only ever interacts with sanitized, predictable data.
| Desktop View | Mobile View |
|---|---|
 |
 |
Thyu Htoo Aung GitHub | Frontend Mentor | X / Twitter