hugh-burgess / capstonenf2021

Hi there, I'm Hugh 👋

• 🌱 A proud graduate in Web Development at Neue Fische from March-May 2021.
• 💼 Currently employed at DeepBlue Networks AG.
• 🏴󠁧󠁢󠁳󠁣󠁴󠁿 From Scotland originally, living in Hamburg, Germany.
• Fun fact: I also love to make music. Here's some: 🎸.

Experience:

---

📬 Find me at:

 

---

📕 Latest Medium Posts

• Bitesize 3: The Usefulness Of A Staging Branch
• Bitesize 4: Building a CSV to JSON Converter

➡️ more blog posts...

---

capstonenf2021's Issues

Refactor code, clean up - Create Page

Value Statement

As a user seeing the create page for the first time, I want to create a flowing form that is responsive and easy to read so that the user can enjoy the experience of filling out their profile details.

Description

Acceptance Criteria

• The form should be styled.
• The code for this page should be tidied with components and imported functions used where possible.

Tasks

• Create a better structured form with display: grid;.
• Move large chunks of code to components.
• Where applicable, import functions.
• Refactor where possible.

Complexity

Medium/Low

Design Central Framework - Profile Page

Value Statement

As a user of the App, I want to create a responsive flowing design so that users can easily navigate the profile page in a natural way.

Description

Acceptance Criteria

• The profile page will have a picture, a bio, and feedback section and an edit button.
• There is an optional tour button which gives the user an overview of the app.
• There will be a friend count and a rating system also.

Tasks

• Setup stateless elements
• Setup Component for Global Layout.
• Setup multiple Component files in a central components folder.
• Set the text styling.
• Set a default image.
• Use a clip-path where nessessary.
• Define color scheme in the :root folder.

Complexity

Medium

Friends Page Map over Array for cloud, left and right variants.

Value Statement

As a user with a friends list, I want to see dynamic rendering of clouds over the friends list, with each cloud rendering different so that the page looks more organic.

Description

Acceptance Criteria

• Each cloud must have a different shape.
• Clouds may repeat after a certain number.

Tasks

• Use a loop.
• integrate the SVGs from the images folder.
• Render the SVGs dynamically.

Complexity

Medium/Low

Refactor code

Value Statement

As a user of the app, I want to be able to use a responsive light app so that my experience is better.

Acceptance Criteria

• Refactor the code into more organised chunks.

Tasks

• Custom hooks for Parks, Friends and User.
• Refactor all code to resond to above hooks.
• Tidy up server.js
• Tidy up stories
• Button consistency across the app

Complexity

Medium

Fixes

Value Statement

As a user of the app, I want to have a lightweight responsive app that isnt slowed down by unnessesary code, so that my experience is better served.

Acceptance Criteria

• Fix issues across the app.

Tasks

• Create a condition render of the review in the SingleDog page.
• Create a condition render of the ratings in the SingleDog page.
• Create a condition render of the stats in the SingleDog page.
• Push the options to end of the page in singleDog if the page is empty.
• Fix edit page so that uploading a picture or writing in the bio is optional.
• Fix upload button on the Create Page.
• Fix the counter so the Enter button doesn't create an issue.
• Delete bio in addFriendButton and all rules involved.
• Delete unused class names.
• Fix save button so that if no editing is made, a notification is given.
• Move the parks.json to somewhere more convenient.

Complexity

Medium

Input Requirements - Register / Create Profile

Value Statement

As the creator of the app, I want to have a required fields so that there is no mistake of empty rendered fields in the profile page and internal database.

Acceptance Criteria

• Set up input requirements on the register and create profile page.

Tasks

• Username must be required.
• Bio must be required.
• Name must be required.

Complexity

Low

Single Map Page

Value Statement

As a user of the app, I want to view individual parks on the map so as to see updates and left notes for others.

Description

Acceptance Criteria

• The title must be the selected Park.
• There are updates from others about that specific park.
• The user can lleave a note for others.
• The nav bar in the footer.

Tasks

• Create a stateless page.
• Add the title to the top of the page through a a filter and mapmethod.
• The nav bar is always visible.
• Create the basic components for the page.
• Send the notes into LS for that particular park.
• Retrieve the notes on refresh with LS for park-specific pages.

