Verdant is a modern, full-featured e-commerce app for indoor plant lovers — built entirely on the frontend with React and TypeScript. It simulates a real shopping experience from browsing and filtering plants, to adding them to a cart, checking out with a payment form, and viewing order history — all with data persisted across sessions via Redux Persist.
The app features credential-based authentication, protected routes, an animated credit card component, real-time form validation, and a clean profile page where users can track their order history. No backend required — everything runs in the browser.
- Authentication — Sign up and sign in with credential validation. Registered users are stored in localStorage and verified on login
- Protected & Guest Routes — Cart, Checkout, and Orders require authentication. Authenticated users cannot access Sign In or Sign Up
- Plant Browsing — Browse all plants with filters by category, light level, and difficulty
- Product Detail — Full plant profile with care guide, pot size, and live quantity controls
- Cart — Add, increment, decrement, and delete items with a live cart count and free delivery threshold
- Checkout — Shipping form + animated credit card with auto card-type detection, real-time validation, and masked card number on save
- Order Confirmation — Full order summary with shipping details, masked payment info, and order ID
- Profile Page — View order history, search orders by order number, and manage account
- Data Persistence — Cart, orders, and auth state persist across page refreshes via Redux Persist
Make sure you have the following installed:
- Node.js v18 or higher
- npm v9 or higher
1. Clone the repository
git clone https://github.com/Umairulislam/verdant.git
cd verdant2. Install dependencies
npm install3. Start the development server
npm run dev4. Open in browser
http://localhost:5173
npm run buildThis project has no backend. Authentication credentials and orders are stored in
localStoragevia Redux Persist. In a production app, these would be handled by a REST API with a database, and orders would be scoped per authenticated user.