Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hernando17/instagram-home-clone
YoRipe Test
https://github.com/hernando17/instagram-home-clone
javascript reactjs redux-toolkit sass
Last synced: 14 days ago
JSON representation
YoRipe Test
- Host: GitHub
- URL: https://github.com/hernando17/instagram-home-clone
- Owner: Hernando17
- Created: 2023-02-08T16:11:44.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-02T14:00:26.000Z (almost 2 years ago)
- Last Synced: 2024-11-07T07:50:18.691Z (2 months ago)
- Topics: javascript, reactjs, redux-toolkit, sass
- Language: JavaScript
- Homepage: https://hernando-yoripe-test.vercel.app/
- Size: 165 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Instagram Home Page Clone
This is a Instagram Home page clone built with [Vite + ReactJs](https://vitejs.dev/) by myself.
Link: https://hernando-yoripe-test.vercel.app/
## Table of Contents
- [Requirements](#requirements)
- [Getting Started](#getting-started)
- [Component](#component)
- [Libraries](#libraries)
- [References](#references)
## Requirements
- [x] Using React
- [x] Listing of posts
- [x] Actions on each post (like comment, share, save)
- [x] Each post should have comments
- [x] Stories list
- [x] Current user name and profile icon
- [x] Header with search, profile, messages, notifications, etc...
- [x] Implement a dummy API call that will return the list of posts that can be used to render posts in the UI.
- [x] Responsive design
## Getting Started
1. Clone the project from the repository
```
git clone https://github.com/Hernando17/yoripe-test.git
```
2. Install the dependencies
```
npm install
```
3. Run the project
```
npm run dev
```
## Component
Atomic Design Component https://bradfrost.com/blog/post/atomic-web-design/
## Libraries
### Icon
- [x] React Icons https://react-icons.github.io/react-icons/
- [x] Fontawesome https://fontawesome.com/
### Style
- [x] Sass https://sass-lang.com/
### State Management
- [x] Redux Toolkit https://redux-toolkit.js.org/
- [x] React Redux https://react-redux.js.org/
### Others
- [x] dotenv https://www.npmjs.com/package/dotenv
- [x] React Router https://reactrouter.com/
- [x] React Helmet Async https://www.npmjs.com/package/react-helmet-async
- [x] React Snaplist Carousel https://www.npmjs.com/package/react-snaplist-carousel
## References
- [Instagram](https://www.instagram.com/)
- [API](https://api.jsonbin.io/v3)