Overview
This 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.
Requirements
General
- Project is published on public GitHub repository
- Project includes “create-react-app” boilerplate structure
- Project includes necessary dependencies:
- “react-router-dom”
- “prop-types”
- Code compiles without errors
- Code executes without run-time errors in the browser
- (Bonus) Code compiles and runs without warnings
Project Structure
Repository includes src/
directory with the following structure:
-
index.js
(application entry-point) -
App.js
(root component) components/
directory with the following files:-
AddTodoForm.js
-
InputWithLabel.js
-
TodoList.js
-
TodoListItem.js
- (Bonus)
TodoContainer.js
- One or more CSS modules associated with the components above
-
App Component
App.js
contains the following:
- Functional React component named
App
- Return statement that renders the following JSX:
- Router from “react-router-dom”
- 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
TodoContainer Component
If project is missing (Bonus) TodoContainer.js
, then apply these requirements to App.js
instead
TodoContainer.js
contains the following:
- Functional React component named
TodoContainer
with one prop:tableName
- Correct
propTypes
for the prop(s) listed - State variable named
todoList
with default value of an empty Array ([]
) - State variable named
isLoading
with default value oftrue
useEffect
hook with dependencytableName
(prop) 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
tofalse
- Using Fetch API, GET table records from Airtable for the given
- Function named
addTodo
with parametertitle
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
- Using Fetch API, POST new record to Airtable with the given
- Function named
removeTodo
with parameterid
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
- Using Fetch API, DELETE record from Airtable given
- 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
- Heading level-one with dynamic
AddTodoForm 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 parameterevent
that does the following:- Set
todoTitle
to given value from event
- Set
- Function named
handleAddTodo
with parameterevent
that does the following:- Prevent default event behavior (i.e. page refresh)
- Invoke callback prop
onAddTodo
and passtodoTitle
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 Component
InputWithLabel.js
contains the following:
- Functional React component named
InputWithLabel
with three props:todoTitle
,handleTitleChange
, andchildren
- 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
- Label element which renders text from
TodoList Component
TodoList.js
contains the following:
- Functional React component named
TodoList
with two props:todoList
andonRemoveTodo
- Correct
propTypes
for the prop(s) listed - Return statement that renders the following JSX:
- Unordered list element
-
map
statement which loops throughtodoList
Array and returnsTodoListItem
Component
TodoListItem Component
TodoListItem.js
contains the following:
- Functional React component named
TodoListItem
with two props:todo
andonRemoveTodo
- 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
Styling
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)
Example
Coming soon…
Final Project Submission
Please use your usual Assignment Submission Form to submit your final project when it’s complete. Here’s a quick checklist before you submit:
- Double check the rubric to make sure you’ve met requirements
- Merge any remaining open pull requests so your main/master branch of your repository has ALL your final project work
- Select “React.js – Final Project Completion” for the lesson
- Copy and paste the URL for your repository (should look like: www.github.com/yourusername/classname-react) in the field of the Assignment Submission Form that asks for the project link
- Be sure to answer the questions about what you’d like to do after this class. Your options include: participating in practicum, taking another class, retaking this class, work on mini projects, no further action.
- If you are completing your final project and intending to participate in practicum, be sure to complete the Practicum Participation Form that was shared in the class Slack channel as soon as possible.
Your reviewer will look over your work after you submit. Once they’ve reviewed, you’ll receive an email with any of their comments/feedback and your class completion certificate. If you have any questions or don’t receive this email, please contact the class coordinator.