Flutter Riverpod Clean Architecture Course

Flutter Riverpod Clean Architecture course using the latest api of Riverpod along with Nodejs rest api. This clean architecture course would be same as our BLoC Clean Architecture since they both follow all the features of scalable app building.

Clean Architecture Folder Structure

This clean architecture Riverpod course focuses to build an e-commerce app with payment. The source code includes backend. So the code we cover userend and backend. But the course will just cover user and how to build nodejs api. Let's look at our previous clean architecture tutorials Clean Architecture With BLoC

Let's take a look at the app features

• On boarding screen
  • Beautiful onboarding screen with sales Moto.
• Registration screen
  • Registration with email and phone number and secured password.
• Login feature
  • Secured login verified from front end backend with JWT features.
• Reset password
  • Email verification on reset password with animation and timer.
• View products
  • View products on detail with multiple thumbnails. We have product category of regular products and new arrivals products. 
• Product rating
  • Customers can rate product and view rating of others. Bad rating products are not shown for certain users.
• Choose product size & color
  • You must select your product size and color.
• Search product based on filter 
  • You may also do custom search by filtering features.
• Email sending on confirmation payment
  • Once you place an order you get cool email to notify that you have placed an order with detail product and order info.
• Cart management
  • Cool cart management features. You may add or remove items. You may also remove multiple items at the same time on long press.
• Placing order
  • Place order with stripe account and choose multiple items in placement.
• Search product based on category & subcategory 
  • Click on a category and see all the related products .
• Payment profile
  • Shows where your current order status is. 
• Light and Dark mode
  • This app comes in two mode. Dart and light mode which you can change easily from the profile section.
• Architecture 
  • Clean architecture with Riverpod 2.0 state management .
  • Backend is MVC pattern.
  • Powerful rest api.
  • Backend is done with Express framework and mongodb.
• Cron job on orders
  • The app system checks for unpaid orders and removes then every 24 hours. This is helpful for database management. 
• Course requirement 
  • You must have at least 6 months of flutter programming experience to take this course. 
  • Through this course you will master Flutter programming, core Dart features and Javascript Express framework with Mongodb.

Udemy course link

The source code comes in four flavours. 

Here will focus on mainly how to integrate Riverpod with clean architecture. Since Riverpod could be a bit anit-clean architecture. We will cover the new features of Riverpod 2.0 and above. You will learn how to build a scalable app with Nodejs api.

1. Riverpod clean architecture tier 1 code

Here is your tier one code and you can unlock it for just $17. It includes core clean architecture features with below app functions 

1. login 
2. registration 
3. email verification during password change
4. all products view based on features
5. product detail view
6. search product
7. navigate to different code
8. backend code (nodejs api)

Buymeacoffee link for tier 1

2. Riverpod clean architecture tier 2 code

Here is your tier one code and you can unlock it for just $27. It includes core clean architecture features with all the features of tier 1 and below app functions 

1. login 
2. registration 
3. email verification during password change
4. all products view based on features
5. product detail view
6. search product
7. navigate to different code
8. wishlist on home page
9. wishlist adding and removing features
10. search products based on advanced features
11. select product size and color
12. logout features
13. backend code (nodejs api)

Buymeacoffee link for tier 2

3. Riverpod clean architecture tier 3 code

1. login 
2. registration 
3. email verification during password change
4. all products view based on features
5. product detail view
6. search product
7. navigate to different code
8. wishlist 
9. wishlist adding and removing features
10. search products based on advanced features
11. select product size and color
12. logout features
13. adding products to cart
14. removing products to cart
15. update carts based on products number
16. single select and multi select features in the cart
17. payment features and integration
18. payment profile
19. light and dark mode
20. email receive upon payment
21. cron job on the backend and front end sync
22. backend code (nodejs api)

The course part 1 would be release by the end of January. This would come in 3 parts, to finish these course, you need to buy all three together. 

If you buy tier 3, you get free access to all the parts of this course on udemy.

This source code comes with richer features like with a cart management and dark and light mode. It would also cover payment section.

Dark and light mode not covered in the course of Udemy. It's only given in the source code of tier 3.

