Build a Medical Booking App without coding using FlutterFlow

Name: Build a Medical Booking App without coding using FlutterFlow
Rating: 4.1 (190 reviews)

Understand how to build a medical booking app without coding using FlutterFlow - Chats, Payment and Video Call features

Created byDavid Orok

Last updated 9/2023

English

English [Auto],

What you'll learn

Convert UiUx design from Figma into Pages in FlutterFlow using Widgets
Use custom functions to implement difficult features in FlutterFlow
Understand Firebase and how to use it for your FlutterFlow project
Web Publishing
Understand how to Implement Chatting Functionality
Understand CRUD (Create Read Update Delete)

Course content

1 section • 16 lectures • 7h 54m total length

Frontend - Backend - Part 1 - Splash Screen - Onboarding32:39
Design and implement the splash screen and onboarding flow for a medical booking app in FlutterFlow, integrating Firebase authentication and frontend and backend setup.
Frontend - Part 2 - Sign up - Login Screen23:49
Build and customize the login and signup screens in FlutterFlow, including email and password fields, forgot password, Google and Apple sign-in options, and sign-up flow.
Frontend - Backend - Part 3 - Login - Sign up - Home Screen31:40
Design the home screen in FlutterFlow, building a widget tree with a greeting row, avatar image, health message, a search field, and horizontal carousels of doctors.
Frontend - Part 4 - All Doctors Screen11:12
Create the all doctors screen in FlutterFlow, building a list view of doctors with image, name, cardiology and distance, plus a rating row in cards ready for backend later.
Frontend - Part 5 - Doctors Details Page21:15
Design and implement a doctor's details page in FlutterFlow, including doctor image, description, and a calendar with time slots and actions to send a message or book an appointment.
Frontend - Part 6 - My Bookings26:31
Build the bookings frontend in FlutterFlow by creating a booking successful bottom sheet, a my bookings page with upcoming and past tabs, and a reusable booking card with actions.
Frontend - Part 7 - Chats and Messages30:42
Learn to design the chats and messages frontend for a medical booking app in FlutterFlow, including a chat list with avatars, message bubbles, timestamps, and a bottom send input.
Backend - Part 8 - Sign up - Login - Logout - Home page12:43
Learn to implement a backend flow for a medical booking app with Firebase authentication, including splash, sign up, login, and home navigation, plus saving name on signup and Google sign-in.
Backend - Part 9 - Popular Doctors - Doctors Details Page - Payment - My Booking50:59
Explore backend design for a medical booking app: create a popular doctors collection in Firestore, implement doctor detail and booking flows, integrate Stripe payments, and support admin doctor approval.
Backend - Part 10 - Stripe Payment Gateway Integration - My Bookings40:57
Master Stripe payment integration in a FlutterFlow app, upgrade to Blaze plan, deploy the gateway, and manage bookings with a bottom sheet and app state.
Backend - Part 11 - Stripe Payment Gateway Integration Testing - Booking Success26:18
Test Stripe payment gateway integration in a FlutterFlow medical booking app, validating booking success with test cards and Firebase bookings.
Backend - Part 12 - Chatting Functionality30:14
Learn to implement chat with two collections, chats and chat messages, query users excluding the current user, create chats, and manage messages with last message and time updates in FlutterFlow.
Backend - Part 13 - Doctors Dashboard1:06:56
Create a doctor dashboard for a FlutterFlow medical booking app, enabling doctors to view bookings, join meetings, and manage profile pictures, availability, and meeting links.
Backend - Part 14 - Admin Panel49:20
Fix and enhance the doctor dashboard and build an admin panel in FlutterFlow, showing bookings, appointment times, and user roles for doctors, patients, and admins.
Backend - Part 15 - Web Publishing - View and Download Codes - Commit to Github12:54
Discover how to view and download your FlutterFlow project code, connect a GitHub repository, download the APK, and publish a web version with SEO settings and version control.
Backend - Part 16 - Cloning the Project6:22
Clone and share your FlutterFlow medical booking app by publicizing the project, then learn to resolve clone errors, configure Firebase, Firestore, Stripe, and deploy indexes and rules.

Requirements

No programming skills need. No prior nocode skills needed. This course is beginner friendly.

Description

In this course, you will learn how to build a medical booking app that allows users (patients) to search and find doctors and book appointments with them, pay with Stripe the get on a video call with them either with a link to Google Meet or in-app video call.

The users will also be able to track their bookings and chat with Doctors.

You will learn the following and much more:
How to convert UiUx designs in Figma into Frontend in FlutterFlow

How to execute CRUD - Create Read Update Delete - in your FlutterFlow project with ease

How to add a Stripe payment gateway for receiving money

How to implement in-app chatting functionality in your project

How to implement in-app video calling functionality in your FlutterFlow project
How to set up Firebase rules

How to publish your app to the web

How to implement conditional visibility

How to make your app responsive across all mobile devices

This course is totally beginner-friendly and you don't need to have prior knowledge of Nocode development to get started but you need to have enough enthusiasm and willingness to learn and practice what is taught in this course and apply them to your own projects.

Who this course is for:

Beginner to Professional Mobile App Development without coding using FlutterFlow