Description: I am wanting to implement an outfit picker for skiing/snowboarding. This program will allow you to select combinations of helmets, jackets, and pants. You will be able to save these different combinations to a closet where you can view them later. This will be similar to the zen garden application shown as an example in the assignment details.
Note
This is a template for your startup application. You must modify this README.md file for each phase of your development. You only need to fill in the section for each deliverable when that deliverable is submitted in Canvas. Without completing the section for a deliverable, the TA will not know what to look for when grading your submission. Feel free to add additional information to each deliverable description, but make sure you at least have the list of rubric items and a description of what you did for each item.
Note
If you are not familiar with Markdown then you should review the documentation before continuing.
Note
Fill in this sections as the submission artifact for this deliverable. You can refer to this example for inspiration.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Proper use of Markdown
- A concise and compelling elevator pitch
- Description of key features
- Description of how you will use each technology
- One or more rough sketches of your application. Images must be embedded in this file using Markdown image references.
Do you ever struggle to choose a new ski outfit for the season or plan out good combos to keep you looking steezy on the mountain? Well look no furtuer, the Ski Outfit Picker is the one stop shop for you! This app allows you to explore outfit variations and didferent combos of helmets, ski jackets, and snow pants BEFORE you hit the mountain or purchase that new jacket!
The sketch on the top left shows the initial login screen while the closet interface is displayed on the bottom left. The main outfit picker is displayed on the right. Users authenticate first, then select a helmet, jacket, and pants from card-based options with clear visual feedback for selected items. The closet view is where users can see previously saved outfit combinations. Each saved outfit displays the selected helmet, jacket, and pants together for easy comparison and recall.
sequenceDiagram
actor User
participant Frontend as React App
participant Backend as Service
participant DB as Database
participant API as Weather API
User->>Frontend: Log in
Frontend->>Backend: POST /login
Backend->>DB: Verify credentials
DB-->>Backend: Auth success
Backend-->>Frontend: Login confirmed
User->>Frontend: Select helmet, jacket, pants
Frontend->>API: Request current weather
API-->>Frontend: Weather data
User->>Frontend: Save outfit to closet
Frontend->>Backend: POST /closet
Backend->>DB: Store outfit
Backend-->>Frontend: Outfit saved
- Ability to scroll between different helmets, ski jackets, and ski pants and view different outfit combinations
- Ability to save outfit combinations to a closet
- Ability to get suggetions based on current weather
- Notifications when other users save outfits
I am going to use the required technologies in the following ways.
- HTML - Uses proper semantic HTML structure with two main pages: a login page and an outfit picker page. Includes sections for helmet, jacket, and pants selection, as well as navigation links to view saved outfits in the closet.
- CSS - Provides responsive styling that looks good on different screens. Includes clean spacing, strong color contrast, and subtle animations to highlight selected gear and interactions.
- React - Implements a single-page application with reusable components for login, outfit selection, and closet viewing. The UI updates based on user actions and authentication status.
- Service - Backend service with endpoints for user registration, login, logout, retrieving gear options, and saving or retrieving outfits. Integrates a third-party weather API to enhance outfit suggestions.
- DB/Login - Stores user authentication data, available gear items, and user-saved outfit combinations. Supports retrieving closet data specific to each authenticated user.
- WebSocket - Uses WebSockets to broadcast real-time updates to other users when anyone saves a new outfit.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Server deployed and accessible with custom domain name - My server link.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- HTML pages - I created separate html pages for Home, Outfit Picker, and Closet View pages.
- Proper HTML element usage - Use of Body, nav, main, header, footer, etc, tags where applicable.
- Links - In the header on each page, there is a link that directs users between separate pages: Home, Outfit Picker, and Closet View
- Text - I updated the text on each page to mirror the mock-ups that I previously delivered and ensure proper navigation of site.
- 3rd party API placeholder - On the closet view page, I included the weather on the bottom which will display today's weather and update accordingly.
- Images - Both the Outfit picker and closet view pages include many images
- Login placeholder - The Home Screen has a placeholder for login. Username is displayed on Outfit Picker page once logged in.
- DB data placeholder - The Closet View page supports the retreval of user-specific saved outfits and will update based on user and saved data.
- WebSocket placeholder - On the Outfit Picker page at the bottom, there is a placeholder for alerting users when anyone saves a new outfit.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Visually appealing colors and layout. No overflowing elements. - I did not complete this part of the deliverable.
- Use of a CSS framework - I did not complete this part of the deliverable.
- All visual elements styled using CSS - I did not complete this part of the deliverable.
- Responsive to window resizing using flexbox and/or grid display - I did not complete this part of the deliverable.
- Use of a imported font - I did not complete this part of the deliverable.
- Use of different types of selectors including element, class, ID, and pseudo selectors - I did not complete this part of the deliverable.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Bundled using Vite - I did not complete this part of the deliverable.
- Components - I did not complete this part of the deliverable.
- Router - I did not complete this part of the deliverable.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- All functionality implemented or mocked out - I did not complete this part of the deliverable.
- Hooks - I did not complete this part of the deliverable.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Node.js/Express HTTP service - I did not complete this part of the deliverable.
- Static middleware for frontend - I did not complete this part of the deliverable.
- Calls to third party endpoints - I did not complete this part of the deliverable.
- Backend service endpoints - I did not complete this part of the deliverable.
- Frontend calls service endpoints - I did not complete this part of the deliverable.
- Supports registration, login, logout, and restricted endpoint - I did not complete this part of the deliverable.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Stores data in MongoDB - I did not complete this part of the deliverable.
- Stores credentials in MongoDB - I did not complete this part of the deliverable.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Backend listens for WebSocket connection - I did not complete this part of the deliverable.
- Frontend makes WebSocket connection - I did not complete this part of the deliverable.
- Data sent over WebSocket connection - I did not complete this part of the deliverable.
- WebSocket data displayed - I did not complete this part of the deliverable.
- Application is fully functional - I did not complete this part of the deliverable.