startup website for CS 260 project
notes.md: https://github.com/colbyj427/CS260-startup/blob/main/notes.md
I want to build a recipe web program that allows users to input, browse and favorite recipes. Users have access to a
pantry which is a database containing all the ingredients they input as things they own. This pantry can be used to
filter recipes so only those which you can make with your current ingredients are displayed. Recipes can also be used to
add ingredients to your shopping list, so if you want to make a recipe, you can easily see what you need to buy.
Create/Login to an account
Add Recipes
Add ingredients to pantry
Add ingredients to shopping list
Favorite recipes
HTML - Uses HTML to structure pages. Home page, recipe pages, pantry and shopping list pages.
CSS - style that is simple with a specific consistent color scheme.
JavaScript - provides login, accessing recipes, selecting ingredients and contributing to lists.
React - Creates dynamic lists/recipe completions as well as composing ingredient/shopping lists.
Web service - Shows favorite recipes of other users, number of recipes made.
Authentication: Used in the login page where users can create an account and sign in.
Database data: Stores users favorite recipes, completed recipes, shopping list, and ingredients they have.
WebSocket data: When a recipe is completed, it is shown on other users screens in real time.
![Drawing of main, recipe, pantry, and shopping list pages of the web program] (https://github.com/colbyj427/CS260-startup/blob/main/Assets/Images/recipeMockup.pdf)
Added structure and placeholders for each technology item and key feature included in the writeup
Added background colors and flex box sturcture to each page.
Stylized each link and nav bars for resizing.
added a create acccount and stylized both it and login page.
stylized all other html pages.
added and stylized buttons and text areas for entering items to recipes/pantry/shopping list.
Added authentication so personal pages only show up after user logs in.
Put all html on same page to be rendered when user clicks a new page.
Added a chat component that uses websocket to send messages to all users on the chat.
Needed to send the message updates to the frontend but the websocket functionality and port all comes from the back.