Build A Booking Calendar App From Scratch (Step by Step Tutorial)

Рет қаралды 41,992

Күн бұрын

► Exclusive NoCode Content, Tutorials & Support: / jamesnocode
► Comprehensive FlutterFlow Training & Private Community: masteringflutterflow.com
► Comprehensive Supabase Training & Private Community: masteringsupabase.com
In today's video, we're going to build a Calendar Booking App Step by Step in FlutterFlow, a powerful no-code app builder. We'll build from scratch, step by step in this comprehensive no code app building tutorial.
00:00 Intro
01:00 Architecting the app
02:46 Setting up the database
05:09 Building the app
05:35 Setting up Firebase
18:16 Creating the profile page
27:42 Booking functionality
43:34 Calendar functionality
47:30 Setting up the booking flow
54:24 Building the past/future bookings page
1:03:23 Setting up the provider profile page
1:10:20 Final thoughts
1:10:46 Get more content

Пікірлер: 93

@jamesnocode Жыл бұрын

👍VIEW/CLONE THIS FLUTTERFLOW APP (and all my FlutterFlow/NoCode apps), get access to live streams, Q&As and an exclusive behind the scenes content, in-depth masterclasses and support my work: www.patreon.com/jamesnocode 👍GET MY NEW TRAINING - MASTERING FLUTTERFLOW: masteringflutterflow.com

@michaelshver787 Жыл бұрын

Amazing tutorial, thank you very much!

@oescobardo Жыл бұрын

This content helped so much... i'm gratefull, James. Thank you, brother.

@avishsharma8852 Жыл бұрын

I was just thinking of possibly integrating and here you go...seems some cosmic connection..cheers

@SUDHANSHU934 Жыл бұрын

I can't thank you enough for this masterpiece. ❤❤

@dubc3908 Жыл бұрын

thank you so much !!! so much values!! i was looking for that for one of my project.

@gmostafaali 5 ай бұрын

It's an excellent tutorial which i was looking for, thank you James.

@emrroquina Жыл бұрын

Amazing tutorial!!

@Bagushr Ай бұрын

Awesome tutorial

@Anatole0824 7 ай бұрын

IMPORTANT TIPS: if you have a problem with the booking just after the calendar phase it must be a problem of your firestore rule setting. You can modify it on flutterflow. You need before deploying the rules to select the authentificated user to create for your subcollection bookings.

@mytube1000javed 5 ай бұрын

Great. I was searching for a medical booking app. That facilitates doctor patient interaction, chat, video call and consultation.

@smaguloveka Жыл бұрын

thank you so much⚡

@nocodeenpractica Жыл бұрын

Wooow simple amazing!!!

@0Amshalem Жыл бұрын

Hey, great tutorial! Something was missing on how to cancel or change an appointment, and also the admin panel for the barbers.

@EbenGh 11 ай бұрын

Have you been answered or has it been resolved? I have the same question

@nevershoutneverrr132 11 ай бұрын

Another great video. Do you have one on how to build a star review bar and save the data to a backend?

@sbessot Жыл бұрын

Thanks for this video. Is it possible to populate calendar to see which days are full ?

@ProfeMarceloSegovia 11 ай бұрын

Hello, excellent video, thank you very much. I have a question, how can I hide the review button if it has already been used?

@manamejeff2087 9 ай бұрын

I love this video, you are the fucking bestest god level no code creator. I love you man ❤

@KrisFiedalan 2 ай бұрын

Thank you for this tutorial, James! Very helpful. How do I show the confirmed bookings of the barbers when they are logged in the app?

@itsmemario1514 Жыл бұрын

Hi I love you videos and this right here is a great tutorial could you maybe tell me auswelle how I can do a similar booking widget to yours only that you can also book time ranges like from 5am to 7 pm or the 5. of may to the 10. thanks you so much in advance

@AristonJumagbas-jp4xt 10 ай бұрын

thanks James for the great tutorial video and works fine with mine but the problem was all of my providers shares the same reservedslot time and availability, what might be the solution or what have I missed, thanks a lot bro.

@andeoyebrayan8189 11 ай бұрын

hello thanks for the tutorial can you make a tutorial on bus seat ticket booking

@HossamALkhouly 6 ай бұрын

Thank you james , can you please help me make the same function with supabase ?!

@enriquedavidvidalroman6980 10 ай бұрын

Hello nice video! I have a problem with the database, when i want to book something, i cant, but if i book myself, it works...

@ediezersky6379 4 ай бұрын

hey James thanks for the great video i was wondering if i can maybe get a copy of the code you used I'm struggling a bit with finding one that works

@d99sum 3 ай бұрын

