Technical Design Document: Reddit-Like

Web App
Document Title: Technical Design Document

Version: 2.0

Related Documents: Project Overview (v1.0), Feature Requirements (v1.0)

Purpose
This document outlines the technical architecture and implementation details for a Reddit-like web
app MVP, using Java for the backend, MySQL for the database, and React.js for the frontend. It
ensures the system meets the functional and non-functional requirements within an 8–12 week
timeline.

Scope
●​ In Scope: Technical design for core features (user accounts, posts, comments, voting,
subreddits, home feed, search).
●​ Out of Scope: Advanced features (e.g., real-time updates, complex moderation), scalability
beyond 1,000 users.

System Architecture

Overview
The app uses a client-server architecture with a single-page application (SPA) frontend, a RESTful
API backend, and a relational database (MySQL) for structured data storage.

●​ Frontend: React SPA for dynamic UI.

●​ Backend: Java-based API server for business logic.
●​ Database: MySQL for relational data management.
 ●​ Hosting: Cloud platform (e.g., AWS Elastic Beanstalk for backend, Vercel for frontend).

High-Level Diagram
[User Browser] <--> [Frontend: React SPA] <--> [Backend: Java API] <-->
[Database: MySQL]
| | |
[Vercel Hosting] [AWS Elastic Beanstalk] [AWS RDS
MySQL]

Technology Stack

Frontend
●​ Framework: React.js
○​ Reason: Widely used, component-based, excellent for dynamic feeds and real-time
updates (e.g., voting). Alternatives like Angular or Vue.js were considered, but
React’s ecosystem and simplicity suit an MVP.
●​ Styling: CSS-in-JS (e.g., Styled Components)
○​ Reason: Scoped styles, responsive design.
●​ State Management: Redux or Context API
○​ Reason: Manage user sessions, feed data.

Backend
●​ Language: Java (Spring Boot)
○​ Reason: Robust, enterprise-grade framework with Spring Boot for rapid API
development, dependency injection, and scalability. Java’s strong typing and
ecosystem suit a Reddit-like app’s structure.
●​ API: RESTful
○​ Reason: Simple, interoperable with React frontend.

Database
●​ Type: MySQL (Relational)
○​ Reason: Structured schema for users, posts, and comments; strong relational
support for joins (e.g., posts to subreddits); widely supported by Java (JDBC,
Hibernate).
●​ Hosting: AWS RDS (Relational Database Service)
○​ Reason: Managed MySQL instance, free tier available for small projects.
Hosting
●​ Frontend: Vercel
○​ Reason: Easy React deployment, free tier, custom domain support.
●​ Backend: AWS Elastic Beanstalk
○​ Reason: Simplifies Java app deployment, integrates with RDS, scalable.

Additional Tools
●​ Authentication: JWT (via Spring Security)
○​ Reason: Secure, stateless tokens.
●​ OAuth: Google OAuth (Spring Security OAuth2)
○​ Reason: Simplified social login.
●​ ORM: Hibernate (Spring Data JPA)
○​ Reason: Maps Java objects to MySQL tables.
●​ Testing: JUnit (backend), Jest (frontend), Postman (API).

Data Model

Tables and Schema

1.​ Users
○​ Columns:
■​ id (BIGINT, PK, auto-increment)
■​ username (VARCHAR(20), unique)
■​ email (VARCHAR(255), unique)
■​ password_hash (VARCHAR(255))
■​ created_at (DATETIME)
○​ Indexes: email, username
2.​ Posts
○​ Columns:
■​ id (BIGINT, PK, auto-increment)
■​ user_id (BIGINT, FK → Users)
■​ subreddit_id (BIGINT, FK → Subreddits)
■​ title (VARCHAR(200))
■​ content (TEXT, max 10,000 chars or URL)
■​ upvotes (INT, default 0)
■​ downvotes (INT, default 0)
■​ created_at (DATETIME)
■​ updated_at (DATETIME, nullable)
 ○​ Indexes: user_id, subreddit_id, created_at
