Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/masoudnick/instagram
An Instagram Clone Created with Reactjs and Tailwind CSS
https://github.com/masoudnick/instagram
axios instagram json-server react react-hooks reactjs tailwind tailwind-css
Last synced: 3 days ago
JSON representation
An Instagram Clone Created with Reactjs and Tailwind CSS
- Host: GitHub
- URL: https://github.com/masoudnick/instagram
- Owner: masoudnick
- Created: 2022-05-11T11:47:02.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-30T21:33:39.000Z (over 2 years ago)
- Last Synced: 2024-12-13T18:18:47.103Z (about 2 months ago)
- Topics: axios, instagram, json-server, react, react-hooks, reactjs, tailwind, tailwind-css
- Language: JavaScript
- Homepage:
- Size: 3.13 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 :
```shell
git clone https://github.com/masoudnick/instagram.git
```
### 2. Setup development server
> Install npm dependencies using following command :
```shell
cd instagram && npm install
```
> Run development server using following command :
```shell
npm start
```
> Runs the app with opening [http://localhost:3000](http://localhost:3000) in the browser.
### 3. Setup json server
> Run json server using following command, then the server runs at [http://localhost:8000](http://localhost:8000)
```shell
json-server --watch server/db.json --port 8000
```
## Todo
- [x] 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.
- [x] Complete Search components.
- [x] Add loading component for using in pages.
- [ ] show popover of user profile when hover on username.
## Support
Give a ⭐️ if this project helped you!