Project #2
Team 1
Shop & Chef is a disposable grocery list application.
This application is designed for those who are experienced home chefs, or newcomers to home cooking, combining food shopping with new, exciting, and inspiring recipe suggestions.
AS A USER I want an app that will allow me to link my grocery list with potential recipes
WHEN I use Shop & Chef THEN I will enter my log-in credentials
WHEN I successfully log-in THEN I get a shopping list
WHEN I add an item to the item list input THEN I can save the ITEM
WHEN I save an item THEN I can edit, delete, or cross-off an item
WHEN I search for a recipe or ingredient THEN I am presented with a list of recipe choices
WHEN I chose a recipe THEN it's picture, ingredients, & instructions will appear
WHEN I click on an ingredient THEN it will be saved to my shopping list and checked off on this list
WHEN I click the favorite button THEN the current displayed recipe will be saved to my saved recipe list
WHEN I input an ingredient THEN it will be added to a list
WHEN I select a specific ingredient on my list THEN I am prompted with potential recipes to use this ingredient
WHEN I have a recipe I like THEN I can save this to a list of favorite recipes
WHEN I return to the site THEN I can access all of my items and recipes
Users can easily add items of their choosing to their shopping list. If they are looking for recipe inspiration, the app has a feature to search for recipes based on the main ingredient as well.
To streamline the experience of creating a shopping list based on recipes, Shop & Chef allows users to add ingredients directly from recipes to their shopping list with a click on the ingredient.
The application also allows users to save and retrieve their favorite recipes.
In the terminal, run the following commands:
npm install expressnpm install express-sessionnpm install --save sequelizenpm install passportnpm install ejs- After completing your installations, begin the server in your integrated terminal by running the command:
node server.js
If the connection is successful, you will see:
🌎 Listening on port %s. Visit http://localhost:%s/ in your browser
Sequelize is a promise-based Node.js ORM which we utilized to streamline usage with MySQL.
Installation:
npm install --save sequelize
Express is the application that we utilized the most through node.js. The servers that we created route to the HTML data and the other to API for the data.
We are running the GET, POST, PUT, & DELETE methods for the data. We render the necessary data to the front end using EJS.
We also used Passport node js middleware for user authentication.
Passport Installation:
npm i passport
We use EJS Templating Engine to render our data as HTML Markup to be viewed on the front end. Through using EJS to create templates for our pages we were able to eliminate redundant code and create more streamlined, dry code for the application.
Installation
npm install ejs
We use jQuery to handle event listeners and AJAX calls to the backend. Our AJAX calls were responsible for our functions carrying data from user logins, sign ups, recipe retrieval and display.
We utilized Axios to handle all of our third party API are done with Axios to keep them hidden.
We used AJAX for all of our front end API calls.
Our styling was created using Bootstrap for our navbar, buttons and user input fields. We used Bootswatch for our theme, and quite a bit of custom css written for placing the background image, font styling, custom color schemes and other fine tuning of the application's appearance. Included in our custom css styling is a google font to style all of the text in our application.
App Functionality: Create New Account (gif demo)
App Functionality: Adding, crossing off as purchased, and deleting items from shopping list (gif demo)
App Functionality: Searching for a recipe and adding ingredients to the shopping list (gif demo)
App Functionality: Saving favorite recipes (gif demo)
We have several ideas for ways to expand and enhance the application in the future:
- Adding the ability to share your shopping list easily through email or with other users of the app.
- Adding a feature also provided through our API for the app to suggest wine pairings with our recipes.
- Adding a feature to show calories associated with recipes.
- A "Frequently Shopped Items" database.
- The ability to display estimated cost for each item on a user's shopping list, along with an estimate for the total cost of the list's contents at the bottom.
Licensed under the MIT License. Copyright © 2021
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent