qp-react-assessment (design documentation - dev only)

React assessment repo for Question Pro - machine coding round

🚀 Live App Link : todo-app-qp.web.app/

Main Features:

• 🚀 Dark/Light Mode ✅
• 🚀 Complete CRUD Functionality (create-read-update-delet) ✅
• 🚀 Marking tasks comleted via ticking checkboxes ✅
• 🚀 Global state management via Redux - UX + performance 🔥
• 🚀 Persisting entire app data (crud + checkbox tics) via LocalStorage - UX + performance 🔥
• 🚀 Pagination added (10 items per page) - UX + performance 🔥
• 🚀 Fully mobile responsive app 📱
• 🚀 Unit tests + Integration tests are written covering all main features of the app 👾
• 🚀 Deployed live using Firebase hosting 🌐 Live App

🧑‍💻 Tech Stack : React, Redux, TypeScript, Tailwind CSS, Firebase hosting, Jest

Dev Flow (rough)

1. Initial Setup ✅

   • Project started | 14 May 2024 ✅
   • initial level planning for data layer & ui layer done | lld done ✅
   • boilerplate setup done via vite - react + ts ✅
   • tailwind css + other dependencies ✅
   • data layer setup with redux ✅
   • dark/light theme functionality via context done ✅

2. Functionality ✅

   • Task completion via checkBoxes done ✅
   • CRUD done ✅

3. Optimizations ✅

   • error handling added in form ✅
   • data persistence added via localStorage ✅
   • simultanious CRUD in localStorage to keep data uniformity ✅
   • pagination added via react-paginate after more then 10 items, for enhancing performance ✅

4. Bug fixes ✅

5. App made fully mobile responsive ✅

6. Unit testing + Integration testing with Vitest + React-testing-library ✅

7. Clean up + Deployment via Firebase hosting ✅