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.