Web Development Project 7 - Crewmates

Submitted by: Mycah Accad

This web app: This web app lets users create, edit, and manage their colorful crewmates inspired by Among Us. Each crewmate can have unique roles, colors, and attributes that define their personality or job within the crew.

Time spent: 10 hours spent in total

Required Features

The following required functionality is completed:

• The web app contains a page that features a create form to add a new crewmate
  • Users can name the crewmate
  • Users can set the crewmate’s attributes by clicking on one of several values
• The web app includes a summary page of all the user’s added crewmatese
  • The web app contains a summary page dedicated to displaying all the crewmates the user has made so far
  • The summary page is sorted by creation date such that the most recently created crewmates appear at the top
• A previously created crewmate can be updated from the list of crewmates in the summary page
  • Each crewmate has an edit button that will take users to an update form for the relevant crewmate
  • Users can see the current attributes of their crewmate on the update form
  • After editing the crewmate's attribute values using the form, the user can immediately see those changes reflected in the update form and on the summary page
• A previously created crewmate can be deleted from the crewmate list
  • Using the edit form detailed in the previous crewmates can be updated feature, there is a button that allows users to delete that crewmate
  • After deleting a crewmate, the crewmate should no longer be visible in the summary page
• Each crewmate has a direct, unique URL link to an info page about them
  • Clicking on a crewmate in the summary page navigates to a detail page for that crewmate
  • The detail page contains extra information about the crewmate not included in the summary page
  • Users can navigate to to the edit form from the detail page

The following optional features are implemented:

• A crewmate can be given a category upon creation which restricts their attribute value options
  • User can choose a category option to describe their crewmate before any attributes are specified
  • Based on the category value, users are allowed to access only a subset of the possible attributes
• A section of the summary page, displays summary statistics about a user’s crew on their crew page
  • The number of members with a certain attribute visualized using pie chart
• The summary page displays a custom “success” metric about a user’s crew which changes the look of the crewmate list
  • Compute success probability based on each crew's attributes
  • Shows metrics as charts

The following additional features are implemented:

• The website is fully responsive, providing an optimal viewing experience on mobile, tablet, and desktop devices.
• Enable toggling between light and dark mode

Video Walkthrough

Here's a walkthrough of implemented user stories:

GIF created with ScreenToGif

License

Copyright [2025] [Mycah Accad]

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.