Skip to content

README.md

Latest commit

 

History

History
71 lines (39 loc) · 2.92 KB

README.md

File metadata and controls

71 lines (39 loc) · 2.92 KB

Interactive Comments System

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.

Live Demo | Source Code

Tech Stack

Frontend

  • 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.

Backend

  • 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.

Core Features

Advanced Threading Logic

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.

Optimistic UI & State Synchronization

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.

Dynamic Temporal Data

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.

Full CRUD Operations

A complete implementation of Create, Read, Update, and Delete functionality, integrated with backend validation and TypeORM persistence.

Technical Architecture

Database Schema

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.

API Integration

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.

Performance Previews

Desktop View Mobile View
Desktop Screenshot Mobile Screenshot

Author

Thyu Htoo Aung GitHub | Frontend Mentor | X / Twitter