React-Components-Insta-Clone

Composing React Components and Passing Data Via Props

Introduction

• For this project, you'll be building a simple Instagram clone using React.
• There is a file provided called dummy-data.js that contains some mock data. Each object in the mock data represents a faux Instagram post.
• Your React application will receive faux post data and render each as a separate Instagram post.

Objectives

Project Setup

This project was put together using create-react-app (CRA). You will not need to install CRA in order to make this project work. Follow the steps below to setup the project with the proper dependencies.

• [ ☑︎ ] Create a forked copy of this project.
• [ ☑︎ ] Add your team lead as collaborator on Github.
• [ ☑︎ ] Clone your OWN version of the repository in your terminal
• [ ☑︎ ] CD into the project base directory cd React-Components-Insta-Clone
• [ ☑︎ ] Download project dependencies by running one of these two commands yarn or npm install
• [ ☑︎ ] Using the same command tool (yarn or npm) start up the app using yarn start or npm start
• [ ☑︎ ] Create a new branch: git checkout -b <firstName-lastName>. Implement the project on your newly created <firstName-lastName> branch, committing changes regularly.
• [ ☑︎ ] Push commits: git push origin <firstName-lastName>.

Tasks

• This app can be broken down to two main sections that you'll need to implement for this project: the Search Bar and the Posts.
• To complete this project there will be a single instance of the Search Bar being rendered at the top of the page, as well as a Post Container and a Comment Section for every piece of mock data in the dummy-data.js file.
• Use what you learned yesterday to add and update state for the likes so that when you click on the heart icon it updates the number of likes.
• 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.
• you'll want to add your own styles via CSS. To keep things organized, have the CSS file that corresponds with a component live in the same directory as the component file.

---

Your search bar header should look something like this:

---

Your posts should look something like this:

Stretch Goals

• Create more dummy data in the dummy-data.js file and add search functionality to the search bar. One way to do this is with a filter method.
• Implement the ability to comment on a post with the Add a comment... input.
• Finish styling all of the application and get your instagram clone to closely resemble the given design spec.