SuperShopper is a full-stack e-commerce app that allows users to browse products, manage a shopping cart, and securely login or sign up. The app offers a smooth shopping experience, including the ability to save the cart locally across app restarts and login sessions.
-
User Authentication: Users can sign up, login and logout. The app validates credentials, detecting invalid email addresses or excessively short passwords. If the user logs in once and does not logout, they stay logged in even after restarting the app.
-
Product Browsing: The home page lists products fetched from an API, displaying their images, titles and prices. Users can add products to their cart from the home page or the detailed product page.
-
Product Details: Users can click on any product to view a larger image, detailed description and price. The product details page also includes an option to add the product to the cart.
-
Shopping Cart: A dedicated shopping cart page allows users to view their selected products. Users can remove items from the cart, upon which the total price of the items is automatically updated. The cart is saved locally using the Hive database and is stored separately for each user.
-
Persistent Cart: The cart is preserved even after an app restart, allowing users to resume their shopping session. Each user's cart is stored separately to maintain individual sessions.
-
Custom Icon: The app includes a custom launcher icon for a polished look.
Here are some screenshots of the SuperShopper e-commerce app:
| Login | Signup | Home Page | Product Details | Cart Page | Drawer |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
- Login Page: Enables users to login with email and password.
- Sign-Up Page: New users can create an account.
- Home Page: Displays a list of products fetched from a dummy API. Each product has an add-to-cart button.
- Product Details Page: Shows a larger image of the selected product, along with a description and price.
- Shopping Cart Page: Displays the items added to the cart and the total price. Users can remove items as needed.
- Navigation Drawer: Available on the home page for quick access to the logout option.
-
REST API: Product details are fetched from a dummy API.
-
State Management: Managed using the GetX package, ensuring smooth state transitions and data sharing across the app.
-
Local Storage: The Hive database is used to store users' carts locally, allowing each user to maintain their cart independently.
-
Firebase Authentication: Firebase is used to manage user login and sign-up processes, ensuring secure authentication.
-
Custom Navigation Bar: The Google Nav Bar package is used to implement a modern and stylish bottom navigation bar.
The following dependencies are used in the project as listed in the pubspec.yaml file:
- http:
^1.2.2- To make network requests and fetch data from a dummy API. - google_nav_bar:
^5.0.6- For a modern and customizable bottom navigation bar. - get:
^4.6.6- For state management. - hive:
^2.2.3- To store data locally for each user. - hive_flutter:
^1.1.0- For integrating Hive with Flutter. - firebase_core:
^3.6.0- To connect the app with Firebase. - firebase_auth:
^5.3.1- For handling user authentication.
- hive_generator:
^2.0.1- To generate the necessary code for Hive's type adapters. - build_runner:
^2.4.13- To run code generation tasks for Hive. - flutter_launcher_icons:
^0.14.1- To set a custom app icon.
Before running the app, make sure you have Flutter installed. You can follow the official Flutter installation guide to set up Flutter on your system. You can set up Firebase by following Firebase's official documentation.
-
Clone this repository to your local machine:
git clone https://github.com/RitamPatra/supershopper.git cd supershopper -
Install the required dependencies:
flutter pub get
-
To generate the custom launcher icon, run:
dart run flutter_launcher_icons
-
Run the app on an emulator or connected device:
flutter run
- Login or Sign-Up if you don't have an account.
- Browse the available products on the Home Page.
- Add products to your Cart directly from the home page or the Product Details Page.
- View the Cart to check your added items, modify the cart if required and see the total price.
- Logout from the drawer when you're done.