Grading Rubric - Code-the-Dream-School/react GitHub Wiki

This fifteen-week project guides students through building a Todo List application with React. There are some basic requirements (see below) but students are encouraged to use their own creativity and ideas to showcase all the skills they have learned throughout the course.

• Project is published on public GitHub repository
• Project includes "Vite + React template" boilerplate structure
• Project includes necessary dependencies
• Code compiles without errors
• Code executes without run-time errors in the browser
• (Bonus) Code compiles and runs without warnings

Repository includes src/ directory with the following structure:

• index.js or main.jsx (application entry-point)
• App.jsx (root component)
• components/ directory with the following files:
  • AddTodoForm.jsx
  • InputWithLabel.jsx
  • TodoList.jsx
  • TodoListItem.jsx
  • One or more CSS modules associated with the components above

App.jsx contains the following:

• Functional React component named App
• Return statement that renders the following JSX:
  • Switch component with two or more Routes that are navigable
    • One route for "home" or "landing" page
    • One or more routes which render a TodoList component
  • (Bonus) Navigation menu
• State variable named todoList with default value of an empty Array ([])
• State variable named isLoading with default value of true
• useEffect hook with dependency tableName and callback function that does the following:
  • Using Fetch API, GET table records from Airtable for the given tableName
  • Parse JSON response
  • Sort response data by one or more properties
  • Set todoList state to sorted data
  • Set isLoading to false
• Function named addTodo with parameter title that does the following:
  • Using Fetch API, POST new record to Airtable with the given title field value
  • Parse JSON response
  • Set todoList state to new Array containing the added record
  • (Bonus) Re-sort list data
• Function named removeTodo with parameter id that does the following:
  • Using Fetch API, DELETE record from Airtable given id
  • Parse JSON response
  • Set todoList state to new Array NOT containing the removed record
• Return statement that renders the following JSX:
  • Heading level-one with dynamic tableName
  • AddTodoForm Component
  • Conditional rendering based on isLoading state:
    • If true, paragraph that reads "Loading..." or some equivalent message
    • If false, TodoList Component

AddTodoForm.js contains the following:

• Functional React component named AddTodoForm with one prop: onAddTodo
• Correct propTypes for the prop(s) listed
• State variable named todoTitle with default value of an empty String ("")
• Function named handleTitleChange with parameter event that does the following:
  • Set todoTitle to given value from event
• Function named handleAddTodo with parameter event that does the following:
  • Prevent default event behavior (i.e. page refresh)
  • Invoke callback prop onAddTodo and pass todoTitle from state
  • Reset todoTitle value to an empty String ("")
• Return statement that renders the following JSX:
  • Form element with submit event handler
  • InputWithLabel Component
  • Button element with type "submit"

InputWithLabel.js contains the following:

• Functional React component named InputWithLabel with: todoTitle, handleTitleChange, and children
• Correct propTypes for the prop(s) listed
• Ref for Input element
• useEffect hook with empty dependency list and callback function that does the following:
  • Focus input ref
• Return statement that renders the following JSX:
  • Label element which renders text from children prop
  • Input element which is configured as a "controlled component" with "value" and "onChange" attributes

TodoList.js contains the following:

• Functional React component named TodoList with: todoList and onRemoveTodo
• Correct propTypes for the prop(s) listed
• Return statement that renders the following JSX:
  • Unordered list element
  • map statement which loops through todoList Array and returns TodoListItem Component

TodoListItem.js contains the following:

• Functional React component named TodoListItem with: todo and onRemoveTodo
• Correct propTypes for the prop(s) listed
• Return statement that renders the following JSX:
  • List-item element
  • Title from todo Object
  • Button element with text "Remove" and "onClick" event handler

Use of third-party CSS libraries is discouraged for this project, we want to see your understanding of basic CSS concepts like rulesets, properties, and media queries

• Project includes at least one CSS module (though, it is encouraged that you have a different module for each React component)
• Application follows the style requirements outlines below:
  • Change the background color of the page body
  • Change the default text color
  • Customize the font family
  • (Bonus) Load in a font family from Google Fonts
  • (Bonus) Customize style of navigation items
  • Add spacing (padding/margin) between elements
  • Change the font size, weight, and color of all headings
  • Customize input and button styles
  • Use Media Queries to make sure the application is responsive for all device sizes (mobile, tablet, desktop, etc.)
  • (Bonus) Add multi-media usage (i.e. iconography)

It is good practice to talk about what you have learned and know about project as you will be asked to talk about your experiences in job interviews. This is why we ask all students to give a short demo of their final projects. This demo is NOT graded and your performance in the demo will have no bearing on your graduation. Please record a 3-5 minute presentation that touches on all of the following:

• Provide a quick overview of the page (or each page if you have more than one)
• Demonstrate your todo list's functionality
  • Show your app mounting in the browser.
    • Start off with a list of at least 3 todos already in your system.
  • Create 1 or 2 todos
  • Show any additional features of the todo list such as pagination, completion vs deletion, editing todos, etc. This part really depends on what additional functionality you build into your app!
  • Mark todos as complete
• Share what the most challenging part of the project and what you enjoyed working on the most

You can record your presentation in any of these three ways:

1. Logging into your personal Zoom account and record your personal meeting where only you are in attendance and you are screen-sharing your work (this is a link to a video on how to do this)
2. Use a screen recording program already on your machine
   • Mac users can use this link to watch a how-to video
   • Windows users can use this link to watch a how-to video
3. Use an online option such as loom (link to a how to video on loom here).

Click here to expand detailed instructions on how to upload your recording

1. Make sure you're logged in to youtube.

If you don't have a youtube account, create one by following these instructions.

You will know you're logged in if you have an initial/icon/other in the top right corner (where the M in the brown circle is on this screenshot):

2. Click `+ Create` in the top right and select `Upload video`

3. In the Upload videos window that appears, click the black `Select files` button

You'll need to select the file of your recording you have saved on your computer.

4. The fle title will be the default video title. You can change this to include your name and "Intro to Programming Final Project Presentation"

5. Scroll down under the title; select "No, it's not made for kids" and click on the `Show more` gray button to make further setting changes

6. You'll want to be sure the following options for some of the sections that appear after click `Show more` are set to the following:

• Altered content: select "No" since you have not used AI to alter reality in your video
• Recording date and location: please select the date you made your final project recording
• Shorts remixing: select "Don't allow remixing"
• Comments and ratings: if you would like classmates to leave comments, leave comments "On", otherwise you can turn them off by selecting "Off". NOTE: we do not and cannot monitor comments. Please report anything concerning to Code the Dream but have screenshots if needed. You can also UNcheck the "Show how many viewers like this video if you wish.
• Click the black Next button in the bottom right to proceed from the Details section of the upload through the Video elements and Checks portion.
• Once you are on the Visibility section of the upload, select "Unlisted" as seen here

• Lastly, click Save and copy your video link as seen here

Once you have recorded your presentation, please USE THIS LINK TO SUBMIT YOUR RECORDING OF YOUR FINAL PROJECT PRESENTATION

You can watch a video on how to submit your recording by clicking this link