1
Watch
1
Star
0
Fork
12
Issue
williamphelps13
williamphelps13
pushedAt 1 month ago

williamphelps13/pocket-somm

Pocket-Somm - Solo React Project

Deployed Site -

https://pocket-somm.surge.sh/

Table of Contents

GitHub Repo -

https://github.com/williamphelps13/pocket-somm

Demo

Gif

Main Page

Varietal Page

Recipe Fetch Error

Project Spec

Link to Turing School of Software Project Spec

Instructions

  • The purpose of this app is to help users to find a wine varietal that fits their current preferences and then find recipe pairings for that varietal
  • The main page allows the user to immediately select a white or red varietal and be navigated to a page with information and recipes that pair with that varietal
  • The user can also fill out a 8 question guide that will narrow down the varietals based on and while the questions are answered
  • The selected varietal page has information about that varietal including similar varietals that the user can directly navigate to
  • The varietal page shows several possible food pairings for the selected varietal and displays recipes of the first listed pairing
  • The user can click on any of the pairing suggestions to see recipes based on that keyword

Setup Instructions

To run the application on a local machine:

  • Clone down repository
  • cd into repository
  • Run npm install
  • Run npm start
  • Webpage will open in seperate browser

Technologies Used:

  • React (Hooks, propTypes)
  • HTML
  • CSS
  • Cypress
  • Router

Learning Goals and Project Reflections

-Learning Goals

  • Create an application that solves a problem for a selected audience
  • Further develop skills in React, Cypress, and UX/UI

-Challenges

  • I deeply enjoyed adding multiple user flows to the application to fully engage the users of my niche audience
  • However, these multiple flows were very time consuming and involved extensive planning and refactoring to maintain organization within the components

-Wins

  • I am very happy with how engaging this application has become
  • The user can simply jump in and see pairings
  • The user can click on 8 questions each with several possible answers and uniquely see the results update before their eyes (normally a form like this would have a submit button and only show the results after the button is clicked)
  • The user can then select similar varietals
  • The user can select other pairings
  • The user can circl back and complete the guide again
  • I deeply enjoyed building this multi-pathway, unique app

Future Additions

  • I asked for approval to use Swiper carousel library for the guide and the recipes, however, due to time constraints this additional feature did not make it into the first iteration
  • I plan to add this swiper as well as extensive CSS to have the app's styling equal its functionality

Project Managers

  • Scott Ertmer
  • Kayla Gordon
This project was created for Turing School of Software and Design
2021/09/27

Back to top

ucloud ads