Google Firebase is a Backend-as-a-service (BaaS) development platform that enables users to create iOS, Android, and web applications. This is Google’s flagship offering for app development. This BaaS provides developers with a variety of tools and services to help them improve, grow, and develop high quality apps. Look at Firebase as your server, your API and your datastore, all wrapped together on one platform. Its generic writing allows you to modify it to suit most needs. Start designing your first Firebase app by downloading the platform here, for a quick and easy app creation.
Welcome to our latest GeoMarvel Live! tutorial series on getting started using React & Google Firebase to create an application. Join Sean Spiesman, an application developer here at GeoMarvel, as he walks users through the process of creating a basic travel blog application and teaching users how to interact with Firebase‘s Cloud Firestore throughout the process. Explore the videos below in this 7 part series to find out how to edit and create a new web application using React and Firebase. Enjoy.
In Part 1 of this tutorial, we demonstrates some of the basic steps of starting an application. To begin, users must first install Create React App, a command line command tool, that sets up a single page application quickly and easily. We then set up specific files and folders that users will be working in, such as the HomePage and a components folder. To rounds things off we installs Bootstrap, a CSS & JavaScript-based framework for development, designed to help you create topography’s, forms, buttons, and other interface components. Watch Sean as he utilizes Bootstrap to help create a Navigation Bar. View Part 1 to follow along.
For Part 2 of this series, we follow along as Sean demonstrates how to utilize Bootstrap components in conjunction with React hooks to create a to-do list for our application. Along with the to-do list, we will create an input field for users to add text and a submit button for those specific items to be added to the list. The final item that will be reviewed in this video is how to create a delete button for submitted items. Check out Part 2 to see how we add these new features and functions to our application.
In Part 3 of this video series, Sean demonstrates how to properly setup and connect your Firebase account to your web application. It should be noted that users must have a Google account to move forward with this process. Within this video we see how users have the ability to utilize the Firebase Config object details including API and other important items. We also learn how to set up a folder for all of the Cloud Firestore service files. And finally we familiarize ourselves with how to create a new database within the Cloud Firestore. For all the details check out Part 3 of our Firebase video series.
For Part 4 of this 7 part video series, we follow Sean as he demonstrates how to pull in data from Cloud Firestore, and update the webpage that we are working in, to view that data. We see how to modify data within the Cloud Firestore, so we can tell what the data will look like on the front end of our application. Once data has been added to the web app, the item components can be updated and modified to what the end result will look like. Follow along to see how Sean is able to pull in data from the Cloud Firestore while updating the application.
In Part 5, we follow Sean as he demonstrates how to delete specific items from within the Cloud Firestore. To accomplish this, we learn how to write a new function that will perform this action. After the new function has been written out, the delete button feature now works as designed and eliminates selected item components from the application. For more details on how to delete specific documents from Cloud Firestore, make sure to check out Part 5.
In Part 6 of our “Utilizing React–Google Firebase” video series, Sean demonstrates how to move the form component over to a new page, and how to create an update function. The first thing we do is update our to-do list to say Recent Updates and create a New Post button to go along with it. Within the New Post button users have the ability to add a custom title, and description. This data is then sent to Firebase to be added as a document. Once that Document is added to the Cloud Firestore, you can see that any data being added to the blog form updates in the Cloud Firestore automatically. For a full overview of this process, check out Part 6.
To wrap things up, for Part 7, Sean demonstrates the final CRUD operation and updates data within Cloud Firestore. CRUD is an acronym that stands for Create, Read, Update, and Delete. These operations can be performed with most traditional database systems and they are the backbone for interacting with any database. For all the final details and to see how we round things out, make sure to check out part 7 of this tutorial series.
Thanks for tuning in! Hopefully you found this 7 part video demonstration informative and enjoyable, and maybe it will even spark an idea for you to create your very own React–Google Firebase project.
Are you looking to build your first app, or in search of a custom-built app for your organization? Look no further, GeoMarvel builds custom applications to fit your business needs. Reach out to our industry experts to start a conversation about your unique needs today.
