Instagram clone using React.js, Firebase, Material UI, React Router DOM, React Context API 🚀
Built an Instagram clone using React.js, Material UI, and firebase. I have developed this project with the help of clever programmer youtube channel.
React.js allows you to write JSX (Javascript XML) code which is similar to HTML syntax but not HTML, it’s just Javascript. It enables us to develop component-based applications and hence we can reuse the component anywhere in that project. These applications are SPA’s (Single Page Applications) and React internally uses Virtual DOM to make the rendering faster.
React Router DOM allows you to route/move to another page. They are like anchor tags in HTML but with the difference that they do not reload the page when the user moves to another page.
React Context API allow you to pass the data from a parent component to a child component more efficiently. Generally, we use props to pass data from parent to child component. But for large-scale applications, if we use the props approach we have to pass data through every other component in its hierarchy to reach the child component(i.e, Prop Drilling).To avoid Prop Drilling we use context API which allows us to send the data without passing it through every other component.
Material UI has pre-built designs for buttons, menus, grid systems which makes your work easy and faster.
Firebase allows you to develop high-quality apps. It has many services that are hosted on the cloud-like DB storage, Hosting, Authentication, Analytics, etc. And would scale as the application grows.
This project includes the Home page, Login and Sign up Modal and Add post page. For the front end, I have used React.js, Material UI, and React Context and for the back end, I have used firebase and also for authentication.
There were a couple of challenges that I faced during this project.
One of them being Integrating firebase in my project and implementing the authentication functionality and to upload the post to the firebase and to display it on the app.
The other one was understanding React context API and how the actions dispatched and how to provide the state to all the other components using context.
Now Let’s Talk About Firebase and Authentication
What is firebase?
Firebase allows you to develop high-quality apps. It has many services that are hosted on the cloud-like DB storage, Hosting, Authentication, Analytics, etc. And would scale as the application grows.
We will look at firebase authentication.
1.You can go to the firebase website and create your account.
2. Click on “Get Started” :)
3. “Add a new project”
4. Enter your “project name”
5. continue… and you can enable “google analytics” and choose the default account for it as directed and click “Create Project”.
6. Once the project is created, it will show the project dashboard with authentication, database, and hosting features.
7. click on the “</>” icon to register the app.
8. Enter a name for the app, click on setup firebase hosting if you want to host your project on firebase, and add a unique name for the app.
9. Ignore the next step and click “next”
10. If you are using firebase for the first time install firebase globally on your system. But before that make sure you have installed the latest version of Node.js after that click “next” (For windows). For Mac and Linux you can use the “sudo” keyword before the command to install the tools as it requires superuser permission. (ex: sudo npm install -g firebase-tools)
11. Ignore the next steps we will talk about it later. Click “next” to proceed.
12. Now Inside your React project you need to install firebase. Inside your project open a terminal and type “npm i firebase”. If you are on Mac or Linux you have to use “sudo npm i firebase”.
P.S. you can create a react app using the command (Make sure you install Node.js before that):
“npx create-react-app app-name”
13. Go to “project setting” and click on it
14. Scroll to the bottom and click on “config”.
Copy the code inside the clipboard and inside your react project go inside the source folder and create a file named “firebase.js”(This will be our config file).
15. Inside the firebase.js file add the configuration properties inside the below red box. This below code is initializing the app
In the above code, we are passing the config values to the initializeApp() function. Then from that firebaseApp we get DB service and from firebase, we get auth and storage and we store them in the variables.
The “auth ”service is used for user authentication.
16. Go to the authentication menu and enable sign-in-method of email and password.
17. Here is the code for the Signup page. On click of the Signup Button a modal will open and where you can add username, email, and password. On the change of these input values, we will set the state of username, password, and email using useState() hook. After submitting the form signUp() will be called (Refer Below Code).
Inside of the signUp():
i. First we will prevent the default behavior of the form or else it will cause refresh when we submit the form.
ii. Use the “auth” form config file (firebase.js) and call the function createUserWithEmailAndPassword() and pass email and password in it which is stored in the state.
iii. This function will return a promise so we consume it using then or if there is an error we use catch to display the error.
iv. In the then part we get the authUser, which contains the user credentials and then we update the profile with display name from username input.
18. Similarly, Sign In process is easy too!
i. For signing in with email and password you just need to pass the username and password to auth’s method signInWithEmailAndPassword() and pass email and password value into it and the rest will be handled by firebase. 😄
Plugins used
@material-ui/core
@material-ui/icons
firebase
react-router-dom
