Skip to content

Commit

Permalink
💠 Instagram 2.0 with REACT.JS(#17)
Browse files Browse the repository at this point in the history
  • Loading branch information
@SashenJayathilaka
SashenJayathilaka committed Oct 13, 2022
1 parent f2a0bd1 commit ef2be8c
Show file tree
Hide file tree
Showing 24 changed files with 2,828 additions and 1,201 deletions.
233 changes: 10 additions & 223 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,221 +1,24 @@
# Instagram 2.0 Clone With ReactJs!

<a href="https://instagram-clone-3l36.vercel.app" target="_blank">![](https://img.shields.io/website-up-down-green-red/http/monip.org.svg)</a>
![](https://img.shields.io/badge/Maintained-Yes-indigo)
![](https://img.shields.io/github/forks/SashenJayathilaka/Instagram-Clone.svg)
![](https://img.shields.io/github/stars/SashenJayathilaka/Instagram-Clone.svg)
![](https://img.shields.io/github/issues/SashenJayathilaka/Instagram-Clone)
![](https://img.shields.io/github/last-commit/SashenJayathilaka/Instagram-Clone)

<!-- Screenshots -->

### :camera: Screenshots

<div align="center">
<a href="https://instagram-clone-3l36.vercel.app" target="_blank"><img src='https://user-images.githubusercontent.com/99184393/188783926-2478a323-2472-4b4e-ae49-583e88700848.gif' alt='image'/></a>
</div>

## <a href="https://instagram-clone-3l36.vercel.app" target="_blank">LIVE DEMO 💥</a>

![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)
![forthebadge](https://forthebadge.com/images/badges/for-you.svg)
![forthebadge](https://forthebadge.com/images/badges/powered-by-coffee.svg)

### :space_invader: Tech Stack

<details>
<summary>Client</summary>
<ul>
<li><a href="https://#/">Javascript</a></li>
<li><a href="https://nextjs.org/">Next.js</a></li>
<li><a href="https://reactjs.org/">React.js</a></li>
<li><a href="https://tailwindcss.com/">TailwindCSS</a></li>
</ul>
</details>

<details>
<summary>Database</summary>
<ul>
<li><a href="https://firebase.google.com">Firebase</a></li>
</ul>
</details>
<br />

<table>
<tr>
<td>
<a href="#"><img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original.svg" alt="" width="30" height="30" /></a>
</td>
<td>
<a href="#"><img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg" alt="Google" width="30" height="30" /></a>
</td>
<td>
<a href="#"><img src="https://user-images.githubusercontent.com/99184393/179383376-874f547c-4e6f-4826-850e-706b009e7e2b.png" alt="" width="30" height="30" /></a>
</td>
<td>
<a href="#"><img src="https://user-images.githubusercontent.com/99184393/180462270-ea4a249c-627c-4479-9431-5c3fd25454c4.png" alt="" width="30" height="30" /></a>
</td>
<td>
<a href="#"><img src="https://user-images.githubusercontent.com/99184393/177784603-d69e9d02-721a-4bce-b9b3-949165d2edeb.png" alt="" width="30" height="30" /></a>
</td>
<td>
<a href="#"><img src="https://raw.githubusercontent.com/atulmy/oauth/master/web/public/images/social/instagram.svg" alt="" width="30" height="30" /></a>
</td>
</tr>
</table>

## :toolbox: Getting Started

### :bangbang: Prerequisites

- Sign up for a Firebase account <a href='https://firebase.google.com'>HERE</a>
- Install Node JS in your computer <a href='https://nodejs.org/en/'>HERE</a>

<!-- Env Variables -->

### :key: Environment Variables

To run this project, you will need to add the following environment variables to your .env file

`GOOGLE_CLIENT_ID`

`GOOGLE_CLIENT_SECRET`

`NEXTAUTH_URL`

`NEXT_PUBLIC_SECRET`

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

### :gear: Installation

Install my-project with npm

```
npx create-next-app instagram_clone
```

```
cd instagram_clone
```

Install dependencies

### :test_tube: Install Tailwind CSS with Next.js

#### Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both `tailwind.config.js` and `postcss.config.js`.

```
npm install -D tailwindcss postcss autoprefixer
```

```
npx tailwindcss init -p
```

#### Configure your template paths

Add the paths to all of your template files in your `tailwind.config.js` file.
<br>

```
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
```

#### Add the Tailwind directives to your CSS

Add the `@tailwind` directives for each of Tailwind’s layers to your `./styles/globals.css` file.

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Install dependencies

```
npm install @heroicons/react
```

```
npm install --save-dev @faker-js/faker
```

```
npm i tailwind-scrollbar
```

```
npm i tailwind-scrollbar-hide
```

```
npm i @tailwindcss/forms
```

npm install recoil

```
npm install @headlessui/react
```

```
npm i react-moment
```

<a href="https://github.com/SashenJayathilaka/Instagram-Clone/blob/master/package.json" target="_blank">🔶 Other Dependency Info</a>

<!-- Run Locally -->

### :running: Run Locally

Clone the project

```bash
git clone https://github.com/SashenJayathilaka/Instagram-Clone.git
```

Install dependencies
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

```bash
npm install
or
yarn install
```
## Getting Started

Start the server
First, run the development server:

```bash
npm run dev
npm run dev
# or
yarn dev
```

<hr />

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

<hr />

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

### Learn More
## Learn More

To learn more about Next.js, take a look at the following resources:

Expand All @@ -224,24 +27,8 @@ To learn more about Next.js, take a look at the following resources:

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

<!-- Deployment -->

### :triangular_flag_on_post: Deployment

To deploy this project run

##### Deploy on Vercel
## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

## :handshake: Contact

Your Name - [@twitter_handle](https://twitter.com/SashenHasinduJ) - sashenjayathilaka95@gmail.com

Project Link: [https://github.com/Louis3797/Instagram-Clone](https://github.com/SashenJayathilaka/Instagram-Clone.git)

<br />

<div align="center">Don't forget to leave a star ⭐️</div>
6 changes: 0 additions & 6 deletions atoms/modalAtom.js
View file

This file was deleted.

10 changes: 5 additions & 5 deletions components/Feed.js → components/Feed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@ import Stories from "./Stories";
import Suggestions from "./Suggestions";
import { useAuthState } from "react-firebase-hooks/auth";

import { auth } from "../firebase";
import { auth } from "../firebase/firebase";

function Feed() {
const [user] = useAuthState(auth);
type FeedProps = {};

const Feed: React.FC<FeedProps> = () => {
const [user] = useAuthState(auth);
return (
<main
className={`grid grid-cols-1 md:grid-cols-2 md:max-w-3xl xl:grid-cols-3 xl:max-w-6xl mx-auto
Expand All @@ -30,6 +31,5 @@ function Feed() {
)}
</main>
);
}

};
export default Feed;
105 changes: 0 additions & 105 deletions components/Header.js
View file

This file was deleted.

Loading

0 comments on commit ef2be8c

Please sign in to comment.