Quickly

User App for Quick Shop built in flutter

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.

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

Home-Page :

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

Product Page:

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

Cart Page:

View items in cart, 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.

Profile :

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

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 :

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

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

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

The domain sub-folder has models and repositories :

domain
  |- 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:

presentation
   |- pages
     |- authentication
        |- start.dart
        |- sign_up.dart
        |- sign_in.dart
        |- reset_password.dart
     |- cart
         |-cart_items.dart
     |- 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 :

presentaion
 |- 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

GitHub

https://github.com/GauravMcode/Quick-Shop_user