The complete code would be released by the end of January. The complete source code would include 75+ screen altogether for dark and light theme. 

Buymecoffeelink for tier 3 

4. Riverpod clean architecture tier 4 code (commercial)

If you want to do better with this app, you also need to buy the admin panel app. Admin panel would be a Flutter desktop app. It's still under construction.

It includes all the features of tier 1, 2 and 3. It also includes all the parts free course coupon of this series.

If you buy the user end app (tier 3) and admin panel app (tier 4), that's your commercial license. You may use it only for your own purpose. You can not resell the app. But if you want to put app in the app store, you may do it. But remodifying and reselling the code is totally forbidden.

Frontend Technical Stack

This app integrates all the popular packages to faciliate user experience and app development easy. Let's take a look the below picture and break down why we have used them.

Apart from clean architecture approach we have used equatable, dartz, go_router, flutter_riverpod, riverpod_annotation, get_it, country_picker.

Since we are using Riverpod 2.0 for state management, we also needed to use riverpod_annotation. This package would help us auto generate riverpod code. We have used equatable package to check to objects same or not. Then we dartz package to handle server response correctly. 

After that go_router is better for nested navigation. Otherwise than we could have just used Flutter native navigation. 

At the end get_it helps us to inject dependencies just like we used for BLoC pattern.

Backend Tech Stack

As we are building a scalable app, Nodejs seems to be the best for backend. Instead of using bare bone Nodejs we go with Express framework which will make life easier. 

Since we also want to use modern database system, we use Mongodb as a database which is more like Firebase NoSQL.

Cron job

Here we introduced a special cron job feature in the backend which communicates with front-end as well. Cron job helps to keep track of the finished and unfinished orders. If there are unfinished orders.

Any sophisticated shop app should have it. Let's see the cron job app log

Installation process

1. simply get the source code

2. set up server correctly based on this article 

3. make sure you have mongodb and connection string in the .env file

4. make sure have an .env. If not then create one and put the Strings from the below

5. then run npm i

6. then run npm start

API_URL = /api/v1
PORT = 3000
IP = localhost
ACCESS_TOKEN_SECRET = whoismybrother
REFRESH_TOKEN_SECRET = takeusbacktoourbrother
CONNECTION_STRING = "Put your String here"/?retryWrites=true&w=majority

EMAIL=
EMAIL_PASSWORD=

Currently the connection string is given in the code itself. You may simply use that. For email, use the given crendentials on then .env file of the source code.

Corrent version

More frontend features and backend app is still under active development. Frontend all the features and backend api would be done by end of January 2024.

Backend flutter app would be done February 2024 and first part of tutorial would be released on Feb 2024.

Upload data to mongodb

Setup nodemailer

Here you go and set up your nodemailer. This video tutorial will how guide you how to set up and send emails.

Stripe payment setup

Here you will see how to set up Stripe payment cli and keep it up and running

Change log

14. 16-01-2024 Email confirmation

13. 16-01-2024 Added cart animation

12. 15-01-2024 Updated the search section

11. 11-01-2024 Added extra features on cart

10. 10-01-2024 Added cart and update function

9. 03-01-2024 Update wishlist

8. 02-01-2024 Updated the cron job for product orders

7. 28-12-2023 Updated the commenting

6. 27-12-2023 Updated the rating system

5. 25-12-2023 Updated side bar

4. 20-12-2023 Comment update on frontend and backend

3. 15-12-2023 Backend api update for home page and product search

2. 11-12-2023 Backend api update for products

1. 09-12-2023 Login ui and basic backend

Twitter fans

Make sure you keep the retweets until you get the coupon. Before we give you the free quota, we check through a quick video call. Make sure you keep your tweets alive.

Comment

• r

  ra2886380@gmail.com

  2024-08-25 08:38:10

  good very nice!!! 5 star not but

• r

  ra2886380@gmail.com

  2024-08-01 03:55:04

  Very good initiative from you!Great work

• r

  ra2886380@gmail.com

  2024-08-01 03:55:01

  Very good initiative from you!Great work