Building a discussion forum site from scratch that goes beyond basic functionality requiring a clean Redux-driven architecture, zero ESLint errors, optimistic UI updates, and a full automation testing suite (unit, integration, and end-to-end). The final layer of challenge was wiring everything into a CI/CD pipeline with branch protection, ensuring no broken code could ever reach production.
As the sole developer, I designed and built the entire application across two submission phases.
Phase 1 — Core Application
- Built authentication flows (register & login) integrated with the Dicoding Forum API
- Developed thread listing with title, body preview, creation time, comment count, and author info
- Built thread detail pages with full body, author info, and nested comments
- Implemented thread and comment creation (auth-protected)
- Added up-vote/down-vote on threads and comments with Optimistic UI — state updates instantly before API confirmation
- Built a Leaderboard page showing user rankings with name, avatar, and score
- Implemented client-side category filtering on the thread list, built purely in frontend state
- Managed nearly all application state through Redux Store with Thunk for async API calls — zero REST calls inside component lifecycle/effects
- Enforced code quality with ESLint, React Strict Mode, and AirBnB JavaScript Style Guide
- Kept UI components modular, reusable, and fully separated from state logic
Phase 2 — Testing & CI/CD
- Wrote unit tests for Reducer functions covering multiple conditions and edge cases
- Wrote integration tests for Thunk functions covering multi-action dispatch scenarios
- Wrote React Component tests using React Testing Library
- Built an End-to-End test for the full login flow using Cypress/Playwright
- Set up GitHub Actions for Continuous Integration — automatically runs the full test suite on every push
- Deployed via Vercel for Continuous Deployment
- Configured branch protection on master to block merges when CI checks fail
Tech Stack: React, Redux Toolkit, Redux Thunk, TypeScript, ESLint, Jest/Vitest, React Testing Library, Cypress, GitHub Actions, Vercel
Delivered a discussion forum that passed all submission criteria across both phases, clean Redux architecture, zero ESLint errors, optimistic UI, complete test coverage, and a working CI/CD pipeline with branch protection. The project demonstrates end-to-end ownership from feature development to automated deployment.