Instagram clone with REACT

A copy of the Instagram app to learn and improve coding skills with the React platform. (Next.js, Tailwind CSS, Firebase v9, NextAuth, Recoil)

Setting up Tailwind CSS in a Next.js v10+ project:

yarn create next-app --example with-tailwindcss with-tailwindcss-app

# Run the application:
npm run dev

What I have learned in this project are:

1. Define images.domains config in next.config.js if any pages that leverages the next/image component and we passed a src value that uses a hostname in the URL. _{Read more...}
2. Adding custom styles to Tailwind and using CSS and @layer _{Read more...}
3. Using Faker-js to generate massive amounts of fake (but realistic) data for testing and development. _{Read more...}
4. Build a custom authentication screen using NextAuth _{Read more...}
5. Using SessionProvider, we have to wrap entire application to allow us to keep our session state. _{Read more...}
6. Recoil A state management library for React. _{Read more...}

Dependencies

• Tailwind React Native Classnames link
• @faker-js/faker link
• Tailwind Scrollbar link
• Tailwind Scrollbar Hide link
• Next Auth link
• Firebase link
• @headlessui/react link
• React Moment link
• Moment module

Short Demo

https://user-images.githubusercontent.com/7660220/187562398-d4867a59-74a4-4e29-84c9-cb8d3c3cc5f8.mp4

_{Photos: https://pixabay.com/}

Note

Use SessionProvider to wrap entire application and we have to wrap any part of our application using useSession in this provider.

import '../styles/globals.css'
import type { AppProps } from 'next/app';
import { SessionProvider } from "next-auth/react";

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  return (

    <SessionProvider session={session} refetchInterval={5 * 60}>
      <Component {...pageProps} />
    </SessionProvider>

  )
}

export default MyApp

How to use Recoil

1. In _app.tsx, we need to wrap entire code with RecoilRoot ```tsx ... import { RecoilRoot } from 'recoil';

... <SessionProvider session={session} refetchInterval={5 * 60}> <Component {...pageProps} /> ...

2. Need to create Atoms contain the source of truth for our application state. like: `/atoms/modalAtoms.js`

We give our atom a unique key and set the default value to any required values
```tsx
import { atom } from "recoil";

export const modalState = atom({
  key: "modalState",
  default: false
});

3. To read the contents of this atom, we can use the useRecoilValue() or useRecoilState() hook in our TodoList component: ```tsx ... import { useRecoilState } from 'recoil'; import { modalState} from '../atoms/modalAtom';

export default function Header() {

const [open, setOpen] = useRecoilState(modalState);

return (
  ...
  <div onClick={() => setOpen(true)}>
  ...
)

}

```

DISCLAIMER:

This code is developed for learning purposes only. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this code for education purposes.