/Week9_React_Instagram_Clone

adding more useState and props

Primary LanguageJavaScript

Week 9: Instagram Clone

React Components, State, 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

  • Create a forked copy of this project.
  • Clone your OWN version of the repository in your terminal
  • CD into the project base directory cd Week9_React_Instagram_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.

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