Project
DigiTools
A SaaS digital tools storefront with product browsing, cart management, and toast notifications. Built with React and Context API.
React.js
Tailwind CSSDaisy UIContext APIReact Toastify
About the Project
DigiTools is a SaaS digital tools storefront built as a single-page application using React 19, Vite, Tailwind CSS v4, and DaisyUI. Shoppers can browse a curated catalog of digital products, add items to a persistent cart, and receive instant toast notifications on every action — making the purchasing flow fast and reassuring. The cart state is managed globally using React Context API with lifted state for seamless checkout reset behavior. A friendly custom 404 page with canvas-based firefly animations ensures users who land on broken URLs stay engaged rather than bouncing. The project demonstrates clean state management, component composition, and a polished storefront UI without a backend dependency.
⚡ What Was Hard
- 01Lifting selectedIds state to the correct level to allow checkout to reset the cart without prop drilling issues.
- 02Fixing ToastContainer placement so notifications rendered correctly without overlapping UI elements.
- 03Resolving a use(promise) incompatibility with client components in React 19, replaced with useEffect and useState.
- 04Managing cart persistence across navigation without a backend or localStorage dependency.
- 05Ensuring Tailwind CSS v4 utility classes worked correctly with DaisyUI component overrides.
🚀 What is Next
- 01Add a backend with Node.js and MongoDB to support real user accounts and order history.
- 02Integrate a payment gateway for actual SaaS product purchases.
- 03Build an admin dashboard for product management and sales analytics.
- 04Add product search, filtering by category, and sorting by price or popularity.
- 05Implement wishlist functionality so users can save tools for later.