Type: Full-Stack Web App
Tech Stack: React, Node.js, CouchDB, React Router, Context API
Overview
A full-stack book club web application where users can have an account, browse books, join book specific discussions by posting reviews or replying to others. The app allows users to interact with a shared book database and even add missing books to the shared database.
My Role & Contributions
This was a solo full-stack project where I designed and implemented both the frontend and backend systems.
Key contributions:
- Built a React frontend with dynamic routing and reusable components
- Designed and implemented a REST API for books, posts, and replies
- Integrated CouchDB for persistent data storage
- Implemented authentication for users vs. admin access
- Created search and filtering functionality for books
- Designed UI flows for posting, replying, and adding new books
Key Features
Book-Based Discussion Channels 📚
Each book has its own dedicated channel where users can view details, give star ratings and participate in discussions through posts and replies.
Search & Filter System 🔍
Users can browse and search the book database, making it easier to find and join wanted discussions.
Post & Reply System 📝
Users can create posts and reply within channels, with all data stored and retrieved from the database in real time.
Technical Details
- Frontend built with React and React Router for dynamic routing
- Used Context API for managing authentication state (users vs admin)
- Backend implemented with Node.js, REST API supporting full CRUD operations
- Data stored in CouchDB, including books, posts, replies
- Used modals for creating posts, replies, and adding new books
- Structured component hierarchy for scalability and reusability
Challenges & Solutions
Challenge: Managing dynamic routing for multiple book channels
Solution:
Used React Router with parameterized routes to dynamically render content for each book
Challenge: Ensuring only authenticated users could post
Solution:
Implemented protected routes and authentication state using Context API to restrict actions based on user status
Challenge: Keeping frontend and database in sync
Solution:
Tested with both valid and invalid inputs and verified data directly in CouchDB to ensure consistency between UI and stored data
What I Learned
- How to design and connect a full-stack application end-to-end
- Working with NoSQL databases (CouchDB)
- Managing authentication and protected routes in React
- Structuring scalable frontend architecture
- Testing both frontend behaviour and backend accuracy
Future Improvements
- Enhance user authentication
- Add user profiles and activity tracking
- add ability to track read books