Master TodoReact + Firebase Task App
- Period
- Dec 2023 - Jan 2024
- Project type
- Pet Project
- Role
- Developer / Project Owner (Individual)
- Team
- Solo
A todo app built to practise React state patterns with Firebase-backed persistence.
Overview
Master Todo is a small, self-contained app for getting hands-on with React state management and a hosted backend. It uses Firebase for persistence and auth and Tailwind for styling, scaffolded with Vite for a fast dev loop.
Role & context
- Role
- Developer / Project Owner
- Team
- Solo
- Type
- Pet Project
- Period
- Dec 2023 - Jan 2024
Personal learning project — a React + Vite single-page app with Firebase persistence and Tailwind styling.
Problem
A focused space to practise React state management and CRUD against a hosted realtime/auth backend, without standing up a server.
Approach & architecture
React/Vite client persisting directly to Firebase.
Practices followed
Drove the UI from component state rather than ad-hoc DOM mutation
Used Firebase for persistence/auth instead of hand-rolling a backend
Kept Firebase config in environment variables
Scaffolded with Vite for a fast dev and build loop
Challenges & resolutions
Keeping the UI in sync with a remote store.
FixUsed Firebase listeners so the list reflects backend state without manual refresh.
Outcomes
Working React + Firebase todo app
Hands-on practice with CRUD against a hosted backend
Tech stack
Concepts & skills7
- React
- Vite
- Firebase (Firestore + Auth)
- Tailwind CSS
- Component state management
- CRUD operations
- Environment configuration