For this project, you'll build a simple Instagram clone using React. There is a file provided frontend/data/dummy-data.js
that contains some mock data. Each object in the mock data represents a faux Instagram post. Your React application will receive this faux post data and render each as a separate Instagram post.
- Clone the repository to your machine using your terminal
- CD into the project base directory
cd React-Components-Insta-Clone
- Download project dependencies by running
npm install
- Start up the app using
npm run dev
- Push commits: git push origin
main
This app can be broken down into two main sections that you'll need to implement for this project: the Search Bar and the Posts.
A Search Bar will be rendered at the top of the page, and a Posts component will render an individual Post for every object inside the dummy-data.js
array. You'll need to set up state to keep track of the posts. You will implement a callback to increase the "likes count" on posts and hand it several levels down into a nested component through props.
Look through the code before you start. There are a lot of files. Not all of them need code added to them. Start in the App.js file and read the instructions there.
Your project should end up looking like this
- Submit a link to your repository in Canvas