Sorting Hat

OVERVIEW:

The purpose of the application is to assign a person to one of the four Houses in Harry Potter. Once the user's name is submitted, a card appears with the House name, color and values.

DESCRIPTION OF USER:

The ideal user for this app is someone looking to randomly assign a group of people into teams.
This app prevents any biases in team assignments.
The user can recreate new teams as many times as they need.
In a teaching setting, the Harry Potter theme will get children excited about being assigned randomly.

FEATURES:

When a new student is added, an object is created and pushed into an array of students, which prints to the DOM.
When assigned, the color of the student card will changed based on which house they are assigned to.
The values for each house will be printed on the student card.
There is a button to expel students. When the button is clicked, that student object is pushed to a new array and a new card will print to the DOM with a message declaring that the student has joined Voldemort.
When all students are expelled, a message is printed to the top of the page: "Voldemort has taken over Hogwarts."

WALKTHROUGH VIDEO OF THE SORTING HAT:

https://www.loom.com/share/6ac390a632b3400a9a05c53e7fdfee2a

HELPUL LINKS:

LINK TO Project board
DEPLOYED link

CONTRIBUTORS:

Gabby Tobermann

SCREENSHOTS:

Plated

See Live Demo of Plated

Walkthrough Video of Plated

MVP Walkthrough Video of Plated

So, What Is Plated?

Plated is where a recipe book meets a meal planner. Individual users are able to create, view, edit and delete recipes then with those recipes, users are able to plan out their week's dinners.

Plated eases the burden of the all too common question of "What's for dinner?" with it's intuitive design for users wanting to plan all of their dinners for the week. Plated users pick their meals from their own recipes; thus, giving all Plated users a peace of mind knowing that dinner will be something they actually like. Plus, having all user's recipes in one place will help users remember what exactly they can make! Thanks to Plated, meal planning is made easy, so users can keep living their lives without the constant stress of trying to figure out what tonight's dinner will be. If this sounds good to you, Plated is what you have been looking for. Happy meal planning!

Back to List of Topics

MVP Features

MVP Walkthrough Video of Plated

Recipes:

Add a new recipe
View snippet of all recipes associated to a specific user on recipes page
View single recipe's detail by clicking "View Details" on snippet recipe card
Edit single recipe by clicking "Edit" button on single recipe view. Recipe form will render on the DOM again, but this time with previous entries associated with the recipe ready for any updates
Delete a single recipe by clicking "Delete" button on single recipe view. This recipe will be permanently deleted from Plated. **If recipe happens to be assigned a day of the week then deleted, that recipe will be removed from the day of the week as well once user returns to home page
Search for a recipe by any part of its name on the recipes page. Click the "Reset Search" to avoid having to backspace the search entry.

Days of the Week Calendar:

Choose a recipe from user's stored recipes for a specific day
Two views of the day of the week card:
- When a recipe has not been assigned to a day, an "Add" button renders in the center.
- When a recipe has been assigned to a day, the snippet view of a recipe will render with a "Change Dinner" button and a "Clear Dinner" button.
"Change Dinner" button brings the dinner form back with previous selection rendering ready to be changed to another meal.
"Clear Dinner" button deletes the dinner entry, but NOT the recipe that was there. Once dinner entry is cleared, the day of the week card reverts back to an "Add" button in the center.
"Clear the Week's Dinners" above the calendar of the week works like the "Clear Dinner" button except instead of clearing just one dinner entry, clicking this button will clear all dinner entries for the week. Great feature when it's time to sit down and plan the upcoming week's dinners.

General:

All Plated users are authenticated at sign-in thanks to Google Firebase, so everything done by a user on Plated will never change anything on another user's view/account.

Back to List of Topics

Stretch Features

CSS Update:

Changed the entire look and feel of Plated. Hello new color scheme and font! Plated's CSS Branch vs Plated's MVP Branch

Dropdown select with search ability:

On the dinner form, users are now able to search for a recipe to select for dinner thanks to React Select's component AsyncSelect.

CRUD on Going Out to Eat Meal Cards

Create:

New Navbar option called "Add a Going Out Meal" for Plated users to click to access the form for going out.
Going out form asking if the Plated user will be eating at a restaurant or someone's house and user will choose.
- Note the difference between the input field's placeholder text depending on user's choice.

Read:

New going out to eat card renders on "Your Meals" page along with all recipes and other going out to eat cards associate with the authenticated Plated user.
Any going out to eat cards will render on user's dinner calendar if selected for a specific day's dinner plans.

Update:

An edit button renders on the going out cards for user to edit the existing card.
- Note how a going out to eat cards rendering on the dinner calendar do NOT render the edit button, but the edit button is on the cards when they render on the "Your Meals" page for UX/UI purposes.
Once edit button is clicked, the going out to eat form renders again, but this time with the previous inputs from the user to update.
User is able to click the update button on the form then see their updated going out to eat card wherever it is rendering.

Delete:

Plated users can delete individual going out to eat cards by a click of a button.
- Note how a going out to eat cards rendering on the dinner calendar do NOT render the delete button, but the delete button is on the cards when they render on the "Your Meals" page for UX/UI purposes.
Once going out to eat card is deleted, it will no longer render anywhere on Plated including the dinner calendar if it was previously selected for a dinner.

Back to List of Topics

Try Plated Out For Yourself

Set up a Firebase project - Here's how: Firebase Setup & Authentication
Clone Plated to your local machine

[email protected]:scamp925/Plated-Front-End-Capstone.git

Move into directory

cd Plated-Front-End-Capstone

Once in Plated's code, create a .env file at the root of the project and paste the following keys into the .env file:

NEXT_PUBLIC_FIREBASE_API_KEY=""
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=""
NEXT_PUBLIC_FIREBASE_DATABASE_URL=""
NEXT_PUBLIC_FIREBASE_PROJECT_ID=""
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=""
NEXT_PUBLIC_FIREBASE_APP_ID=""

The last portion of the Firebase walkthrough from step 1 highlights where to find the values to put in the empty strings in the code snippet of step 4. From Firebase, copy the values and paste them into the empty strings of the respective keys located in the .env file.
Import sample data found in data folder in Plated to Realtime Database in your Firebase project (OPTIONAL)