Build a SwiftUI chat app with Firestore from scratch

💬 Build a chat application with real-time updates from scratch in SwiftUI, with Firebase Firestore
In this tutorial, you'll learn how to code all the components required that make up the chat view, create and configure a Firebase project, connect Firebase to the app, and read from and write to Firestore, with real-time updates - meaning the chat conversation will be updated instantly when a new message is added to Firestore.

🔗 Links mentioned in the video:

👩🏻‍💻 Source code on Github:

✏️ Watch without ads, and access the written version and source files:

🪄 Join our channel and unlock members-only perks:

👋🏻 Let's connect!

🎞 Video timestamps
➡ Part 1 - Create project, components and model
0:00 - Introduction
1:40 - Create Xcode project
2:51 - Update Assets folder
4:34 - Code the TitleRow
9:03 - Create the Message model
10:31 - Code the MessageBubble

➡ Part 2 - Finish UI and configure Firebase
18:34 - Code the MessageField
23:24 - Create Firebase project
26:01 - Add Firebase SDK and initialization code
28:29 - Create Firestore database
29:34 - Add data to Firestore

➡ Part 3 - Read and write with Firestore
32:07 - Call the data with real-time updates
40:13 - Writing to Firestore
43:42 - Scroll to last message
48:04 - Conclusion

#firebase #firestore #chat #app #tutorial

[ID_Station]

Oh my girl is back with another video that we can actually take and turn into our own thing. Amazing

[gs]

Nice video! id love a second part where you could add users and enable recieving messages and authentication

[markfrancisco]

This girl is on fire! Amazing, well done. Can tell how super smart this girl is!

[enriqueavina]

Your tutorial has been so incredibly helpful for a new Swift developer. Thank you so much! So concise!

[pat_trudel]

Love this channel, great videos

I am advanced in UIKit but enjoy these videos to learn more about SwiftUI

Keep it up! (Also from Montreal 🇨🇦)

[rendem]

You’ve made it look so easy, this is something I can actually try and recreate. You showed where everything is coming from. I hope you have a part 2 for the receiver to message back and also to have a group chat.

[random_things__u]

Good tutorial and I have learned quite a few things, thank you. On the other hand this is only the half of the story, you could go ahead and show a list of messages, how to manage 'received' in real life (cause what happens when the other person recieves the message), how to stop listening the snapshot and create a new listener for another chat etc...

[manmathanmary]

As you mentioned, it's really fun learning. thanks !

[happyfox]

Great tutorial, you explain everything very good!

[codejunkie]

Easiest tutorial I've seen on this topic. The next logical step would be a tutorial on how to add users and text specific users...please.

[vebbis]

The design on the view for the chat is amaizing

[paschal]

Excellent tutorial 👊👊 keep up the 👍 work

[stephaniewagstaff]

I have been trying to learn SwiftUi for almost 2 years self taught. I come from no background in this field, I am an interior designer by trade but I have a dream. I have been close to giving up on myself after Covid took a part of my brain… I have been stumbling trying to find the next lesson but I pray and have faith. You know the odds of finding a female programmer…. And then one with this same name?? I’m energized to start this journey with you today and am so glad you put it out there. I’m naive in so many ways, for instance if I have a ? Do I put it here for everyone to see? I haven’t really used YouTube ( I know that’s crazy…I’m 50 lol).

[carmineloschiavo]

Stephanie as usual you did a great job 😃. I am still fairly new to app development but this is really helping me out! I can’t wait for the next app to try. 📱💝💻

[AllanZhang]

What a great video. Super helpful and really well explained.

[carterhawkins]

I loved how simple the tutorial is. I just have a quick question. How could you delete messages and also edit the messages?

[hobinh]

Thank you! How to load more messages when scroll to top but keep scroll position.

[octopro]

Hello DesignCode, I have a question. So basically the place where you type what you want to send the "Enter message here" thing, the background is black (I'm using dark mode) when I switch dark mode off it becomes white (it's not the rounded box that says "Enter message here" it is the background behind that which is a rectangle

[ESquirez]

Brilliant, this was exactly what I was looking for

[joe-su]

Great tutorial! May I ask how to load the history message bubbles to the top of the page?