/React-Components-Insta-Clone

Module Project for Composing React Components and Passing Data Via Props

Primary LanguageJavaScript

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: search bar


Your posts should look something like this: insta post

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.