Skip to content

project-instructions.md

Latest commit

 

History

History
78 lines (50 loc) · 4.25 KB

project-instructions.md

File metadata and controls

78 lines (50 loc) · 4.25 KB

Project Overview

It's time to build something you'll be proud to call your own.

This is an open-ended project. We can't provide any set solution, but we're always here to help.

You'll be making your own React app. This can be a website you imagine, but feel free to pick an existing website and try to mimic it. Some sites that use React that you can model yours after are:

Once you have a website with basic functionality that you're satisfied with, look at the "Further Directions" section and choose at least one of the options to implement.

Deliverables

Week 9

  • You will present a 2min project proposal to the class in Week 9 - explaining the goals of your project

Week 10

  • The code for your app must be in a public GitHub repo, with regular commits (not all at the end!).
  • Your app must be deployed publicly and accessible for the instructors to test.
  • You will show off your project to the class in a 5-10min presentation, with time for Q&A.

Requirements

  • Your app must utilize nested components and state.
  • Your app must use React Router and have multiple in-app pages.
  • Your app must make use of an API - either a public API or one you build yourself

Note: Don't worry, we will be learning how to deploy React apps to Heroku in class!

If an API doesn't make sense for your app, but your app is complex in other ways, talk to your instructor! The API requirement can be waived.

Suggestions and Hints

We're not building a whole full-stack app with a database (unless you want to!). If your app needs data to work, feel free to hard-code some data in as JavaScript objects or JSON files.

Minimum Project first

Don't get too caught up with lots of big ideas, try to cut down your idea to the simplest possible app first that still serves a purpose. Build that minimum app first and make sure it all works before extending it and making it more complicated.

APIs

  • When choosing and API, make sure you test it out yourself to see that you can get it working and that it has the information you want.
  • If you are building your own API - don't overdo it! The focus of the project is still on React.
  • If an API doesn't make sense for your app, but your app is complex in other ways, talk to your instructor!.

Styling

  • Don't worry about styling at first. Focus on getting the core functionality working.
  • Don't neglect the styling though! Controlling the look and feel of your app is an important part of learning React.
  • Feel free to use open source component libraries like Material UI, Chakra, React Boostrap, etc.
  • Consider accessibility, in particular keyboard and screenreader access.

Evaluation

Your project will be evaluated based on the rubric below.

Score Expectations
0 Incomplete
1 Does not meet expectations
2 Meets expectations — good job!
3 Exceeds expectations — fantastic!

Here's an example of how the rubric works. Let's say your assignment was to cook pizza:

Criteria 0 (Incomplete) 1 (Does not meet expectations) 2 (Meets expectations) 3 (Exceeds expectations)
Crust No crust present. Submission is just cheese and sauce on a plate. Pizza has a crust, but it's raw. Crust is cooked thoroughly. Crust is golden brown and the perfect thickness.
Cheese No cheese present. A small sprinkle of unmelted cheese in the middle of the pie. Cheese covers the pizza from edge to edge but is not fully melted. Cheese is delicious, plentiful, and melted to perfection.