sgierszewski/hutello

My neue fische bootcamp capstone project

Hi there 👋 I'm Stefanie

I'm a 👩‍💻 Junior Web Developer with a PhD in Biology

• 👩‍💻 I'm a woman in STEM 👩‍🔬
• 🏢 I'm currently working at denkwerk
• 🌱 I’m currently learning to code using TypeScript, React and Storybook
• ⚡ Fun facts:
  • I co-developed the software FishSim for mate-choice experiments with fish
  • I created the fish oracle Molly during the European Football Championship in 2016
• 📫 How to reach me: LinkedIn or XING

My Tech Stack

My GitHub Stats

hutello's Issues

Profile page

User Story

As a user, ...
I want to see a profile page.
I want to see all info I registered for myself.
I want to see my profile picture (and maybe change it).
I want to see all info I registered for my dog.
I want to see my dog's picture (and maybe change it).
I want to add another dog to my profile.
If I have multiple dogs, I want to see all my dogs on this page.
I want to navigate to a different page.

Screenshots

Tasks

• H2: About me
• Component User profile
• H2: My dog(s)
• Component Dog profile
• Component Add another dog
• Component Navigation
• (Optional) Edit profile picture
• (Optional) Edit dog picture
• (Optional) View multiple dogs
• Add initial page CSS

Image/file upload function

Description

Some pages offer the possibility to upload pictures and/or documents.

• Sign up page
• Add another dog page
• (maybe add option to edit picture on profile page?)

Screenshots

Tasks

• Component Labeled input field type "file upload" with icon
• Implement file upload
• ... more details to follow

Favorites page

User Story

