Mock Grocery Store App

A mock grocery store application, for a take home challenge
Explore the docs »
Check it out! »

Table of Contents

1. About The Project
   • Built With
2. Setup
3. Usage
4. Notes
5. Roadmap
6. Contact

About The Project

This web application was created for a week-long take home challenge. It allowed me to utilize skills learned in my bootcamp experience, and beyond, to craft a solution that is engaging and fun!

Built With

• 
• 
• 
• 
• 

(back to top)

Setup

• Clone the repository to your local machine by following instructions here
• Install dependencies:

npm i

• Start the project

npm run dev

Note: in order to utilize the search functionality, you will need API credentials, which can be obtained here, using the following directions:

• Step 1: Sign up for a free DEVELOPER account for the Food Database API here
• Step 2: Be sure to select the Developer plan for the Food Database API in the Choose your plan drop down menu.
• Step 3: You will be asked to provide an organization during the sign-up process. Please enter your name for the organization or your own personal organization name/identifier if you have one (this is to ensure that you can make use of the free Developer plan).
• Step 4: Once your account is fully set up, you will be able to set up an Application here, which is where you will be able to find your Application ID and Application Keys, both of which you will need to make GET requests (you're welcome to name your application whatever you'd like to call it).
• Step 5: You should now be able to use the Edamam Food Database API to search for food items.
  • Here is an example GET request: https://api.edamam.com/api/food-database/v2/parser?app_id=[APP ID HERE]&app_key=[APP KEY HERE]&ingr=[FOOD ITEM HERE]&nutrition-type=cooking

Then create up a local .env file in the root of the project:

touch .env

and add the follwing to the .env file:

VITE_APP_API_ID=[YOUR-APP-ID-HERE]
VITE_APP_API_KEY=[YOUR-API-KEY-HERE]

(back to top)

Usage

• Please visit the deployed site

(back to top)

Notes

There were lot of features and additional styling that I wanted to tackle during this project, but I had to scope down due to the completion timeframe of a week. There is room for refactoring and improvement, but overall I'm happy with the result. Most importantly, I learned a lot along the way!

Update:
I have submitted the project and completed my final interview. I am thankful for the opportunity, and intend to keep updating this project for additional learning opportunities.

Functionality includes...

• Intuitive user flow
• Product search
• Adding to cart
• Removing from cart
• "Purchasing" an order
• Confirmation of purchase

Wins:

• I was happy with being able to complete the MVP in a week (and complete a stretch feature)!

Challenges:

• I attempted two other stretch features, but had to scope down due to time constraints. I look forward to attempting them at a later time.

(back to top)

Roadmap

• Add/Subtract Product Quantities
• Filter Search Results
• Improve Accessibility
• Improve Responsivness

(back to top)

Contact

API Used

• edamam.com was used for this project

(back to top)