React

Overview

Let's kick it up a notch and build a modular and modern front end application using React!

For Project two we will have you try to recreate the design of a popular website (facebook, twitter, etc.) using React. You will also create dummy data using the Headless CMS contentful. For example, if your making Twitter, in contentful create some dummy tweets to pull into your React project via the contentful API.

You must submit your full project proposal to your squad leader by 10AM EST Monday.

Show us what you've got!

Requirements

Your website must:

• Be a working, interactive, React application.
• Include data from a contentful to simulate the website you are partially replicating.
  • TRY OUT your API in the browser by making an fetch request before you get too emotionally invested in it, to make sure it works the way you think it does...YOU ARE REQUIRED TO SHOW US YOU CAN RECEIVE THE DATA FOR YOUR PROPOSAL
• Include React Router with at least 2 routes
• Have at least 5 separate components, using a readable file structure.
• Be built using Create React App.
• Built mobile first
• Implement responsive design using flexbox, grid, or another css framework.
• Use React Hooks

Previous Student Projects

• DnD Monsters
• Disney
• Music List
• Netflix
• Bible Trip
• Fav Space - Project Github Repo
• Complete List of Previous Student Projects

Your code must:

• Be properly indented.
• Be written with semantic, camelCase JavaScript variable names.
• Be written with kebab-case (dashes) CSS class names.
• Contain no console.log() or commented out code in final version.
• Use only React for DOM manipulation.
• No pre-loaded create-react-app files or code.

Necessary Deliverables

Commits

• Repo must contain frequent commits (min 15+) dating back to the beginning of the project.

A Professional README

• Refer to this blog as a great resource on how to create a readme.

A Killer Project Proposal:

• Refer to the project worksheet file in this repo for structuring your Proposal.

For the project:

• A git repository hosted on GitHub, with a link to your hosted project, and frequent commits dating back to the very beginning of the project (YOUR APP SHOULD BE LOCATED IN A SEPARATE STANDING REPO. DO NOT build your app in this repository. YOU MUST initiate a new repo on your GitHub account.)

---

Tips

Read the following articles posted by previous students into how they planned and organized their thoughts into building a unit project.

• REACT.js : A Haunting by Sami Schonefeld
• how-i-built-my-first-obama-themed-javascript-game by Sarah Currey

-Commit early, commit often: Don't be afraid to break something because you can always go back in time to a previous version.

Check out these awesome websites for inspiration

• https://www.foursquare.com
• https://www.nike.com
• https://www.airbnb.com
• https://www.stripe.com
• https://www.etsy.com
• https://www.moma.org
• https://www.nytimes.com
• https://www.mint.com
• https://www.popeyes.com
• https://www.bk.com/menu/burgers

Getting Unstuck

• Don't hesitate to write messy code to solve short-term problems—Refactor later
• Read the docs for whatever technologies you use. The docs often include a tutorial that can help you get started, and learning to read documentation is crucial to your success as a developer.

A Note on Plagiarism

Take a moment to re-familiarize yourself with the plagiarism policy, specifically on using work you find online and on work you do with other students.