Complexity

Medium/High

Design Navbar

Value Statement

As a user of the App, I want to have an attractive colourful and responsive navbar so that users can easily navigate between pages.

Description

Acceptance Criteria

• The NavBar should always be visible.
• It''s positioned as a 'footer'.
• It should be made with React Router.
• It should be responsive.

Tasks

• Setup Navbar positioning and make it stateless.
• Create components for each nav button.
• Make them responsive.
• Each button has an onClick to navigate to another page.

Complexity

Small

Implement Tests

Value Statement

As a developer of the app, I want to test all functions so that I can ensure that everything is working smoothly.

Acceptance Criteria

• Set up tests across the app.

Tasks

• Create a tests folder.
• Set up tests for all functions.

Complexity

Medium/High

APIs

Description

Setup various APIs for the App.

Acceptance Criteria

• API for Parks.
• API for Friend List.
• API for Image Upload.

CSS - Styling different pages

Value Statement

As a user of the app, I want to have a smooth experiencce and enjoy the CSS so that I may be a returning user.

Acceptance Criteria

• Style CSS where nessesary.

Tasks

• Correct the bio bubble so the text is correctly aligned.
• render a conditional message on dog page when no info is supplied.
• Clean up the park page, style and add delete functionality for notes.

Complexity

Medium/High

Cover Design

Value Statement

As a newcomer to the App, I want to have a landing page that the user finds so that they have a good feel for the app to follow.

Description

Acceptance Criteria

• The colours will be attractive and dynamic.
• Font must be Cookie.
• The Page must be the initial landing page.

Tasks

• Setup Anchor for the cover page to navigate to the profile page.
• Define color scheme from the :root folder.
• Create rough shapes for design.

Complexity

Small

Fix: Position Absolute on Profie Page

Value Statement

As a user with a profile, I want to have a clean layout that is responsive with the screen layout so that I can move around the page without any conflicting rulesets.

Description

Acceptance Criteria

• display:grid should be used.
• grid children should be placed correctly.

Tasks

• clean up the position absolute in the CSS.

Complexity

Low

CSS the AddButtonForm

Value Statement

As a user of the app, I want a fluid responsive form that I can use so that I can add friends to my friends list.

Description

Acceptance Criteria

• Decorate the form with CSS.
• Follow the style of the create-profile page.
• Design is simple and elegant.

Tasks

• Buttons have generic-button class.
• background-color same as create-page form.

Complexity

Medium

Add IDs to parks

Value Statement

As a developer of the app, I want to timplement IDs to the park.json so that each park has a unique ID identifier.

Acceptance Criteria

• Set up IDs in the Park.json.
• Implement across the app.

Tasks

• Implement IDs in park.json.
• Replace the coordiante ID with the new IDs.
• Update the localStorage functions.

Complexity

Medium/Low

Map page - Initial Setup

Value Statement

As a user of the app, I want to view the map page in the nav bar and see other parks in my area which I can view further information about seperately.

Description

Acceptance Criteria

• The Map page contains a map of the Hamburg area.
• The user can select an area and that displays a little breakdown of that park.
• The nav bar in the footer.

Tasks

• Create a stateless map page.
• Implement MapBox in the code.
• Create Park points based off of coordinates of each one relative to the map.

Complexity

Medium

Register Page

Value Statement

As a first time user of the app, I want to create a register page so that the user can set up an account to return to on each visit.

Description

Acceptance Criteria

• Walkies & Talkies logo at the top.
• Username and Password Inputs.
• Confirm Password input.
• Register button.

Tasks

• Create a form.
• Username has type="text".
• Password has type="password".
• If the two password inputs match, then the password is verified.
• Save the account to MongoDB Compass.
• Sign Up button takes the user back to the log in page.

Complexity

Medium/High

Fix Tour and Edit Page

Value Statement

As a user of the App, I want to be able to edit my bio and picture so that I can update my profile page.

Acceptance Criteria

• Pressing the photo button gives the user the chancce to update their photo.
• Pressing the pen gives the user the oppertunity to update the bio.

