annekeschuette / capstone-project

This is my capstone project, which I built in 4 weeks for the @neuefische Web Development Bootcamp that I attended in 2021. It's an App for Wine and Dish Pairing, called "Vinz."

For an awesome experience view this profile in darkmode ✨

Hi there! 👩🏻‍🦰✌🏻

Seems like you've stumbled upon an awesome gem on the webz! 💎 Let me introduce myself:

• Web Developer and UI Designer since 2007
• experienced IT Project Manager and leader of software development teams for half a decade (mostly e-Commerce projects, B2C and B2C)
• reboot as Fullstack Software Developer missing hands-on-development
• working as a Software Developer in the public healthcare sector for almost two years by now

This journey totally reflects my passion for technology, exploration and agile development. 🙌✨

Fun facts about me:

• Action movie narcoleptic 💥😴
• I know all 151(+1) first-gen Pokémon 🤓
• to relax I breed dinosaurs 🎮🥚🦖
• Professional seagull imitator 🌊📢🐦

If you'd like to team up with me on a project or simply like to connect, feel free to send me a DM/invite on LinkedIn.

Since I am working on non-public projects, notice that this account is now mainly used as a playground.

AD: In order to refurbish my coding skills I attended a three-month Coding Bootcamp of neue fische in 2021 (MERN stack - take a look at my capstone project, if you like! 🚀😊).

capstone-project's Issues

Button

Value statement

As a user
I need a button
so that I can interact with the app**

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• Button has two different states (default + active) which can be recognized by color (see design)
• Button can include SVG-Icons, which are positioned left or right inside the button

Tasks

• Write Test
• Create button component (Storybook)
• Add styling
• Test on mobile and desktop

Wine Storage Page

Value statement

As a user
I need to see all my saved wines in a list
so that I can access and read their information again or remove them from the list

Description

WineStoragePage component

Acceptance criteria

• the WineStoragePage renders all bookmarked wines => all wines from the savedWines array
• all bookmark-icons on wine cards have the active state
• wines are removed from list by tapping the bookmark icon

Tasks

WineStoragePage component

• Write unit tests for WineStoragePage component
• implement localStorage for savedWines
• Create a WineStoragePage component, which renders WineListing with array of savedWines as WineCards
• implement router for WineStorage
• test in browser + mobile

Wine Storage function (bookmark)

Value statement

As a user
I need a bookmarking function on wine cards
so that I can ** add** them to a list of saved wines to quickly find them later on

Description

Acceptance criteria

• every WineCard has a Bookmark Icon
• the bookmark-icon has two visual states: active / inactive (default)
• the state toggles on click
• bookmarked wines are saved into an array savedWines
• de-bookmarked Wines are removed from the array savedWines

Tasks

• Extend unit tests for WineCard with bookmarking
• Add bookmark-Icon to WineCard component
• Style the two states

Integrate bookmark function in App, which

• toggles state on click and
• saves wines to a new array or removes them, when de-bookmarked
• Test on mobile and desktop

Test Data (Wines)

Tasks

• Connect project to database
• Create test data set:

{
name: "Bordeaux ..." 
}

Listing of Wine Recommendations

Value statement

As a user
I need a listing of wine recommandations
so that I can decide which wine I want to try

Description

Acceptance criteria

The listing

• shows multiple cards with different values
• is scrollable

The cards show the following information:

• Image
• Name of wine
• Description (trimmed, 4 lines max.)
• Price
• Rating (as number)

Tasks

• Write unit tests for wine card component
• Create WineCard component (Storybook + styled components)
• Write unit tests for ResultListing component
• Create ResultListing component (Storybook + styled components)
• Implement ResultListing component in App, displaying recommendation data
• Test on mobile and desktop

JournalForm Implementation WineDetail

Value statement

As a user
I need to see my personal notes and rating of a wine on it's detail page
so that I can look up that information later on and edit it on demand

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

On the detail page

• the personal rating is displayed using empty/filled star/bottle icons (1-5)
• the rating can be edited by simply clicking the icons
• the personal notes are rendered on the page
• An Edit-Button (see wireframe) redirects the user to the JournalForm to edit and save the content.

Tasks

• Implement Rating and Notes components on WineDetail page with initial values from localStorage
• Write Tests
• Add styling
• Test on mobile and desktop

Search Form

Value statement

As a user
I need a search form to search by dish, an ingredient, or a cuisine
so that I can find matching wines for my planned menu

Description

Acceptance criteria

SearchForm

