User Application for the Full Stack Online Marketplace Project "Quickly". This App has been built using Flutter and uses Node.js's Express framework based REST-API for backend server, which in turn uses MongoDB as Database.

Download .apk file for this app : Quickly apk

This frontend App is built using Flutter following the Bloc pattern and Bloc state management keeping in mind clean architecture.

Also see :
Admin App : Quickly Admin

Rest-Api : Quickly Api

Core feautures of User App :

  • Create Account & recieve Welcome email
  • Log-in to account & Reset password using OTP through email
  • Display list of product, general or category-wise
  • Search Bar to search and recieve real-time product results
  • View Product
  • Add or remove product from wish-list
  • give rating and review to product & view other reviews
  • Add to Cart & increase or decrease quantity
  • 3 step order flow :
    • Address Step : Choose form saved address or select Location on Map or Add a new Address
    • Review Order : Review order & proceed to payment, handled via Stripe
    • Order Placed : After Successfully placing order, Download & view Invoice generated.
  • View all previous orders, with details and invoice
  • Add & edit Profile image, view and remove saved addresses
  • Sign out

App screens:

The App starts with a splash screen, followed by a Start page, that specifies outlook of the app & link for authentication :


The Authentication Pages :

SignUp & LogIn:
On Sign-up, an account is created for user & user recieves a Welcome email from Quickly, user can log-in with the credentials.

Sign up log-in

Reset Password :
User has to enter email and OTP to change password would be sent to their email address.

reset reset-email reset-otp

Home-Page :

View products, add to wishlist, search products, remove from wishlist, view profile

Quickly-user-homepage<img src=https://github.com/GauravMcode/Quick-Shop_user/assets/51371766/cc755d88-9bfa-419f-aed4-48b2f3abf5fa" width="250" height="500">

Product Page:

View Product, details, Add to Cart, Add and remove from wishlist, view and add reviews.

Quickly-user-product add-cart product product-2 add-cart2

Cart Page:

View, increase or decrease quantity


Order :

View items in cart, Selcet Address, or currrent location, or add a new address, review order & proceed to payment, download and view invoice.

Quickly-user-order cart-items address-1 address-2

Profile :

View Profile, edit photo, view and delete address, view orders, Sign Out

profile profile2 orders profile-pic

Folder Structre:

This Project follows Clean Architecture using BLoC Pattern, where code is seperated into :

|- Data Layer
|- Domain Layer
|- Presentation Layer

The complete Folder Structe is as follows :

The lib folder consists :

|- data
|- domain
|- presentation
|- config
|- main.dart

The data sub-folder handles all calls for data, local or remote

  |- local
     |- local_data.dart
  |- remote
     |- remote_data.dart

The domain sub-folder has models and repositories :

  |- models
    |- product.dart
    |- user.dart
  |- repositories
    |- auth_repository.dart
    |- cart_repository.dart
    |- map_repository.dart
    |- order_repository.dart
    |- product_repository.dart
    |- user_repository.dart

The presentation sub-folder consists all UI part and bloc; widgets contain refactored and re-usable widgets.

UI part:

   |- pages
     |- authentication
        |- start.dart
        |- sign_up.dart
        |- sign_in.dart
        |- reset_password.dart
     |- cart
     |- order
         |- map.dart
         |- order_details.dart
         |- orders.dart
     |- product
         |- products.dart
         |- product.dart
         |- wishlist.dart
     |- profile
         |- prodile.dart
     |- home_page.dart
   |- widgets
      |- cart
         |- cart_animation.dart
      |- order_steps
         |- address_step.dart
         |- order_placed.dart
         |- review_details.dart
      |- products
         |- curved_appbar.dart
         |- horizontal_scroll_list.dart
         |- product_helper.dart
         |- products_helper.dart
      |- input_field.dart

BLoc :

 |- Bloc
   |- bloc
     |- auth_bloc.dart
     |- cart_bloc.dart
     |- map_bloc.dart
     |- order_bloc.dart
     |- product_bloc.dart
     |- user_bloc.dart
     |- util_bloc.dart
   |- events
     |- auth_events.dart
     |- cart_events.dart
     |- map_events.dart
     |- order_events.dart
     |- product_events.dart
     |- user_events.dart
     |- util_events.dart