3.​ Comments
○​ Columns:
■​ id (BIGINT, PK, auto-increment)
■​ post_id (BIGINT, FK → Posts)
■​ user_id (BIGINT, FK → Users)
■​ parent_comment_id (BIGINT, FK → Comments, nullable)
■​ content (TEXT, max 5,000 chars)
■​ upvotes (INT, default 0)
■​ downvotes (INT, default 0)
■​ created_at (DATETIME)
■​ updated_at (DATETIME, nullable)
○​ Indexes: post_id, user_id, parent_comment_id
4.​ Subreddits
○​ Columns:
■​ id (BIGINT, PK, auto-increment)
■​ name (VARCHAR(20), unique)
■​ description (VARCHAR(200))
■​ creator_id (BIGINT, FK → Users)
■​ created_at (DATETIME)
○​ Indexes: name
5.​ Votes (separate table for vote tracking)
○​ Columns:
■​ id (BIGINT, PK, auto-increment)
■​ user_id (BIGINT, FK → Users)
■​ target_id (BIGINT, FK → Posts or Comments)
■​ target_type (ENUM(‘post’, ‘comment’))
■​ vote (TINYINT, 1 or -1)
○​ Indexes: user_id, target_id, composite (user_id, target_id)

API Endpoints

User Accounts
●​ POST /api/register: Create user (email, password, username).
●​ POST /api/login: Authenticate, return JWT.
●​ GET /api/profile/:user_id: Fetch profile data.

Posts
 ●​ POST /api/posts: Create post (title, content, subreddit_id).
●​ PUT /api/posts/:id: Edit post.
●​ DELETE /api/posts/:id: Delete post.
●​ GET /api/posts/:id: Fetch post details.

Comments
●​ POST /api/comments: Create comment (post_id, content, parent_comment_id).
●​ PUT /api/comments/:id: Edit comment.
●​ DELETE /api/comments/:id: Delete comment.

Voting
●​ POST /api/votes: Cast vote (target_id, target_type, vote).
●​ Response: Updated vote count.

Subreddits
●​ POST /api/subreddits: Create subreddit (name, description).
●​ GET /api/subreddits/:id: Fetch subreddit posts.
●​ POST /api/subreddits/:id/join: Join subreddit.

Feed and Search

●​ GET /api/feed: Fetch home feed (sorted by votes or recency).
●​ GET /api/search/posts?q={query}: Search posts (SQL LIKE on title/content).
●​ GET /api/search/subreddits?q={query}: Search subreddits.

Implementation Notes

Frontend (React.js)
●​ Routing: React Router (e.g., /, /r/:subreddit, /post/:id).
●​ Components: PostCard, CommentTree, SubredditList.
●​ Responsive Design: CSS media queries (<768px mobile, >1024px desktop).

Backend (Java/Spring Boot)

 ●​ Structure: MVC pattern with Spring Boot.
○​ Controllers: Handle REST requests (e.g., PostController).
○​ Services: Business logic (e.g., PostService).
○​ Repositories: Data access via Spring Data JPA (e.g., PostRepository).
●​ Authentication: Spring Security with JWT middleware.
●​ Rate Limiting: Spring Boot filter (e.g., 100 requests/min per IP).

Database (MySQL)
●​ Schema: Relational tables with foreign keys for strict integrity.
●​ Queries: Optimized with indexes (e.g., SELECT * FROM posts ORDER BY upvotes DESC).
●​ Joins: Used for feed (Posts → Subreddits) and comments (Comments → Posts).

Non-Functional Compliance
●​ Performance: MySQL indexes for fast queries; API responses <500ms for small datasets.
●​ Security: HTTPS via AWS, SQL injection prevention via prepared statements.
●​ Reliability: Transactional updates for votes (e.g., ACID compliance in MySQL).

Assumptions
●​ Initial load: <1,000 users, <10,000 posts/comments.
●​ AWS free tier (RDS, Elastic Beanstalk) suffices for MVP.
●​ Basic polling for updates (no WebSockets in MVP).