Build an Offline First App using Flutter, Node, Bloc, Express, TypeScript, Docker and PostgreSQL!

In this video, we’ll build an offline-first task manager app using Flutter & Node step by step. The user will be able to sign up, log in, and have their logged-in state saved even after closing the app. They can create tasks, view tasks organized by date, and perform all these actions both online and offline. If they’re offline, the app will sync the data automatically with the remote database as soon as they go back online.

Resources:

Timestamp:
(00:00:00) Introduction
(00:01:04) Project Setup & Folder Structure (Flutter Frontend)
(00:05:15) Signup Page UI & Form Validation
(00:28:16) Login Page UI
(00:32:57) Node + Express + TypeScript Backend Setup
(00:47:04) Docker - What, Why, How, Building Image & Containerizing Node + Express Env
(01:02:50) PostgreSQL + Docker Compose
(01:13:01) Docker Volumes - Bind Mount & Anonymous (Nodemon in Docker)
(01:15:56) Node + PostgreSQL connection
(01:19:14) Auth Router
(01:21:58) Signup API Route - Storing User Data using Drizzle ORM
(01:50:28) Docker Volumes - Named Volumes (PostgreSQL Persistent Storage)
(01:56:01) Login API Route
(02:00:45) Auth Router - JWT, Token Validity
(02:11:53) Get User Data API, Auth Middleware
(02:22:42) Connecting SignUp & Login API to Frontend | Cubit | State Management
(02:51:13) Persisting Auth State using Token Validity APIs | Shared Preferences
(03:05:04) Debugging Persisting Auth State code
(03:07:59) Working of Offline First App (For Authentication)
(03:09:51) SQLite + Offline First
(03:22:49) Suggestion/Recommendation
(03:23:25) Home Page UI
(03:56:19) Add New Task Page UI
(04:05:50) Task Router | Task Schema | REST API
(04:22:56) Connecting Add New Task Route to the Frontend
(04:43:27) Connecting Get Tasks Route to the Frontend + Refactoring
(04:56:25) showTimePicker
(04:57:19) Filtering tasks
(05:05:40) Offline First For Tasks
(05:16:55) Bug fix for Auth Offline First
(05:21:09) Bug fix for Tasks Offline First
(05:35:06) Offline First Syncing With Remote DB
(05:55:54) Recap of Offline First Application Architecture
(06:00:00) Conclusion

Connect With Me Here:

[fatihyilmazz]

We missed you, I was just looking for a nodejs typescript docker microservices video. It came from my favorite guy. Welcome king.

[medoxcharm]

We missed you bro it's good to see you again, keep going bro you are the best

[sahilsinnarkar]

Bro you are such an expert in these stuff, really inspirational

[-IT-KumarTe]

Hi Rivaan,
I’m a final-year student currently working on a project titled Smart Parking Finder and Management System. It involves real-time parking availability, seamless booking, and efficient management using Flutter, Node.js, and PostgreSQL.

Your tutorials have always been a great source of guidance for me. It would mean a lot if you could create a tutorial on a similar project to help students like me in implementing this system effectively.

Thank you for the amazing content you provide! Looking forward to learning more from your channel.

[shahabdolatabadi]

Hi Rivaan. Your tutorials are awesome. Detailed, clear, and comprehensive. One question. Will you be creating Serverpod tutorials in near future?

[ivelandry]

The 🐐 dropped another, dunno why I didn't get notified

Rivaan please clone file manager next, It'll help me a lot

[KrishnaparthDave]

Rivaan keep doing such great projects and thank you for sharing this with us and I really love your Flutter project videos

[SsSs-gbkj]

Today is my interview. Lord Rivaan ranawat thunai( means Lord Rivaan Ranawat will help me to pass the interview😂 ). Thanks a lot bro.

[cptsakamoto]

I believe facing a realworld problems and fixing in a video gives proper understanding, if the someone dont want to see the fixing they can always skip

[krmdigital]

Create for background sync and work manager plz

[saiphaneeshk.h.]

Watching Flutter Ad in between flutter tutorial, 👏 👏 👏

Edit: 12min Ad, damn

[gamershubhya]

Your video will make my resume Stronger 💪🏻

[infotration]

Last month i was searching for video for postgrasql and flutter now your video appear. It's like reading my mind and creating video for me.
Thank you 😂❤ sir

[actu-soft]

Thank you for this good job, so please do the second part to complete us all knowledge!

[Ash-]

Great content Rivaan. I'd appreciate it if you could make a tutorial on background syncing using workmanager pluggin.

[savitrik]

Thank you for these insightful vids . Very helpful. So much to learn from u.

[vitami]

Hey guys! If anyone has problem with nodemon in Windows,
and your changes are not reflected to Docker,
(I found it after hours of searching as I am a docker newbie..) just replace the "scripts" key in package.json files.

from this

"scripts": {
"dev": "npx nodemon"
},

to this:

"scripts": {
"start": "ts-node src/index.ts",
"dev": "nodemon -L ts-node src/index.ts"
},

[landrynignan]

Goood job, I hope to see work manager tuto👍

[truehuman]

You can use Vania dart framework for rest api server, you can also deploy to render as docker cont

[Aditya-segs]

Day 1 update: Watched and completed till 2:00:45