Case Study
Anime Watchlist App
A watchlist app for anime fans, built as a Nucamp Honors project with authentication, persistent user lists, and motion-enhanced UI interactions.
UpdatedLast updated: Oct 9, 2023
Overview
The Anime Watchlist app was built to solve a simple problem: giving users a dedicated place to track what they're watching, want to watch, or have completed. It was part of my Full Stack Honors work at Nucamp and became a playground for frontend UI, authentication flows, and smooth state transitions.
Goals & user experience
I wanted the app to feel lightweight and focused. Users should be able to log in, search or add titles, and manage their personal watchlist without friction. That meant clear grouping of lists, obvious actions for adding/removing items, and feedback on state changes.
Tech stack & architecture
The app is built with React on the frontend and Firebase for authentication and data storage. Firebase Auth handles user accounts, while Firestore (or the Realtime Database, depending on version) stores per-user watchlist data. The UI is component-based and leans on reusable list and card components that render different states based on props and user authentication.
Motion & state feedback
I used Framer Motion to add smooth transitions between list states and to give visual feedback for actions like adding or removing an item. Cards animate into view, and small motion cues help make the interface feel more like a native app experience than a static CRUD UI.
Outcome
The Anime Watchlist app demonstrates my ability to combine frontend design, motion, and real backend integration. It's a strong example of how I approach authenticated experiences, user-specific data, and keeping interfaces fun and responsive without overcomplicating the architecture.