Hi James, Amazing tutorial. I am trying to adapt the code to break down to the days of the week and different start and finish times for each day, have you got any advice on how to do that?

@antoniocaporrini4160 2 ай бұрын

Hey great video but how do i add a cancel booking feature ?

@kayzchronicupturn1015 Жыл бұрын

James, when I press the book button and check in the database, the reservation is indeed made, but when I press the button, the time chosen in my application is not removed from the screen. What can I be doing wrong? thank you.

@tkmx797 10 ай бұрын

This was helpful but the search bar functionality is missing, I was interested in seeing how you query the database to show only the specific barber you're looking for.

@dimitrischristodoulou9319 4 ай бұрын

What did you use for building the flow

@avishsharma8852 Жыл бұрын

@james - need your help please. Can I make multiple API calls dynamically? For example, the first api call tells there are 10 XYZ keys. Then we need to make 10 api calls to get details of each XYZ key. Similarly, there could be 80 XYZ keys and we will need to make 80 api calls. Can this happen dynamically in FF?

@sabelokingterrence3442 Жыл бұрын

what language did you use to write the custom code?

@bemfacilaprender 5 ай бұрын

excellent transfer of knowledge, however I found the teaching very quick and vague in some details, apart from the fact that the editing of the video was also terrible for finding out more details about actions, database queries and other things. Do those who subscribe have classes with more detailed videos? Videos with better editing, better knowledge transfer? Other than that, excellent tutorial.

@Rohan34_1 Жыл бұрын

Can you create backed for shop app with staff management i mean admin pnal were we can control email products request and everything from that admin pnal there is no video this one for flutterflow

@0Amshalem Жыл бұрын

Yes this is will be great!

@EbenGh 11 ай бұрын

Have you found an answer? I have same question

@Rohan34_1 11 ай бұрын

@@EbenGh nope they all want sell those that's why we can't find any video of admin pnal

@EbenGh 11 ай бұрын

@@Rohan34_1 I get you

@scenecliponly Жыл бұрын

Hey can you help me do combine text I can't do it bec it's like idk what to do with text 1 and text 2 I wanna put specific value and from various something

@lyaziddjaidi2897 13 күн бұрын

while im on test mode, I try to login or signup but it never works. Firebase is fully set up as on the video. any reason why ?

@satdevlpr 8 ай бұрын

Thanks.. please can you tell me in your all projects which application do you use to create flow diagrams shown at the start of each project?

@sweetdix 6 ай бұрын

Looks like Whimsical

@dongwonkwak.official Жыл бұрын

Anyone can share the custom code?

@anthonyidiata3457 4 ай бұрын

Please

@Finesse69 4 ай бұрын

At 46:26 I followed the steps for calendar functionality however, after selecting the date page state doesn't change and remains the same. Maybe it might be because I used different custom code before.

@user-oc2rk7ex7b 6 ай бұрын

editing the profile configurations are missing..

@AaronTran-qp4pl 2 ай бұрын

A problem I'm experiencing is that when a time slot is booked on one day, it becomes unavailable on other days as well. Any idea?

@Z_W4 6 ай бұрын

I have a problem at 26:00 where I set the role == “provider” but when I run the test the record is only displayed when consumer is logged in not provider. I’m new to this so can anybody help?

@arkfootballclub Жыл бұрын

Hi James how would you go about letting the user dynamically set their work times dynamically rater than hardcoding in the code.Thankyou in advance. You are a life saver.

@EbenGh 11 ай бұрын

Have you been answered or do you have an answer now? I also have the same question.

@arkfootballclub 11 ай бұрын

@@EbenGh Hey wossap.Sure its actually easy.Create a variable and pass it where you set time in the code.When you call it in the app it will ask you for the variable and you can then pass it from a backend. Hope that helps

@EbenGh 11 ай бұрын

@@arkfootballclub thank you very much. I will try it out and get back with a feedback

@brandibooth 2 ай бұрын

Hello I have been watching you on my journey with this. I have chosen supabase partly in watching your tutorials. HOW CAN WE BUILD A BOOKING CALENDAR WITH SUPABASE AS BACKEND? Please help! Also if I join your community is there insight for that there?

@bonpolo8392 2 ай бұрын

Ive tried to copy the custom code@ 33min after copying the code try to save the code, I got a message "The function is empty or cannot be parsed. Make sure not to modify code outside of the designated area". , even asking Chat GPT to rectify the code even trying to test the function I get a message "Compilation error: Info: Compiling with sound null safety lib/main.dart:49:1: Error: Expected a declaration, but got '}'. } ^" Error: Compilation failed." what could be the problem

@tradingdocuments 6 ай бұрын

