Project_ Complete Web App.pdf
Project: Complete Web App
Due Monday by 11:59pm Points 15 Submitting a text entry box
Start Assignment
For your project you will design and implement an interactive web application. Your app will be a website that
allows users to view and interact with some information on a topic of your choosing.
For example, you could create a data browsing app, in which the user is able to view a collection of data items
(e.g. movies to watch, COVID infections, toilet paper shortages), selecting each or multiple elements to view
more details or compare them—and then save those comparisons for later. You could alternatively create a data
collecting app, in which the user is able to “record” some data (e.g. movies they’ve watched, their body
temperature, amount of toilet paper they’ve used), and then view that data history and the trends that it leads to.
You do not need to find or use an “web API” to create this app—in fact I encourage you not to because of
the difficulties they introduce! Instead, you can use a static data set (similar to what you used in your 201
final project—even the same one if you want), or even make up some “mock” data for your project. If you do
a data collecting app, then the users will supply the data so that you don’t have to!
The exact topic and structure of the app is up to you; this project is a chance for you to show off your web
development skills. But no matter its form or content, you will need to meet the requirements detailed below.
Objectives
By completing this project you will practice and master the following skills:
Creating new web pages from scratch
Applying iterative development and modifying existing web projects
Writing semantically rich and accessible HTML
Using CSS to gives pages complex formatting and layouts
Harnessing media queries and CSS frameworks to produce responsive web pages
Working with fundamental JavaScript functions and data types
Structuring a web page using React Components
Using React props and state to make a web page interactive
Accessing and processing external data through AJAX
Designing and implementing a full-featured web application
Synthesizing skills, tools, and concepts from across the course
iSchool Canvas Support
Getting Setup
For your final project deliverable you will be working in the same repo you created for the Project Proposal.
You will set you that repo to hold a React App as part of the second draft. See that assignment for details.
Project Requirements
This page lists the requirements for the final version project. Note however that many of these requirements you
will already have completed as part of earlier drafts, so don’t panic if they seem overwhelming here!
App Content and HTML Structure
Your project will need to use well-stuctured and appropriate HTML to define its content, but implemented using
the React framework.
Details
1. This requirement includes the project structure. Your app will be need to be built using Create React App
(https://create-react-app.dev/) , as described in the “Getting Setup” section. Note that you’ll need to
have “cleaned up” the auto-generated files; there should not be anything extraneous in your repository!
2. You’ll need to specify the meta data (author and description) for your page in the HTML, modifying the
index.html file provided by Create React App.
You’ll also need to specify your favicon—do not use the default React icon!
Note that you will not have more than 1 HTML file—your app will be built as a single-page application
(and you’ll use client-side routing to produce the “second pages”).
3. Your page content can be structured however you wish, but must include a header
(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) with appropriate content (including
the name of your app) and a footer (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer)
with appropriate content (e.g., copyright and contact info).
4. Your app will need to display at least two different views of your data. For example, you could display a
list of cards as one view, and then allow the use to select (click) on a card to see further details on that
record as a second view. You can also display your data in different formats (such as a table and a chart),
as long as the different views are meaningful and there is a point to having them both! An interactive map
(such as one created with Leaflet (https://leafletjs.com/) ) or chart (such as created with Plotly
(https://plotly.com/) ) each counts as a single data view, and will not likely count as “interaction” (see
below).
Overall, your web app needs to have sufficient content to make its layout and styling necessary! Just
having a single data table won’t be sufficient.
5. Your web site will need to include both text content and at least three (3) notable images or other media
content (videos, etc). You are welcome to use stock images if appropriate. Unsplash
(https://unsplash.com/) , Morgue File (http://www.morguefile.com/) , and Pixabay
(https://pixabay.com/) are all good places to start looking for free images. Make sure you have the rights
iSchool Canvas Support
React Components and Structure
Your app will need to be developed using the React framework, following the best practices introduced in this
course. This requirement category focuses on your effective use of React Components.
This should be a straightforward “port” of your project draft!
to any images you use, and include appropriate attribution (https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/cite) .
Note that the text and images on your page will be actual content, not just lorem ipsum placeholder text!
You’re developing a “real” app!
6. Your app will need to include a form (using the