Epic

Profiles Functionality

Description

As a logged-in user I can edit my profile so that I can change my profile picture and personal information

Tasks:

• Create an edit profile component to allow users to edit their profile data
• Implement the Edit button to activate edit functionality on the button click
• Give users the ability to edit their username, first name, last name, avatar and password.

Epic

The Products Page

Description

As a logged-in user I can create products so that notice other users about my gear offer

Tasks:

• Create CreateProductForm component with styling
• Create ProductGallery component with styling
• Include ProductGallery component in CreateProductForm component.
• Display default picture if no product gallery is empty
• Create thumbnails of added images.
• Create an image preview with thumbnails of the selected image.
• Include fields required for submitting Product
• Display spinner for fields with API waiting time.
• Include product images with the product's submission functionality.
• Functionality for adding and deleting images.

Add all User Stories/Epics/Milestones to Github

MUST Tasks:

• Add Authentication stories
• Add Navigation stories
• Add Voting stories
• Add CRUD Product Stories
• Add CRUD Comment Stories
• Add CRUD Profile Stories
• Add Infinite Scroll Story
• Add Best Deals Story
• Add Location Story
• Add In Stock Story
• Add Currency Story
• Add Search Story
• Add Sorting Story
• Add Gallery Story
• Add Footer Story
• Add Categories Story
• Add Landing Page Epic
• Add Guest Story
• Add Mobile Design Story

Description

All features related to Voting for products

Description

During the development process, it was found that the React Router NavLink component was only updating the URL path, but nothing was rendered in the browser view.

Solution

This issue was related to the React version used for the project, which was incompatible with version v.5.3.0 of React Router package. The steps needed to fix this issue were to uninstall the existing react-router package and install v.5.3.3 which included the patch.

StackOverflow

Epic: Site Navigation

Description

As a user I can access the site's navigation from every page so that I can visit every page quickly all the time

Tasks

• Create NavBar component
• Import and use the NavBar component in App.js
• Test NavBar with placeholder
• Create search bar component
• Create categories component
• Create logged-in user dropdown menu
• Create logged-out user buttons (sign in/signup)

Style Navbar with custom CSS

• Install styled-components
• Arrange directories to include component and styled-components in the same folder
• Style the NavBar for the logged-out user
• Style the NavBar for the logged-in user
• Style search bar with categories + responsiveness

Epic

The Products Page

Description

As a user I can have quick access to the selected products that are best deals so that I can quickly act if the deal interests me

Tasks:

• Create a Best Deals component to display 4-5 products with the best scores pinned to the top of the page

Epic

The Products Page

Description

As a user I can sort the products currently displayed so that I can see the products in the order I am most interested in

Tasks:

• Create filters section with in stock and countries filtering functionality.
• Create sorting functionality for date created, price, title, average score and all scores options in ascending and descending order
• Create a button to display all products without filters applied.
• Create a search bar with a title, description, username, street, city and country options to search for

Epic

The Products Page

Description

As a user I can view the product details so that I have a better judgment on the offer

Tasks:

• Create a Product page with the Product's fetched data to display.
• Create a Product card with key features fetched from the API to display on the main page.

Description

All features related to Products functionality

Epic

The Products Page

Description

As an owner of the product I can delete my products so that I can control what products am I displaying as an offer

Tasks:

• Create separate delete buttons for product images and product instances with respective functionalities.
• Use modal for defensive programming with delete functionality to confirm the user's choice.
• Fetch API delete call on product and product image instances.
• Include Image removal in creating form and edit form
• Include product removal in the edit form.

Epic

Comments Functionality

Description

As a user I can read product's comments so that I can compare my thoughts about the product with other users

Tasks:

• Allow all users to see comments on the Product page
• Display the number of comments on the Product card and on the Product page together with a rating
• Add username and avatar of comment owner together with the created date and comment description

Epic

Site Navigation

Description

As a user I can view a footer from every page so that I can have easy access to all footer content on different pages

Tasks:

• Create a footer component to display creators' social links and app logo
• Add copyright to footer section
• Style footer to remain at the bottom of the page

Epic: Authentication Process

Description

As a user I can remain logged in until I decide to log out so that my session remains valid and I can enjoy browsing the website without extra login actions

Tasks

• Create jwt refresh token functionality in CurrentUserContext

Epic: Authentication Process

Description

As a user I can sign in to the website so that I can use all features for logged-in users

Tasks

• Create SignIn component with styling
• Include all sign-in required fields in the form
• Include POST method for login with DRF API

Epic

Products Functionality

Description

As a user I can see if the product is available so that I can decide to contact the offer owner

Tasks:

• Display availability on the Product page - Available with green, Out of Stock with red colours
• Add Out Of Stock overlay to products not available
• Display by default only available Products
• Allow users to display all products on button click

Epic

Products Functionality

Description

As a user I can see the product pictures so that I know what the product looks like in reality

Tasks:

• Create gallery thumbnails with a preview window for creating and editing products.
• Create a Carousel component for Product card display and Product page display.
• Disable animation for Product card carousel, enable animation for Product page display
• Add restriction of 5 images per product with the alert display.
• Display the default image if the gallery for the product is empty.

Epic

Comments Functionality

Description

As a logged-in user I can post comments on the products so that I can share my insights about the product or write a review about the offer