As a user, ...
I want to see a list of my favorite search results.
I want to browse through my favorites list (scroll function).
I want to click on a favorite result to get more info (see issue #13 ).
I want to delete a result from the favorites list.
I want to navigate between pages.

Screenshots

Tasks

• H2: My favorite(s)
• Component Favorite result (including Delete button)
• Component Favorites list (array)
• Component Navigation
• Scrollable page/list
• Add initial page CSS

Set global CSS

Description

Set global CSS variables according to Adobe XD design for "Hutello" (https://xd.adobe.com/view/09d8baf3-9171-4417-85b4-f53357989e20-5c8b/)

Screenshot

Tasks

• Import fonts
• Set the root for colors, fonts, sizes
• Set specifics for box-sizing, html, body, a, etc.
• Import global.css to storybook/preview.js

Forgot password page

User Story

As a user, ...
I want to have the possibility to reset my password using my registered email address.

Screenshot

Tasks

• Create XD design for "forgot password" page and update issue tasks
• Add back button (to Login page)
• Add image
• Add info text (paragraph) about how to reset password
• Component Labeled input field (type: email)
• Component ResetPassword button (link to Login page)
• Finish initial page CSS

Labeled input field

Description

Several pages require a labeled input field component of different types (e.g. type password, email, text):

• Login page
• Sign up page

Screenshot

type: email

type: password

type: text

Tasks

• Create labeled input field component

Search results page

User Story

As a user, ...
I want to be reminded of the keyword I searched for.
I want to see a list with all search results.
I want to browse through the list (scroll function).
I want to click on a result to get more info (see issue #13).
I want to mark/save my favorite results (see issue #12 ).
I want to start a new search.
I want to navigate between pages.

Screenshots

Tasks

• "New search" Link leading to Search page (maybe resembling the Search button?)
• H2: Search result(s)
• Component Favorite icon
• Component Search result
• Component Search results list (array)
• Component Navigation
• Scrollable page/list
• Add initial page CSS

Improve responsiveness

User story

As a user, ...
I want to use the app with different devices and enjoy the same UX, independent of the respective device (e.g., resolution, screen width/height and so on).

Screenshots

To Reproduce

When viewed in desktop view, content of several pages in not centered: profile page, details page.
When viewed in small mobile view, content is clipped and too densely packed on screen: e.g. profile page.

Tasks

• Add media queries to account for different screen width/height?
• Add margin to center content? (in body? container per page?)
• Look for other options to increase responsiveness

Sign up Page

User Story

As a user, ...
I want create a user account with account name, password, full name and my address.
I want to upload a profile picture (see separate issue #5).
I want to add documents (see separate issue #5).
I wan to add info for my dog including name, sex, birth date, breed, size and weight.
I want to upload a picture of my dog (see separate issue #5).
I want to add another dog (see separate issue).

Screenshot

Tasks

• Add back button
• H2: Registration
• Use
• Component Labeled input fields for user and dog data
• Decide on which fields are set required for registration (add alert or similar)
• Component Radio buttons for setting the sex of the dog (two choices: male, female)
• Component Add/upload picture
• Component Add another dog
• Add placeholder icons for later image/document upload
• Add placeholder icon for "Add another dog"
• Component Sign up button
• Page needs to be scrollable
• Add initial page CSS

Login page

User Story

As a user, ...
I want to see a login page showing the logo and name of the app.
I want to login using my account name and password.
I want to register in case I don't have an account yet.
I want an option to retrieve my password in case I forgot it.

Screenshot

Tasks

• Component App logo, title and subtitle for header
• Component Labeled input fields for account name and password
• Component Login button
• General page layout
• Forgot password link
• Sign up link
• Add initial page CSS

Navbar

User Story

As a user, ...
I want to have the option navigate between the key pages of the app.
I want to navigate to my profile.
I want to navigate to the search page.
I want to navigate to my favorites.
I want to see my current "location" (clicked icon should look different).

Screenshot

Tasks

• Add NavBar icons
• Component Navbar link/icon
• Set clicked/un-clicked state for NavBar icons
• ComponentNavBar

Search page

User Story

As a user, ...
I want to have a nice looking search page.
I want info on what I can search for (here: city).
I want an input field to write down the city I want to search for.
I want to have a search button to start my search.
I want to navigate to other pages.

Screenshots

Tasks

• Add search page image and subtitle to header
• Component Search field
• Component Search button
• Component Navigation
• Add initial page CSS

Manage user data

Description

Backend needs to manage user data:

• Register new user + dog(s)
• User login
• More info to follow....

Tasks

• Implement/connect MongoDB collection for users
• POST info from input fields on Login page to MongoDB
• POST info from input fields on Sign Up page to MongoDB
• GET user info from MongoDB on Profile page
• More tasks to follow ....

Button with icon

Description

Several pages require a button to submit the user's input (e.g. login page, registration, search page,....).
The button consists of an icon and innerText. Button functionality will follow at a later stage.

Screenshots

Tasks

• Add icons
• 'Component' Button with icon
• Create stories for each variant

HuTa detail page

User Story

As a user, ...
I want to see more detailed info about the selected HuTa.
I want to see an introductory picture/logo of the HuTa.
I want to see a description of the HuTa and its offerings.
I want to see more pictures of the facility if possible.
I want to see the HuTa's contact details.
I want to send a request for my dog to this HuTa.
I want to go back to the previous page.

Screenshots

Tasks

• Component Back button
• Component HuTa header
• Component Huta description
• Component Huta pictures
• Component Huta contact
• Component Send request button
• Add alert "Request send" on click
• Component Navigation
• Scrollable page
• Add initial page CSS

Favorite icon

Description

Favorite icon is used to save favorite search results to the favorites list upon click. The favorite icon has a clicked (violett) and un-clicked (white) state.

Screenshots

Favorite icon clicked (top) and un-clicked (bottom).

Tasks

• Add favorite icon svg (heart)
• Set different colors for different states (clicked: violett/un-clicked: white)
• Set "save" functionality upon click (maybe create single issue for that)

Create test HuTa DB

Description

Create HuTa info to simulate search results (afaik there is no API for such info).
Needed info per HuTa:

• Name
• Logo/picture or placeholder image
• Description
• Pictures
• Contact info:
  • Address
  • Phone
  • Email
  • Website

Tasks

• Create HuTa collection in MongoDB?
• POST info from Search page to MongoDB
• GET search results from MongoDB
• GET detailed info for search results from MongoDB (HuTa details page)
• more tasks to follow....