About | Gifs | Getting Started | Technologies | License
Application clone for educational purposes only
Developed with Nextjs
, NodeJs
,Tailwindcss
, Firebase v9
, Recoil
NextAuth
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.
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
)
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.
- Login (Firebase Authentication)
- Post (Firebase Store)
- Like a post
- Comment
- Clone this repo using
[email protected]:eulazzo/instagram-clone.git
- Move yourself to the appropriate directory:
cd instagram-clone
Run npm install
to install dependencies- Create a
.env.local
file and add theGOOGLE_CLIENT_ID
,GOOGLE_CLIENT_SECRET
from firebase and forNEXTAUTH_URL= http://localhost:3000
- Run
npm start
oryarn start
to start the web application
Back-end | Front-end |
---|---|
Firebase | ReactJS |
next | |
tailwindcss | |
Recoil | |
Prettier |
This project is licensed under the MIT License - see the LICENSE page for details.