appreciate this tutorial. One thing i wanna say you is Time is showing current time for every day. i.e example if my booking slot is between 8am to 2pm and current time is 11am then while booking all days its showing time above 11am only. how to make booking of morning 8am times on subsequent days?

@misaelcorralesontiveros5822 4 күн бұрын

Same problem here

@muhdhamarudin2162 Жыл бұрын

Hi James! Thanks for the great video tutorial on FlutterFlow. I followed the steps for the "Calendar functionality" part, but I'm facing an issue where the selected date and time are not showing up. I'm using the page state startDate as mentioned at 46:37. Could you please guide me on how to fix this? Thank you for your help!

@italozell 6 ай бұрын

same issue here

@italozell 6 ай бұрын

make, to update, the widget needs to make requisitions to DB, so make filters to pageState data equal to bookings data, this way the widget will make new requisitions searching for the Date of the pageState

@Finesse69 4 ай бұрын

I have the same issue

@kayzchronicupturn1015 Жыл бұрын

Hi James, thanks for your videos, I would like a tutorial where we can create services and that each service has a schedule and a specific time, and that customers can book at the same time at the same time. Something similar to what the wordpress plugin AMELIA does. Do you think you can build it?it would be Gold.

@EbenGh 11 ай бұрын

Sure, I have the same question. Do you have a solution now?

@avishsharma8852 Жыл бұрын

Also, there is payment issue to access Patreon …one it messages to charge $0 and not $5, otherwise possible issue to charge Indian card.

@tonytornado260 10 ай бұрын

im stuck on 32:55 it keeps on saying code wrong genarated anyone how can help me out

@DeepakSharma-xv8rz Күн бұрын

You are creating great content James... but just a piece of advice when we edit your videos please don't do that because there are times while editing you also edit some important parts in the video & that cause us more errors & not finding the right solution except that you are awesome... keep doing the good job

@jamesnocode 14 сағат бұрын

Thanks bro - will do bro

@mokyuundigital Жыл бұрын

Hey James, love your videos >< Quick question, how do I edit the custom function to change the booking to 15 minutes instead of an hour. Cause I managed to make it show 15 minutes intervals on the time but when I click book on 9:15 the whole hour disappears instead of just 9:15. Thank you :)

@mokyuundigital 11 ай бұрын

Anyone able to help me figure it out ? I'm totally new when it comes to coding >< haha

@antoniocaporrini4160 2 ай бұрын

@@mokyuundigital hey did you managed to figure it out?

@goncalomartins4459 2 ай бұрын

I copy the code line by line but i got erros don't know why...

@MM-zj1su 10 ай бұрын

when you apply the backend query (around min 27:00) I get this message when i try to log in as a consumer PERMISSION_DENIED: Missing or insufficient permissions. It's not working this clearly as something to do with the permission on firebase database. Also you go way too fast man. Anyone as the same issue?

@melvinjongen1697 8 ай бұрын

did you know how to fix it ? i have a problem 24:45 when in set the backend query it doesnt show do i have to set something in firebase or so ?

@johnsimmons2035 7 ай бұрын

I have the same issue - after setting query for the list and testing the app, I just get an empty list with PERMISSION_DENIED: Missing or insufficient permissions. At that point I’m stuck… can’t progress with the app tutorial

@melvinjongen1697 8 ай бұрын

the backend query doesnt show from creating the profile page do i have to set something in firebase ? does anybody know im new to this @ 24:45

@Z_W4 6 ай бұрын

Did you sort the problem out? I also have a problem where I set the role to provider but when I run the test the record only appears when I’m logged in as consumer. No record appears on provider.

@zaphirecrucis5406 9 ай бұрын

43:45 (es un marcador)

@ayeshasaboora6782 Ай бұрын

is this a web based app or phone based app?

@youtuber9991 10 ай бұрын

Amazing, thank you!! Can I get the name of the diagram app you use?

@sweetdix 6 ай бұрын

I think it's Whimsical

@youtuber9991 6 ай бұрын

@@sweetdix thank you!!! Been looking for a while

@omarzhalel9096 Жыл бұрын

⚡⚡⚡🔥

@joeltiago7257 Жыл бұрын

Awesome

@davidesoncin2399 3 ай бұрын

Chat GPT generates a completely different code than what you see in the video. Yet I entered the same request ;(

@jamesnocode 3 ай бұрын

Yeah, that's the nature of chat bots: they may generate different code with each same/similar request.

@Alpagut40 3 ай бұрын

You can ask AI something and later ask the exact same question and he will give you a completely different answer, but leading to your question with an answer.

@davidesoncin2399 3 ай бұрын

I was able to, I used another AI and understood some concepts. :)