React Components Insta Clone

Component Composition Module Project

Introduction

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

Instructions

Task 1: Project Setup

• Clone the repository to your machine using 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 run dev
• Push commits: git push origin main

Task 2: MVP

This app can be broken down into two main sections that you'll need to implement for this project: the Search Bar and the Posts.

A Search Bar will be rendered at the top of the page, and a Posts component will render an individual Post for every object inside the dummy-data.js array. You'll need 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 several levels down into a nested component through props.

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

Submission Format

• Submit a link to your repository in Canvas