Tasks

• onClick for functions to update the photo and bio.
• Create a pop up display for the edit bio section.
• save pushes changes to localStorage.

Complexity

Medium

localStorage for Friendlist

Value Statement

As a user of the App, I want to be able to see my friends which I have stored in localStorage render in the friend list so that I can have more friends.

Description

Acceptance Criteria

• The friend page has a "add new friend" section.
• There will be a add friend form consisting of name and image.

Tasks

• create an add friend icon.
• create a form.
• The form will pop up on the screen.
• inputs from the form will be sent into localStorage and be displayed in the friend page.

Complexity

Medium/High

test delete on the single dog page

Value Statement

As a user of the App, I want to be able to delete a friend from the singleDog page so that I'm able to be more picky about my frens.

Acceptance Criteria

• Delete button redirects the user back to the Friends List.

Tasks

• Delete icon removes the friend from the friends localStorage.
• use history.push() to move the user back to the Friends Page.

Complexity

Medium

add IDs to the friends Array

Value Statement

As a user with friends in LocalStorage, I want to be able to implement IDs for each friend that is saved.

Description

Acceptance Criteria

• Each ID must be unique.

Tasks

• create a function for id in itemStorage.js.
• id must use Date.now.
• Implement ID across the whole app.

Complexity

Medium/High

Design Central Framework - Friend Page

Value Statement

As a user of the App, I want to create a responsive flowing design so that users can easily navigate the friends page in a natural way.

Description

Acceptance Criteria

• The friend page will have a search icon, the friends in a cloud formation and a background image of some kind.
• Clicking on a friend takes you to their respective pages.

Tasks

• Setup stateless elements
• Setup multiple Component files in a central components folder.
• Set the text styling.
• Set a background image.
• Use the SVGs from Adobe XD for the clouds.
• Clouds can repeat after 5 shapes.
• use random images of dogs for the friend icons.

Complexity

Medium

red notification

Value Statement

As a user of the app, I want to know which park I have starred so that I may find them easier.

Description

Acceptance Criteria

• The notification must be red.
• The dot is easy to see.
• The starred Parks only have a red dot, the others do not.

Tasks

• Use a React Icon.
• Use position: absolute;.
• Have a ternary operator for the class so that one is hidden and one is not.
• Position correctly under the tree.

Complexity

Low

Link Profile Page to LS user and Render

Value Statement

As a new user to the app, I want my create profile page to render the information into the Profile Page.

Description

Acceptance Criteria

• Picture is slightly modified.
• Bio and Name are specific to the User.
• Profile is rendered from the User's choice.

Tasks

• Make use of LocalStorage.
• useEffect on mount.
• Dynamically render name, bio and picture.
• border-radius: 50%; on the profile picture.
• useState for each of the three dynamically rendered values.

Complexity

Medium

Search Page

Value Statement

As a user of the app, I want to be able to search for a friend in the search list, after clicking on the search icon and being take to a new page, so that I can see friends in my contacts and filter on search for one.

Description

Acceptance Criteria

• The search page has a search bar at the top, and a "Go" button.
• Friends are displayed initially and filtered on search.

Tasks

• Create a searchbar.
• Create a Go button.
• Introduce Storybook.
• Filter on seach.
• Display friends from the localStorage.
• Render the friends in individual divs.

Complexity

Medium/High

Animations

Value Statement

As a user of the app, I want to have some animations on the app so that the experience is visually pleasing to me.

Acceptance Criteria

• Implement animations across the app where necessary.

Tasks

• Apply animations to login page.
• Apply animations to profile page.
• Apply animations to friends page.
• Apply animations to search page.
• Apply animations to singlePark page.
• Apply animations to Map page.
• Keep consistency with button animations.

Complexity

Medium

Individual Friend Page

Value Statement

As a user of the app, I want to view individual friends in the friendslist so that I can see individual information abouut each friend.

Description

Acceptance Criteria

• Clicking on a friend takes the user to the single friend page.
• The friend page will have the name and image of the friend in the header.
• There will be "Review" and "Rating" boxes for the user to edit and "Stats" to read.
• Three icons underneath in a row: Star A Friend, Message, or Remove.
• The nav bar in the footer.

