Quickly

全栈在线市场项目“Quickly”的用户应用程序。此应用程序使用Flutter构建，并使用Node.js的Express框架作为REST-API后端服务器，该服务器又使用MongoDB作为数据库。

下载此应用的.apk文件： Quickly apk

此前端应用程序使用Flutter构建，遵循Bloc模式和Bloc状态管理，并考虑了清晰的架构。

另请参阅
管理员应用： Quickly Admin

REST-API： Quickly Api

用户应用的核心功能

  • 创建账户并接收欢迎邮件
  • 登录账户并使用OTP通过电子邮件重置密码
  • 显示产品列表，可以是通用的或按类别划分的
  • 搜索栏，用于搜索并实时获取产品结果
  • 查看产品
  • 将产品添加到愿望清单或从中移除
  • 为产品评分和评论，并查看其他评论
  • 添加到购物车并增加或减少数量
  • 3步订单流程
    • 地址步骤：从保存的地址中选择，或在地图上选择位置，或添加新地址
    • 订单审查：审查订单并进入支付环节，由Stripe处理
    • 订单已下单：成功下单后，下载并查看生成的发票。
  • 查看所有之前的订单，附带详细信息和发票
  • 添加和编辑个人资料图片，查看和移除保存的地址
  • 登出

应用屏幕

应用以启动画面开始，然后是开始页面，该页面指定了应用的展望并提供认证链接

Quickly-user-start

认证页面

注册和登录
注册时，将为用户创建账户，用户将收到来自Quickly的欢迎电子邮件，用户可以使用凭据登录。


Sign up               log-in

重置密码
用户需要输入电子邮件和OTP以更改密码，OTP将发送到他们的电子邮件地址。


reset            reset-email      reset-otp

主页

查看产品，添加到愿望清单，搜索产品，从愿望清单移除，查看个人资料

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

产品页面

查看产品，详情，添加到购物车，添加到愿望清单和从中移除，查看和添加评论。


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

购物车页面

查看购物车中的物品，增加或减少数量

Quickly-user-Cart

订单

查看购物车中的物品，选择地址，或当前位置，或添加新地址，审查订单并进入支付环节，下载并查看发票。


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

个人资料

查看个人资料，编辑照片，查看和删除地址，查看订单，退出登录


profile         profile2            orders      profile-pic

文件夹结构

本项目遵循清晰架构，使用BLoC模式，其中代码被分离为

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

完整的文件夹结构如下

lib文件夹包含

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

data子文件夹处理所有数据调用，本地或远程

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

domain子文件夹包含模型和存储库

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

presentation子文件夹包含所有UI部分和bloc；widgets包含重构的、可重用的widgets。

UI部分

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