Your Everyday Grocery Partner – Freshness Delivered to Your Doorstep.
Overview
FreshMart is a modern and user-friendly e-commerce platform dedicated to grocery shopping. It offers a wide range of food items, from fresh produce to daily essentials, all in one place. The application is designed to provide a fast, convenient, and seamless shopping experience with a clean and professional interface.
Tech Stack
React.jsViteTailwind CSSFirebaseReact Router DomReact Hook FormReact Helmet AsyncAxiosMatch-sorterDotenv
Key Highlights
- ✦Smart Product Search: Integrated match-sorter and sort-by functionality to help users find specific grocery items quickly.
- ✦Interactive Shopping Experience: Uses Swiper for dynamic product carousels and react-parallax for an engaging visual experience.
- ✦Secure Authentication: Powered by Firebase for safe user sign-ins and profile management.
- ✦Advanced Form Handling: Utilizes react-hook-form for efficient, validated, and user-friendly checkout and registration forms.
- ✦SEO Optimization: Implemented react-helmet-async to manage document head tags for better search engine visibility.
The Challenge
- —Large Inventory Management: Sorting and filtering through a vast list of diverse food categories without compromising performance.
- —UX Design: Creating a fast-loading interface that handles many high-quality product images simultaneously.
- —State Persistence: Ensuring the user's data remains consistent during their shopping journey.
Solution & Impact
- ✓Performance Optimization: Leveraged Vite for ultra-fast builds and used localforage for improved offline storage and faster data retrieval.
- ✓Modular UI Design: Built the interface using Tailwind CSS and daisyUI, ensuring a consistent and responsive design across all devices.
- ✓Streamlined Logic: Used React Router Dom for smooth navigation between categories and product details without page reloads.