Tasks

• Clicking on a Friend uses Link to navigate to the right page of that dog.
• The route has params /friends/:id.
• Recall the LS for imgSrc to view.
• Recall the LS for name to view.
• The header flex items are justify-content: left;
• Recall the LS for stats Array to read.
• Recall the LS for rating read.
• Recall the LS for review read.
• Star A Friend toggles the isStarred boolean in LS.
• Message takes the user to the Message Page.
• Remove will return the user to the friends list and remove that friend.

Complexity

Medium/High

Fake frens

Value Statement

As a user of the App, I want to have a fake profile of fake friend images render on a cloud load.

Acceptance Criteria

• Create a false friend list with images.

Tasks

• Display fake friend images.

Complexity

Medium

Fix: Empty Stats

Small fix for empty lists in the Single Dog page.

Media Queries

Value Statement

As a user of the app, I want to have a responsive app that responds to the viewport of my device, up to iPad.

Acceptance Criteria

• Set up Media Queries where necessary.
• Implement across the app.

Tasks

• Fix Create Profile page.
• Fix profile and edit profile pages.
• Tweak Noteworthy sign.
• Fix Login layout.
• Fix Single Park.
• Fix navigation.

Complexity

Medium

Log In Page

Value Statement

As a first time user of the app, I want to create a login page where the user can signup for an account and then sign in to their account.

Description

Acceptance Criteria

• Walkies & Talkies logo at the top.
• Username and Password Inputs.
• Login and Signup buttons.

Tasks

• Create a form.
• Username has type="text".
• Password has type="password".
• Register button takes the user to a Register Page.

Complexity

Medium

Headers

Value Statement

As a user on the app, I want the headers to be clearly titled so that I know where I am in the App.

Description

Acceptance Criteria

• The headers should be clipped.
• They should be a uniform colour.
• The titles inside should have Cookie font.

Tasks

• Use a clip-path for each header.
• Correct font and colours.

Complexity

Small

Components

Value Statement

As a user of the App, I want to have an efficient fast running app, that is light in weight so that my eperience is not slowed down by heavy memory.

Acceptance Criteria

• Make components where possible.
• Cut down and clean up code.

Tasks

• Map Component.
• Delete Commented code.
• Delete console logs.
• AddButton Components.
• Delete FileUploader.
• Delete unnecessary image files.
• Create fail state page Component.
• Move Stories to a Stories folder.
• LogIn Form Component.
• Register Form Component.

Complexity

Medium

password confirm

Value Statement

As a new user to the app, I want to have a password confirmation so that my password has an extra level of security.

Acceptance Criteria

• Set up password confirmation on register.

Tasks

• confirm that a second password input matches the first.

Complexity

Medium

User Journey and Integration with MongoDB Compass - Logging In

Value Statement

As a new or returning user to the app, I want to verify that all user journeys are integrated so that the user can have a flowing experience through the app, with changes pushed to their personal data collection in MongoDB Compass.

Description

Acceptance Criteria

• New Users are taken to the Register Page.
• Returning Users login to their account and see saved data on load.

Tasks

• Log In button takes the user to the Create a Profile page if new, and the Profile Page if the User is returning.
• New users without usernames and passwords go to register page to create one.
• Send information from Create Page to Compass.

Complexity

High

Create Profile Page

Value Statement

As a new user to the app, I want to be able to create a profile page on first load of the app, so that I may have an efficient personalised profile page.

Description

Acceptance Criteria

• There should be an option to submit name.
• There should be an option to submit bio.
• Upload a profile picture.

Tasks

• Use a form.
• Use Cloudinary.
• Set up stateless components.
• Have a Header but only save in the Nav Bar.

Complexity

Medium/High

Cypress Checks - Logging In

Value Statement

As a developer of the app, I want to test with Cypress so that I can ensure that everything is working smoothly.

Acceptance Criteria

• Set up Cypress across the app to test my app.

Tasks

• Implement Cypress.
• Test logging in with Cypress.
• Create a test using Cypress.
• Check Cypress functionality.

Complexity

Medium/High