Project 1 - Semester Project

Overview

Working in instructor-assigned teams, you will design, develop, and deploy a client-side web application prototype. The deliverables include three milestones linked below.

While in this course you will learn to build (static) web sites, this project is a web application. The difference is that a web site is a collection of static pages, while a web application is a dynamic program that responds to user input. For example, a web site might be a collection of pages that describe a restaurant, while a web application might be a program that allows users to order food from that restaurant.

Requirements Summary

The requirements for each milestone will be enumerated on its own page, but in summary your app will:

1. be a client-side web application.
2. have a focused theme and audience of your choosing.
3. serve someone besides yourself.
   • Thinking empathetically is an important skill to develop for web design, as you need to understand your clients’ vision to bring it to life.
4. Facilitate a visitor in Creating, Reading, Updating, and Deleting (i.e. performing “CRUD” actions) application-relevant data, which will be persisted in the browser’s local storage.
5. be deployed to a publicly accessible URL.
6. demonstrate your ability to synchronize asynchronous events generally and
   • specifically, (for some path through its features) require multiple (>=2) network requests be made dynamically via js to a third-party API (e.g. to a REST API) and at least 1 of the requests after the first must rely on information made available in the response from an earlier request
   • this requirement is sometimes difficult to understand. here’s an example of this part: Rhyphy
     1. when you search for a word
     2. it will search a rhyming database
     3. it will display the results
     4. it will search giphy for a gif for each of these rhymes
7. will meet or exceed accessibility and validation standards.
8. not be written using a frontend framework (e.g. react, solid, svelte, vue, angular, etc.)
9. optionally use third party code such as design frameworks (e.g. bootstrap) and Javascript libraries

Possible Examples

Below are some ideas, and you are encouraged to come up with your own. Your content must be original and not lifted from other websites. Third-party images/media are acceptable provided you adhere to their license; you must also cite their use. You may consider some of the following scenarios and use cases:

• A calendar for keeping track of due dates, events, birthdays, etc.
• A micro-blogging platform a la X that lets users write short posts.
• An online store and wishlist that allows users to keep track of things they would like to purchase.
• A tablet-based ordering system for a local business, with separate screens for selecting and customizing orders, displaying sales information, etc.
• A personal journal that lets someone track exercise, health, or other personal information, while making progress toward established goals.
• A personal finance tracker that creates graphs (eg bar charts) illustrating categories of spending habits.
• A note-taking application with a wiki-style interface that lets you update information.

Cross-Milestone Requirements

General Requirements

The following echo the summary above, but go further and this section will be linked from each individual milestone’s specifications to remind you that these apply to every part of the project.

1. with a focused theme and audience of your choosing.
2. must serve someone besides yourself.
   • Thinking empathetically is an important skill to develop for web design, as you need to understand your clients’ vision to bring it to life.
3. will meet or exceed accessibility and validation standards
4. demonstrate your ability to synchronize asynchronous events generally and
   • specifically, (for some path through its features) require multiple (>=2) network requests be made dynamically via js to a third-party API (e.g. to a REST API) and at least 1 of the requests after the first must rely on information made available in the response from an earlier request
5. must not be written using a frontend framework (eg react, solid, svelte, vue, angular)
6. may use third party code such as design frameworks (e.g. bootstrap), js libraries

Professional Practices and Design Quality

1. Your source code must be formatted using a consistent standard. I recommend using the built-in support in vscode for formatting HTML and CSS (other options like prettier may not default to producing valid HTML)
2. Your site’s non-HTML resources must be organized:
   1. Images must be placed in a directory named images.
   2. CSS files must be placed in a directory named styles.
   3. first-party js files must be placed in a directory named scripts.
   4. The PDF files of your design sketch must be placed in a directory named design.
3. Your forms and user interactions must incorporate validation to prevent users from entering bad information (such as a start date that is after an end date).
4. Your interface must demonstrate good aesthetics, including good choices for color schemes, layout (using grids and/or flexboxes, along with non-static positions), and dynamic effects.
5. Your site must maintain a coherent style across its pages. Repeated style rules must be placed in a shared external stylesheet. Style rules not shared between pages must be placed in separate external stylesheets. The content should be neatly aligned. The axes of alignment should be clearly visible. Favor left- and right-alignment over centering—as centering does not produce a strong axis of alignment. The content should have adequate and consistent spacing. Text should never* bleed against the edge of its containing box.
   • never say never, but seems unlikely to be a good choice
6. Your source code must be readable, using conventional and consistent formatting and meaningful names for classes and IDs. Use kebab-case (preferred) or camelCase identifiers.
7. Your source code should use semantic and structural elements to support accessible usage. You should also use ARIA features as appropriate. In particular, you must adhere to the Level A recommendations in the WCAG Checklist.
8. The names of your files must be entirely lowercase and contain only alphanumeric characters.
9. You should use meaningful comments.

Third-Party APIs

Here are some possible third-party APIs that you could explore for ideas or to support your application:

• GitHub API
• Spotify
  • Spotify allows for client-side access using PKCE. Here is a tutorial and demo you can follow.
  • see also a demo with a bit more explanation
• Canvas Learning Management System
• OpenStreetMap
• Mastodon’s not X/Twitter
• List of “public” APIs from: this random github repo
• List of “free”* APIs from: RapidAPI
• gifs and more from: GIPHY

Milestones