Create an Instagram-styled reels progressive web app with React and Firebase-Firestore Database
Check out what we will be building at this demo!
Step One: Sign up for Firebase
Firebase is an awesome database-as-a-service provided by Google and a great choice for developers just starting off. Everything from static hosting, authentication of users, file uploads, and real-time data synchronization is packaged together in convenient SDKs. If you don’t already have a Firebase account, you can sign up at Firebase.google.com.
Once you sign up, navigate to your console and create a new project. Once your project spins up, create a new web app and name it anything you want. For the purposes of this tutorial, we have named our app “wikacy-reels.” Be sure to include Firebase Hosting when prompted, and create a new site for your app. You can name your site anything you want. I will show you how to configure your app to deploy to the site you set up later.
Step Two: Download or clone the source code for our app from Github.
The source code for this app is in our Github Repository here: https://github.com/TheWizardofWikacy/wikacy-reels
You can either download the .zip file from the repository, or use git clone from your command line
git clone https://github.com/TheWizardofWikacy/wikacy-reels
Step Three: Add your firebase configuration.
In you Firebase console, navigate to your newly created web app and click the gear icon to go to the settings for your app. Scroll down the page to where you see your integration credentials. Click on the “config” radio button and copy your configurations. It will look like this:
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "your-api-key",
authDomain: "your-auth-domain",
databaseURL: "your-database-url",
projectId: "your-project-id",
storageBucket: "your-storage-bucket",
messagingSenderId: "your-message-sender-id",
appId: "your-app-id",
measurementId: "your-measurement-id"
};
Open your favorite code editor and open the folder containing the source code cloned from our repository. You can use any editor you like. I use VSCode.
In the SRC folder, open the firebase.js file. It should look like this:
import firebase from "firebase";
const firebaseConfig = {
apiKey: "your-firebase-api-key",
authDomain: "your-firebase-auth-domain",
databaseURL: "your-firebase-database-url",
projectId: "your-firebase-project",
storageBucket: "your-firebase-storage-bucket",
messagingSenderId: "your-message-sender-id",
appId: "your-app-id",
measurementId: "your-measurement-id"
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
export default db;
Replace the above placeholders with your own credentials from your Firebase Console.
Step Four: Set up your Firestore Database and add data
In your Firebase console, click on “Cloud Firestore” in the side drawer and then click on “get started” to set up your Firestore noSQL database. When prompted, select to start in production mode, then navigate to your rules and change “false” to “true” or just paste the below code within the area they provide for your database rules.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
Later on, I will demonstrate how we can change the rules to only allow logged-in users to view or to write data, but for now, we will start with the above rules, which allows anyone to view the public data.
Next you will want to add some reels so that when you run the app, we will see some videos. We have structured the data for the reels like this:
"reels " :
id: "some-random-id"
"avatarSrc" : "url to a user's avatar",
"channel" : "username or channel",
"likes" : "number-of-likes",
"shares" : "number-of-shares",
"song" : "name-of-song-in-video",
"url" : "url-for-the-video"
You will have to start by creating a new collection in your Firestore database with the title “reels,” then click to add a new document. For the id, click to generate an auto id, which will be a unique string to serve as an identifier for each document in the collection. Add a value for each of the fields above, the most important being the url to a video.
In the next part we will create an interface for users to login and upload reels. But for now, lets get the basic interface for playing the reels together.
Step 5: Spin up your development server.
If you do not already have node.js installed on your machine, be sure to install it here: https://nodejs.org/en/download/
Navigate to the root of your project directory and open a command prompt window. Enter the below command and hit enter:
npm install
The above command will create a new folder in your root project directory named _node_modules_ and will install all the dependencies for the app. Once the dependencies are installed, run the following command to spin up a local development server:
npm start
A development server will host your app locally on port 3000. A browser window should automatically open to your app. It may take a minute, but once finished you will be able to see your videos. Try adding three or four more videos and data so you can scroll through the videos just like you would on Tik Tok or Instagram.
In the next step I will show you how to customize your app, change the images and icons to your custom brand, and deploy to Firebase Hosting.
You can view a demo of this app here: https://wikacy-reels.web.app
Over the next few days, we will be adding user sign-up, video uploads, and an interface for trimming videos and adding effects using the React-Spring Bottom Sheet library and Cloudinary media transformations.
Original Post: