Final Project - Milestone 03: Dynamic Application Prototype

Now comes the fun part—finish your final project! In the previous milestones, the focus was on the structure and presentation of your “site.” The priority of this last milestone is the behavior of the application. However, you should also make sure that the structure and presentation are complete, incorporating the feedback you have received.

The Big Picture

Most requirements from the previous project milestones still apply. In particular, please review the following sections:

• Overall Requirements from Project 1
• Professional Practices from Project 2

Requirements

1. Your site must be fully functional as a dynamic web application using JavaScript.
   • Meaning, all features of your application must be implemented and work as intended.
   • Make sure that your app properly supports both desktop and mobile, and that all features work on both. You will want to make sure that a mobile layout is not just a shrunken version of the desktop layout, but rather a layout that works effectively for small screens.
2. Your site must interact with at least one third-party API to retrieve data that is meaningfully integrated into your application.
   • For example, if your app is about movies, you might use the OMDb API to fetch movie details based on user input.
3. Your site must use at least one client-side JavaScript library (such as Chart.js, Fuse.js, PDF.js, three.js) to enhance functionality or user experience.
   • You MUST NOT use a full front-end framework such as React, Angular, or Vue.js.
   • Here is a list of libraries you might want to consider: ➡️ Awesome JavaScript
     • Anything from the Utilities section should be fine, and also the “Data Visualization” and “Timelines” sections)
     • Avoid any “frameworks”, “generators”, “boilerplate”, “ORM”, “documentation”, etc. that wouldn’t serve a browser-side application.
   • Note that you should not use anything that requires “Node”, “npm”, “webpack”, or similar tools. You are looking for “browser-ready” libraries that you can include via a <script> tag.
4. Your site must use localStorage to store and retrieve updated data values between sessions. That is, what is displayed as content should reflect these changes. Often these actions are called “CRUD” (Create, Read, Update, and Delete).
   • Alternatively, you may use IndexedDB to store and retrieve data between sessions.
5. However you implement the CRUD actions, your implementation should contain forms that:
   1. make appropriate use of labels, buttons, and input groups. The forms should use a combination of input, select, checks, radios, and possibly other input types based on the data being entered.
   2. include appropriate event handlers to refresh the displayed data when forms are submitted.
   • One possible implementation of CRUD actions could be to use a widget such as Bootstrap’s modal to open a popup that lets users work with each data entry. Use a flow that reflects best practices from around the web. For example, if you choose to use a modal you might:
     1. have one modal that allows users to add new data values.
     2. have one modal that allows users to edit existing data values.
     3. have one modal that allows users to delete existing data values.
     4. include appropriate event handlers to refresh the displayed data and dismiss the modal.
6. Your site must have a way to persist data and transfer between browsers/devices (choose at least one option below):
   1. Be able to export data to a JSON file that can also be imported back into the app.
   2. Create a URL that encodes the data in the query string (e.g., ?data=...), so that sharing or bookmarking the URL allows others to see the same data.
7. Your site should provide the user a means to clear their data (to start from a fresh beginning).
8. Each page and stylesheet of your site must validate without any warnings or errors using the Nu Validator and WAVE Web Accessibility Evaluator.
9. Your app must demonstrate your understanding of asynchronous JavaScript.
   • For example, make at least two network requests to third-party APIs via fetch(), and sequence the requests such that you make the 2nd request only after you have the response from the 1st (e.g., make a request to get a list of movies from an API, then make a second request to get details about each movie based on the IDs returned from the first request).
   • Another example is using the Origin private file system API to read/write files asynchronously.
   • Alternatively, your application may issue multiple requests that are combined when all promises are resolved. Or you may do something else that is at least as complex as this and the previous bullet point.

Submission

Your final deliverable is your GitHub repository. Please verify that all files are committed, pushed, and ready for grading. Your final code will be deployed to https://w3stu.cs.jmu.edu/cs343s25/teamX/.

Presentation

Each group will have 6-8 minutes to present their final project to the class. Divide the time into 3–4 minute segments: one for each student. Do not prepare slides. For each 3–4 minute segment, do the following:

• Demonstrate how the application works in the browser.
• Consider walking the class through how to use the app.
• Walk through the source code (HTML, CSS, JavaScript).
• Answer questions and/or invite comments throughout.

You don’t have to show your entire code; focus on the most interesting parts. Explain any problems you encountered and how you solved them. Give the audience a sense of what you learned during this project.

Be sure to demo both the “desktop” (large screen) and “mobile” (small screen) layouts of your app. You may use the DevTools to simulate a mobile device, or just resize the browser window, or something else.

The presentation must involve all group members—don’t allow one person to do most of the talking. Practice transitions beforehand so you know how to support each other and tell a cohesive story about your work.