No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md

README.md

Project 3
React

Overview

The third project builds upon the last by asking you to build a frontend that communicates with your API from Project 2 and allows a user to perform all of the expected CRUD functionality with a user interface built by you, utilizing the React library.

You will be working individually for this project. You'll be updating your existing documentation and coding the app yourself. However, you will have access to one-on-one help sessions with your instructors as you build your app.

This project is hard, but it's far from impossible and we're here to help you achieve it.

Planning & Presentation Requirements

Planning:

  • A wireframe plan for every page you'll need.

  • (Optionally) A Trello board with:

    Development Tasks, each moving from left to right in the following three lists in your board:

    1. Ice Box (stretch goals, "nice-to-have" features that are not critical for the MVP, and features that you'll prioritize at the end of the project)
    2. Current/MVP (the minimum features of that make your API usable and meet the technical requirements of the project)
    3. Completed (a list that you update as complete items from the other two lists)

    NOTE: Development Tasks should break your project into manageable pieces. For example, you may write one task like so: "Create 'x' table" OR "Insert data into 'x' table" OR "Add GET route to return all pokemon at /api/pokemon"

Presentation:

You will have 10 minutes to present your project following these guidelines:

  1. Introduce the Project:

    ☐ Intro your project by paraphrasing the main description in your documentation.

  2. Demonstrate the Project:

    ☐ Launch the app (remember to launch both the frontend and backend).

    ☐ Demonstrate the features of the app by visiting various pages and showing off the functionality.

    ☐ Be sure to demo full-CRUD operations. You should Create, Read, Update, and Delete over the course of your presentation.

  3. Show/discuss your code:

    ☐ Show your component structure.

    ☐ Show the code behind your functionality (choose a component or feature you found challenging).

  4. Share the experience:

    ☐ What was your biggest challenge?

    ☐ What are your key learnings/takeaways?

  5. Q & A + Feedback


Technical Requirements

Your App Must:

Have wireframes and show good planning. Include wireframes in the README of your frontend repo. You can draw your wireframes and take a picture of them or use wireframing apps like wireframe.cc. Include a link to your Trello board if you have one!

Have full CRUD functionality for at least one entity. This means a user should be able to load your application and use your frontend to fully interact with one of the entities in your API. Pages will include:

  • An index page listing all records of a particular entity in the DB
  • A detail page listing a information for a single record
  • A create page with a form for adding new records to the database
  • An edit page with a form for updating a record in the database
  • A button (probably in the detail page mentioned above) that will delete a record from the database

☐ Have a responsive design for all pages. A user of your app should be able to use the application on both a mobile and laptop display size.

Include a homepage introducing your app to a new user.

☐ Use React Router to swap components and "create pages" for the various pieces of functionality to live on.

☐ Use separate repos (and separate server processes) for the front and backend parts of your project.

Optionally, Your App May:

☐ Include a page for your documentation.

☐ Include more than the existing number of data entities (i.e. continue building out your backend with more functionality).

☐ Research and attempt adding Users, and Login/Logout functionality with Passport.js.

☐ Add an external API.


Necessary Deliverables

A working React/Express/Node/SQL that meets or exceeds the above technical requirements, built by you, and fully documented.

Documentation in the README.md file with these sections:

<Your Project's title>: A description of your project and the entities you're building.

Table of Contents: Showing a user the different sections of your front end README file.

Wireframes: Show your plan for the frontend from the idea stage (wireframing) through to execution.

Technologies Used: List of the technologies used, e.g., Express, Node, SQL...

Next Steps: Planned future enhancements (icebox items).

Frequent commits dating back to the very beginning of the project. Commit messages should be in the present tense, e.g., "Adds /api/cars route" instead of "Added a route for /api/cars".


Suggested Ways to Get Started

  • Spend some time wireframing, setting up your Trello board, and planning your component architecture, then discuss your plans with an instructor to get their feedback.
  • Remember to keep things small and focus on the MVP – feature creep can doom a project!
  • Use our class work React apps as a reference.
  • Start by handling CORS on the server side by adding the appropriate Headers to each request made.
  • You won't be judged on your design but you may want to read through this resource for a small visual design intro.

Project Feedback + Evaluation

  • Your instructors will be evaluating your project during your demonstration as well as reviewing the code in your repo.
  • If your instructors determine that your project does not meet the above requirements (denoted using checkboxes), you will be given 3 calendar days to address the deficiencies identified. However, be aware that there is only a single opportunity to resubmit a project during the course. For example, if you already resubmitted Project 1, you will not be permitted to resubmit this project.
  • Immediately after your presentation, your instructor may provide you with feedback that will benefit your project and perhaps the projects of other students as well.
  • If there is a specific section of code that you would like an instructor to provide additional feedback, please ask!

Requirements Rubric

Requirement Incomplete Does Not Meet Expectations Meets Expectations Exceeds Expectations
Wireframes / Planning included in README
Full frontend CRUD functionality for at least 1 entity
React Router used
Responsive Design
Homepage introducing the project
Project is built with separate repos, communicating via `fetch` requests