Tasks:

• Create a Comment component to be used on the Product page.
• Create Comment creation form component to implement create functionality
• Create a Comment edit component to allow users to edit the comments they own
• Use pagination with comments to restrict data being displayed for better UX

Epic

Comments Functionality

Description

As an owner of the comment I can delete the comment so that I can remove my insights about a product if required

Tasks:

• Create a "more options" button for comments (if the user owns the comment)
• Attach delete button to 'more' dropdown popover
• For defensive programming create a modal to prompt users for their action

Description

All User Stories must be divided into smaller tasks included in the Issue

Epic

Products Functionality

Description

As a user I can identify the product's location so that I can decide if I am able to check the offer physically

Tasks:

• Display Product location on the Product page
• Connect the Google Maps link with the Product's location data

Epic

Authentication Process

Description

As a user I can explore the website as a guest so that I can review the app content

Tasks:

• Display products and profiles for anonymous users.
• Create, Update and Delete functionality only available for registered users

Epic

None

Description

As a user I can use the app on different devices with various screen sizes so that I am not restricted to using it only on regular-size computers

Tasks:

• Implement bootstrap grid system for container-row-column display and adjust for screen breakpoints
• Use media queries in styled-components to adjust the layout for all screens

Epic: Site Navigation

Description:

As a logged-out user I can see the sign-in and sign-up buttons so that I can change my login status

Tasks:

• Create CurrentUserContext with token refresh functionality
• Create Sign-in and Sign-up buttons and add styling
• Include conditional rendering of navbar components for logged-in and logged-out users based on current user status

Description

All features related to comments functionality

Epic: Site Navigation

Description:

As a user I can navigate through different pages smoothly so that I can explore site content without page refreshing

Tasks:

• Install React Router library to use as a routing tool
• Include Routes in App.js with correct components to render
• Prevent unnecessary page refresh on form submits with event preventDefault() functions

Description

All features related to Profiles functionality

Description

All features for site navigation.

Description

The search bar input field was found to occupy only 70% of the available space due to the wrong width setup in CSS.

Solution

StyledFormControl max-width: 70%; attribute was remove and width: 100%; was added.

Epic

The Product Page

Description

As an owner of the product I can edit product details so that I can guarantee that the product details are latest and up-to-date

Tasks:

• Fetch data for product ID included in the URL
• Add spinner for API response waiting.
• Include values from API data in the form.
• Create Delete product functionality.
• Create Modal component for defensive programming usage with delete functionality

Create full CRUD for Profiles.

Epic

Comments Functionality

Description

As an owner of the comment I can edit the comment content so that I can change it if required

Tasks:

• Create an edit comment component to allow users to edit the comments they own
• Implement restriction on editing comments only by owners
• Add the edit comment button to the more button next to the owner's comment

Epic

The Products Page

Description

As a user I can search for products with keywords so that I can find offers which I am most interested in

Tasks:

• Create a search bar component to allow users to keywords search in the app: title, description, username, street, city, country
• Implement searching "on-change" without the need of submitting a search query with a button
• Implement timeout for product rendering for better UX

Epic: Voting

Description:

As a logged-in user I can rate a product so that I can share my experience about a product and position it higher in ranks

Tasks:

• Implement a Rating component based on a 5-star rating
• Allow logged-in users to vote and update their ratings on the Product page
• Display ratings on the Product card on the home page
• Display all Ratings and split them into single-star counter

Epic

Profiles Functionality

Description

As an owner of the profile I can delete my profile so that I can control if I want to share my data in the app

Tasks:

• Allow users to delete their profiles from the Settings tab
• Implement defensive programming with modal display to prompt users on their actions and confirm their choice

Epic: Site Navigation

Description:

As a logged-in user I can see the Profile dropdown menu in the navbar so that I can have access to all relevant profile features from every page

Tasks:

• Create a dropdown list for logged-in with user-related links
• Give access to the user's products and profile from the dropdown
• Display message to indicate currently logged-in user
• Include signout function in dropdown list
• Use the user's profile picture as the dropdown list trigger button

Epic

Authentication Process

Description

As a user I can create a new account so that I have access to all features for registered users

Tasks

• Install Axios library for handling API calls
• Setup Axios defaults
• Create SignUpForm component
• Update App.js with Routes for links
• Update Sign Up link with SignUpForm in the render method
• Style SignUpForm component
• Handle form submit with Axios post
• Set background for SignUpForm component on render

Tests

• Test form validation
• Test email verification link on submit
• Test error handling

Epic: Authentication Process

Description

As a user I can see my login status so that I can take action and login if required

Tasks

• Conditionally render logged-out and logged-in buttons/menu
• Update sign-in menu with current user username
• Render avatar with current user profile image

Tests

• Test the current user username renders
• Test logged-out user cannot see logged-in menu

Epic

None

Description

As a user I can explore paginated products from the database so that I can focus my attention on the smaller chunks of displayed content

Tasks:

• Install React Pagination component for handling site pagination
• Connect backend data pagination with frontend displayed data
• Include pagination for Product's comment section

Epic

The Products Page

Description

As a user I can display products by categories so that I can find products of my interest easier

Tasks:

• Create a custom hook to fetch categories from the API endpoint
• Create a dropdown menu integrated with the search bar in the navbar
• Display currently select category in the menu