• the SearchForm contains an input field
• the submit button is disabled initially and form cannot be submitted by hitting enter
• a minimum of 3 characters typed is required until search button becomes active / form submit is possible
• enter or tap on search-button submits the form

Results

• Results are rendered via WineListing component
• an empty result returns a message that nothing was found

Tasks

• Write tests for SearchForm
• Create SearchForm component
• Write test for API request
• Write GET request to API, which passes input value
• Accept results from API and render as listing
• implement fallback message, if results are empty: "Sorry, we didn't find any matches for "{searchValue}". You could try another term or similar dish."
• Implement minInput function to check input on minimum of 3 characters and control button state
• Test on mobile and desktop

Test Data (Recipes)

Tasks

• Check out whisk API
  https://docs.whisk.com/api/recipes

• Check out spoonacular API
  https://spoonacular.com/food-api/docs#Search-Recipes-by-Ingredients

WineDetail Component

Value statement

As a user
I need to see details about a wine when I click on a WineCard
so that I can read more information about it

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

The detail page/overlay

• shows the title, full description, price, average rating, score
• displays an image
• renders a deeplink as button or textlink (external)

Tasks

• Add Router
• Write Tests
• Add styling
• Test on mobile and desktop

Go-Back Mechanic (for Detail Pages / Overlays)

Value Statement

As a user
I need a back-button on overlays and detail pages
so that I can easily navigate back to the previous page

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• the button is visible on the subpages (i.e. "/wine-recommendation")
• the button correctly redirects to the respective previous/parent page
• the navigation contains a new button, which redirects to the current search page (Route: "/")

Tasks

• Add Back-Button to Header component
• Extend Navigation component with Search-Button (Lens-Icon)
• Write tests
• Check/extend Storybook
• Test in browser and mobile

JournalForm

Value statement

As a user
I need to have a form to add a personal rating and notes to a wine
so that I can keep a journal about wines I've tasted

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• the personal Rating is displayed using empty/filled star/bottle icons (1-5)
• the Rating can be edited by simply clicking the icons
• the Textarea has a character counter and allows input of 300 characters max.
• Values of Rating + Textarea are stored in MongoDB

Tasks

• Create Rating component (0-5 Stars, incl. Storybook)
• Create Textarea component (incl. Storybook)
• Add character counter function to Textarea (max. 300 characters)
• Create JournalForm component with Rating + Textarea component (incl. Storybook)
• save new values in MongoDB incl. user-and wine-IDs
• Write Tests
• Add styling
• Test on mobile and desktop

Later Features

• make textarea inline editable component
• Date + Datepicker

Navigation

Value statement

As a user
I need a navigation
so that I can access all pages of the app

Description

Navigation component

Acceptance criteria

• the Navigation shows two nav items: "Explore" and "Wine Storage" (see wireframes above)
• the corresponding nav item for the active page is highlighted (see wireframes above)
• the app initially renders "ExplorePage"
• the correct page is rendered on click
• the subtitle in app header is changes to "Wine Storage" on page switch

Tasks

Navigation component

• Write unit tests for Navigation component
• Create a Navigation Component
• Create/expand router for "ExplorePage" and "WineStoragePage"
• test in browser + mobile

Test Data (Food Categories)

App-Header

Value statement

As a user
I need to see an app header with a title
so that I know in which area of the app I am currently in

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• The App Header is at top of the app and
• it accepts two variables: title and subtitle
• the values of the variables are rendered as H1 (title) and H2 (subtitle) in the front-end
• The Text is centered

Tasks

• Write Test
• Create AppHeader component (Storybook)
• Add an App Grid
• Add propTypes
• Add styling
• Test on mobile and desktop

Category Cards

Value statement

As a user
I need to see food categories
so that I can choose the food on which the recommendations should depend

Description

Acceptance criteria

• it lists main categories as cards on a seperate page/overlay (see wireframe)
• after tap on a main cat, its subcategories are listed (see wireframe) on a seperate page/overlay (see wireframe)
• every category has an icon
• every category displays the category title
• the header subtitle changes according to current page
• the subpages have a back button in the header to browse back to previous page
• tap on deepest category card submits search and shows results list of matching wines

Tasks

• Write unit tests for CategoryCard and CategoryList components
• Write unit test for search logic
• Create CategoryCards component (Storybook)
• Create CategoryList component (Storybook)
• Integrate CategoryListings (main, sub) into App via routes
• Add search logic
• Add styling
• Test on mobile and desktop