Giter VIP home page Giter VIP logo

react-components-insta-clone's Introduction

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 2b: Exit Ticket

Once you begin, you will have 15 minutes to answer the questions here.

The completion of these questions is mandatory for MVP. However, passing the quiz doesn't affect your standing as a Lambda School student whatsoever. This is Lambda School testing itself! Please answer honestly and to the best of your ability without using external references.

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
  • Fill out your module retrospective form here with a link to your TL

react-components-insta-clone's People

Contributors

cmgorton avatar ladrillo avatar tetondan avatar zoelud avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.