eulazzo / instagramclone

[ Nextjs Project ] Instagram Clone With React/nextjs, Tailwindcss,Firebase and Recoil.

Instagram - For educational purposes only

About    |     Gifs    |    Getting Started    |    Technologies    |    License

About the project

Instagram clone

Application clone for educational purposes only

Developed with Nextjs, NodeJs,Tailwindcss,
Firebase v9, Recoil NextAuth

What's Recoil ?

Recoil is an state management librarie, like Redux or Context APIs. But Recoil unlike Redux is more easy to set up. Created by Dave McCabe, recoil provides a global state so all components in a react application can share states easily and it is minimal compared to Redux with no boilerplate code setup needed.

According to the official documentation the two core concepts of recoil is Atoms and Selector.
Atoms are units of the global stated provided by recoil, components can access and subscribe to changes made to them. Selectors in other hands with them, we can transform states either synchronously or asynchronously, and components can also access and subscribe to.

Why use Recoil ?

In cases where Redux is not that necessary recoil has advantages as, for example, is a minimal and there are no boilerplate code to get started. Diferent from Redux that require write a ammount of code to set it up. Recoil just like Redux, provides a global state, with recoil we wont have to pass state as props down to childreen components in order to share them between components (a concept know as prop drilling)

Recoil in this instagram clone

So..in the header component when the user clicks on the plus button for upload an image. I need to be able to tell a global store that inside the app an action occurred in the header component. I mean, i cant just have the plus button and then some state at the header level because doesn't work. If i do that, on the header level i will have some state which means that if i click on the plus button to upload an image that state it is set to true so the modal is opened. So far so good, but firstly how do i go a level up? Because the header component is rendered on the Home component i can't lift state from the component. State is one way thing, it only go compoment and could pass down but we dont want to do that. For that reason, a global Store it's necessary. So...tipically the way it's works is if we had a "modal state" by default is gonna be false we dont want the modal to be opened all the time, when somebody clicks the litle plus button on the header we are gonna trigger these global store variable which has the modal state inside of it trigger to true, now wherever i'm on the app i should be able to access and change the value.

Features

• Login (Firebase Authentication)
• Post (Firebase Store)
• Like a post
• Comment

App features so far

Login and Making a Comment

Making a post

Leaving a Comment on a Post

Getting started

1. Clone this repo using [e-mail]:eulazzo/instagram-clone.git
2. Move yourself to the appropriate directory: cd instagram-clone
3. Run npm install to install dependencies
4. Create a .env.local file and add the GOOGLE_CLIENT_ID,
   GOOGLE_CLIENT_SECRET from firebase and for NEXTAUTH_URL= http://localhost:3000

Getting started with the frontend

1. Run npm start or yarn start to start the web application
   

Technologies

Back-end	Front-end
Firebase	ReactJS
	next
	tailwindcss
	Recoil
	Prettier

License

This project is licensed under the MIT License - see the LICENSE page for details.