/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.

Instructions

Task 1: 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 npm install
  • Start up the app using 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>.

Task 2a: MVP

  • 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 Posts component that renders an individual Post for every object inside the dummy-data.js array.
  • Use what you learned yesterday 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 through props several levels down into a nested component.
  • 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

Task 3: 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 add comments to a post using an input.
  • Finish styling all of the application and get your instagram clone to closely resemble the given design spec.

Submission Format

  • Submit a Pull-Request to merge <firstName-lastName> Branch into main (student's Repo). Please don't merge your own pull request