Learning Objectives

With this assignment you will demonstrate:

• The ability to ideate, design, implement, and deploy a beautiful, secure web-application of your choice, using both and API and a secure database, in a team of four students, with well defined roles, following modern development practices.

Readings and Videos

Please:

• Keeping reading relevant React, Firebase, and Google Cloud docs.
• Review all applicable course notes.
• Watch videos of your choice.
• Come to office hours.

Instructions

There are multiple requirements for this assignment. Make sure each of the following are completed.

• Go back to your Project #1 on Replit or Code Sandbox and clean up your code, using programming best practices you’ve learned, and apply any grading feedback you received.
• Go back to your Project #1 and put it on GitHub. Make sure the README.md file is perfect.
• Go back to your Project #1 and deploy it to GitHub Pages.
• Go back to your Project #2 and clean up your code, using programming best practices you’ve learned, and apply any grading feedback you received.
• Clean up your Project #3 with any feedback you have received. Your source should already be on GitHub and your project deployed to Firebase.
• Form a team of ~4 students to make a new project. The project must properly use authentication, at least one external API, and a database. The source code must be on GitHub. The final app must be deployed on the public web.
• Ideate the project according to the Ideation Process introduced in class.
• Make a copy of this project report sheet and fill out your copy. Fill this out like you care. You will be graded on how professional it is. Follow the instructions on the sheet for submission.
• Ensure the code for your project is perfectly formatted. Use Prettier. This is not an option.
• Use an accessibility validator.
• Ensure the README of your project is appropriate.
• Submit in BrightSpace links to your GitHub repo, whose README must have a link to where your app is deployed.
• Give a 5-7 minute final presentation and demo during the last week of class or during finals week. Attendance is mandatory to show respect to your fellow students.

Project Checklist

As usual, the following will be checked:

• Good variable and function names, good separation of concerns, good code organization, etc.
• You have followed React best practices, and JavaScript best practices in general
• A sophisticated layout. It is okay to use Bulma or Tailwind. Or just do regular CSS, employing Grid, Flex, Position or a combination of each
• Is responsive: it must look good on mobile and web (narrow or wide screen)
• Is visually balanced and aesthetically pleasing: Use colors and contrast properly! Line things up! Get a designer friend of yours to critique your work
• Is in a GitHub repo with a proper name: named after the project, not something generic like “hw4”
• Has a detailed README.md file, that not only explains the project (as a real README should), but also with a link to the runnable site deployed on Firebase Hosting
• Is built from code (all files) that is flawlessly formatted, and that means that you not only indent and space 100% consistently, but that you are also perfectly consistent with blank-line spacing where necessary (Prettier will help with most things.)
• Is run through an HTML and an accessibility validator

This list is incomplete, but should be helpful to you, in that it is “better than nothing.” The items here should be rather obvious by now, one would hope.

Presentation Guide

The presentation format will be ”Lightning Talk” with between 2-6 slides. No more than 10 minutes total. Please employ the guidelines below.

• Favor pictures to words, but some words are okay.
• Be humorous if you can, but don’t try humor if it won’t work.
• With title slide up, begin with the “Hello, I’m ____ / and I’m ____ / ....” with each person introducing themselves. The last person, after saying their name, says “and we’re ____ and our project is ____.”
• First part of presentation explains your user and their needs.
• Then have a super short demo—a pre-recorded video is ok.
• Following the demo, wrap up with a list of technologies used. Say what APIs you used and what you put in the database. Was something cool, hard, or annoying? Mention it quickly.
• One question from the audience.
• Say thanks! Then everyone claps.

It is recommended that you find time to practice before the official presentation.