Webapp where smoothie enthusiasts can create and manage their own unique smoothie recipes!
NaviSmoothie achieves the following objectives:
- Users can create new smoothie cards with unique smoothie names
- Users can enter ingredients, instructions, and other notes on each smoothie card
- Users can delete a smoothie card
- Users can edit/update existing info on a smoothie card
- Users can return to their smoothies in a new browser session with Window.localStorage
- Users can search smoothies by name
- In the project directory, run in terminal:
Runs the app in the development mode.\
-
Open http://localhost:3000 to view it in the browser OR --
-
Go to https://yutingwu4.github.io/NaviSmoothie/ and play with it!
-
Navi welcomes you to a NEW YOU!
The homepage consists of a navbar, a welcome slogan, a search bar, and a few starter smoothie recipes for the new smoothie enthusiast! The "View All" links you back to the homepage at any time. You can create new smoothie cards and record your favorite smoothie recipes by clicking on "Create New." Once created, smoothie cards populate the homepage in square tiles by smoothie names with latest additions at the end of the pool.
- Upon clicking on the smoothie cards, a window pops up displaying the smoothie name, ingredients, instructions, and notes, where you can make and save changes or delete the card altogether. But remember! As much as we would like to use our fave names, we can only have unique names for our smoothie recipes collection!
- The search bar allows you to get to your smoothie cards without scrolling down the page - a few keystrokes with a click on the "Search" button can bring up relative matches based on the input characters. You can then select the desirable smoothie card to recall the recipe. What was that smoothie you made last week? Found a new fave recipe that you want to keep? No worries! Create a new smoothie card and it will stay even after you refresh the page!
Whoops! Are you searching for a smoothie that has not been recorded? We have friendly reminders, too. :)
Dear smoothie enthusiast, we hope you enjoy this tool.
UI sketch
- React, React Hooks, React Router
- Sass
- Bootstrap
React was chosen for readablity, flexibility in rendering HTML through JSX. It streamlines the process of creating web components on a single-page-application and leverages more efficient renderings (based on deterministic view renderings). Given the scope of this application and the lack of asynch i/o operations, using Hooks and Router allows for reusability and related business logic to be kept in close proximity. Although there may not be a strong separation between container and display components, the prop drilling pattern is minimized and state can be localized to singular components, which makes the code more readable and maintainable. Hooks also provides a function for useLocalStorage that makes the use of local caches readily available and saving or updating current the state on the browser straightforward.
For styling, Bootstrap was chosen for ease of use and having consistent aesthetics throughout the application. Sass has an advantage over CSS in variable assignments, which was preferred when organizing color palettes.
Lastly, a couple of jest/enzyme unit tests were performed to ensure code integrity.
- Styling to account for long smoothie names, spacing of buttons on edit form, the display grid for smoothie cards
- Website mostly complies to WCAG contrast ratios, but would like to account for other web accessibility standards more thoroughly
- Fix searching mode to allow users to edit or delete smoothie card. State of modified data in input fields remain only in edit mode; the view does not get updated
- Delete functionality possibly has overlapping code; needs to be refactored
- Revisit id/key logic of each card
- Add images to smoothie cards