An Instagram Clone Created with Reactjs and Tailwind CSS

About This Project

This project is a clone of the Instagram web app. It's built using React, React libraries (react-router-dom, axios, swiper), Tailwind CSS and SCSS. Watch this repo to be informed about the next updates of this application :)

Technologies

• React v18.1.0: Github
• react-router-dom v6.3.0: Github
• axios v0.27.2: Github
• swiper v8.1.4: Site
• Tailwind v3.0.24: Github
• SASS v1.51.0: Site
• json-server v0.17.0: Github

Preview App

Installation - Development

In order to setup the project you'll need to the following steps :

1. Clone repo

Clone this repo to your local machine using following command :

git clone https://github.com/masoudnick/instagram.git

2. Setup development server

Install npm dependencies using following command :

cd instagram && npm install

Run development server using following command :

npm start

Runs the app with opening http://localhost:3000 in the browser.

3. Setup json server

Run json server using following command, then the server runs at http://localhost:8000

json-server --watch server/db.json --port 8000

Todo

• Implement authentication system.
• Complete the comments and likes components of the posts.
• Add more pages (user profile, direct message, explore, etc).
• Add modal component for switch account and share posts.
• Complete Search components.
• Add loading component for using in pages.
• show popover of user profile when hover on username.

Support

Give a ⭐️ if this project helped you!