nikomakr/mak-lift

Final Project of Bootcamp Front-End Developer [Real Client]

mak-lift's Issues

Convert HTML sitemap into REACT files structure

Description:

After we install REACT, we must follow structure of REACT in the repo.

Priority:

[High]

Type:

[Task]

User story - Current Behaviour:

It's not visible to the end user the move from just one html file converting into REACT structure files.

User Story - Expected Behaviour:

It's not visible to the end user the move from just one html file converting into REACT structure files.

Steps to Reproduce:

QA must check thoroughly if structured code follows REACT principles.

Screenshots:

Not visible change. This is a REACT structural change.

Branch Name:

html-sitemap-into-react-files-structure

Additional Information:

N/A

Acceptance Criteria:

Follows REACT filling structure.

Subtasks:

N/A

Assignees:

• Leading Developer: @nikomakr
• Leading QA: @d-sholaakanbi

Labels:

[REACT]

Due Date:

[18/01/2024]

Dependencies:

None

Notes for Reviewers:

Nothing for the moment.

Nav Component

Description:

Create a Nav container that will be colorful and will consist of different rendered buttons to have a navbar in the webpage.

Priority:

[High]

Type:

[Task]

User story - Current Behaviour:

The navbar is without a container

User Story - Expected Behaviour:

A colorful and suitable nav container must be included.

Steps to Reproduce:

Create a nav container.

Screenshots:

Nothing visible on webpage

Branch Name:

nav-Container

Additional Information:

N/A

Acceptance Criteria:

Check if the nav component is properly added to the webpage
Check if the nav component has a good styling.

Subtasks:

N/A

Assignees:

• Leading Developer: @d-sholaakanbi
• Leading QA: @nikomakr

Labels:

[React]

Due Date:

[React]

Dependencies:

None

Notes for Reviewers:

Nothing specific

finalised fleet pages with content, optimised css, retrieve data dynamically from JSON file

Description:

End user must have an experience of a nice UI/UX with relevant content and specifications per each fleet option.

Priority:

[High]

Type:

[MVP Feature, Enhancement, Other extras]

User story - Current Behaviour:

End user only sees calendar on each fleet option page!

User Story - Expected Behaviour:

End user can navigate from button Fleet to each of the four options and see a nice format with relevant content and specifications loading dynamically from JSON file.

Steps to Reproduce:

Be sure you are on the right branch and npm run dev

Screenshots:

Not needed

Branch Name:

TBD

Additional Information:

N/A

Acceptance Criteria:

1)From project requirements:

• Utilizes two GET routes for data retrieval [the one is on this ticket with JSON file data]

2)From project proposal acceptance criteria:

• Detailed product information per fleet option [relevant content can be found on each fleet option]
• Retrieves internal data stored in JSON file:
• Per each fleet option retrieves data from JSON file and shows specifications on pages

3)From MVP:

• Fleet page and pages per each one [Yes]
• Detailed specifications on its page [Yes]

Subtasks:

Draft final project presentation, here: presentation template

Assignees:

• Leading Developer: @nikomakr
• Leading QA: @d-sholaakanbi

Labels:

[MVP features, enhancement, optimisation, documentation, UI/UX, JSON etc.]

Due Date:

[25/01/2024]

Dependencies:

None

Notes for Reviewers:

Nothing really

Footer Update

Description:
We need to add contents to the footer of the page which must meet the below acceptance criteria.

Priority:
[High]

Type:
MVP Feature

User story - Current Behaviour:
Nothing showing on the footer

User Story - Expected Behaviour:
Should have a footer showing the address of the business, registration mailing address and copyright details.

Steps to Reproduce:
N/A
Screenshots:
none

Branch Name:
Footer Update

Additional Information:
None

Acceptance Criteria:
Styling colors must be the stated webpage colors
Should have mailing information.
Address of the company.
Copyright details.

Subtasks:
None

Assignees:
Leading Developer: [@clamadi]
Leading QA: [@d-sholaakanbi]

Labels:
MVP

Due Date:
21/01/2024

Dependencies:
None

Notes for Reviewers:
None

CSS colours of brand , logo , images

Description:

The business uses specific colours, which we need to follow for branding reasons. It follows the rule of 60 30 10 in percentages + specific black and white. Those are:

• RED
  HEX: #fe3253
  RGB: (254, 50, 83)

• GREY
  HEX: #4D4D4D
  RGB: (77, 77, 77)

• BLUE
  HEX: #004E74
  RGB: (0, 78, 116)

• *WHITE
  HEX: #efe6e6
  RGB: (239, 230, 230, 1)

• **BLACK
  HEX: #0f0202
  RGB: (15, 2, 2, 1)

Priority:

[Medium]

Type:

[Branding]

User story - Current Behaviour:

User must see more than 90% the colours above

User Story - Expected Behaviour:

Users sees on more than 90% the colours mentioned above.

Steps to Reproduce:

N/A

Screenshots:

Attached below the logo of the brand and other icons to be used later on.

Branch Name:

css-logo-and-images

Additional Information:

Those colours must be followed throughout the project and wherever there is choice for colouring.

Acceptance Criteria:

The colours you see are from the above mentioned.
Creation of Images folder with the below logo and icons

Subtasks:

N/A

Assignees:

• Leading Developer: @nikomakr
• Leading QA: @clamadi

Labels:

[Branding, logo, icons]

Due Date:

[18/01/2024]

Dependencies:

None

Notes for Reviewers:

Please, use those colours and logo for anything needed.

Title: [README.md , HTML sitemap , .gitignore]

Description:

We need the basics to start after we get our Project Proposal approved, here: project proposal
So, we need to create:

• README.md
• HTML sitemap
• .gitignore

Priority:

[High]

Type:

[Task]

Current Behaviour:

We have nothing for the moment!

Expected Behaviour:

• Clean written README.md
• Creation of HTML sitemap following semantic HTML for better SEO

Steps to Reproduce:

• Check content within README.md for typos, grammar & other mistakes
• HTML sitemap must follow semantic HTML for better HTML

Screenshots:

N/A

Branch Name:

readme-htmlsitemap-ignore

Additional Information:

N/A

Acceptance Criteria:

• Create the README.md file by following relevant info from project proposal, here: project proposal
• Creation of HTML sitemap following semantic HTML for better SEO

Subtasks:

N/A

Assignees:

• Leading Developer: @nikomakr
• Leading QA: @clamadi

Labels:

[README.md , HTML sitemap , .gitignore ]

Due Date:

[17/01/2024]

Dependencies:

[None]

Notes for Reviewers:

[N/A]

Search & Hire page (fix on rendering react-calendar & images uploaded)

Description:

1)Quick fix on Search & Hire page, so to render react-calendar
2)Upload fleet images

Priority:

[High]

Type:

[MVP Feature]

User story - Current Behaviour:

All you can see as an end user as of now is "/search" by clicking on Search & Hire

User Story - Expected Behaviour:

End user by clicking on Search & Hire will be redirected to webpage where over there will show fleet options, data range and calendars
[FYI this is not the final. It is just the first optimisation of the page]

Steps to Reproduce:

git pull from 2-searchhire-renderingfixes-andimages
and
npm run dev

Screenshots:

Not required

Branch Name:

2-searchhire-renderingfixes-andimages

Additional Information:

Not finalised yet

Acceptance Criteria:

Display fleet options
Start Date, End Date
Display Fleet options' calendars

Subtasks:

Upload images

Assignees:

• Leading Developer: @nikomakr
• Leading QA: @d-sholaakanbi

Labels:

Search & Hire, react-calendar, JS, REACT

Due Date:

22/01/2014

Dependencies:

Nothing for the moment, but need to get merged so won't keep team away from working with JSON and API

Notes for Reviewers:

Nothing tricky here.

Updated contact component

Description:
Creating a contact page with forms that will allow the user send in emails when need.

Priority:
High

Type:
MVP Feature

User story -
Currently has a form without state management, error and validation.

User Story - Expected Behaviour:
When the contact button on the nav-bar is clicked it takes you to the page which in turn allows you to contact the company either via a form or calls or emails. when the forms are filled the fields should be able to errorlog 'required' in cases where the field must be filled out and 'incorrect format' where wrong formates are used.

Steps to Reproduce:
not applicable

Screenshots:
none

Branch Name:
19-updated-contact-component

Additional Information:
none
Acceptance Criteria:

The form state must be efficiently managed, error logging, and validation done using Formik library.
All the sections of the required sections in the form according to the template present.

Subtasks:
not applicable.

Assignees:
Leading Developer: [@Chiamaka]
Leading QA: [@niko]

Labels:
MVP

Due Date:
23/01/2024

Dependencies:
None

Notes for Reviewers:
None.

Small optimisations on AboutUs, Footer, Header, CSS

Description:

• About Us page:

1. correction on content colour respecting brand's colours
2. fix image on left hand side of the content
3. adjust the image we show just about the About Us content and below NavBar

• Footer:

1. take off the logo
2. CSS small tweak

• Search & Hire:

Show only the options of fleet and date range when end user clicks Search & Hire
Show relevant calendar after user chose in fleet options

• Introduce a header above Navbar

Priority:

[High]

Type:

[Bug, MVP Feature, Enhancement]

User story - Current Behaviour:

• About Us:
  1)fix of bug as end user can't see image on left handside of the content
  2)the photo above About Us and below NavBar show the upper side of the image only
  3)the content does not follow brand's colours

• Footer:

1. the logo must migrate from footer
2. CSS will be impacted due to the above

-Search & Hire:

1. End User sees all calendars!

-Header:
Missing

User Story - Expected Behaviour:

• About Us:

1. Load photo from images on left hand side of the page aka left of the content
2. The photo above the About Us and below NavBar shows larger part of the image
3. The content is in line with brand's colours

• Footer:

1. We took away the logo of the brand
2. Due to the above we made arrangements of CSS to look fine

• Header:
  Just a thin line with relevant brand colour and naming "Mak-Lift" just above NavBar

Steps to Reproduce:

Be sure you are on branch: optimisations-aboutus-footer-header-search
npm run dev
Browse on About Us
Check footer at the bottom of the page
Browse on Search & Hire

Screenshots:

Not needed

Branch Name:

optimisations-aboutus-footer-header-search

Additional Information:

N/A

Acceptance Criteria:

End User see a polished About Us with homogenous colours and nicely placed images.
Also, the footer end user can find any relevant information about the business in nice format.
On Search & Hire user can choose fleet option, date range and we render the equivalent calendar.
Introduction of a header above the NavBar with brand name of Mak-Lift.

Subtasks:

Will be added later on as further optimisations required on Search & Hire page.

Assignees:

• Leading Developer: @nikomakr
• Leading QA: @clamadi

Labels:

[bug, enhancement, further development]

Due Date:

[24/01/2024]

Dependencies:

None

Notes for Reviewers:

N/A

Fleet calendars and consolidated calendar on search page.

Description:

We need to have calendar per each fleet option and consolidated one, too.
Those must be available on each fleet option page, but also on search page, too.

Priority:

[High]

Type:

[MVP Feature]

User story - Current Behaviour:

Those pages and functionality doesn't exist for the moment!

User Story - Expected Behaviour:

User must have one page per fleet option where availability calendar will be found there.
Similarly user will see consolidated calendar with option to filter in/out on search page.

Steps to Reproduce:

Run REACT on your local. Let me know if I cabn help you.

Screenshots:

N/A

Branch Name:

TBD

Additional Information:

Code rendering in different pages. All work sits in components, where there is consolidated component of all those four availability calendars.

Acceptance Criteria:

-User sees in fours pages of Boom, Scissor, Spider, Mount the equivalent calendars
-User sees in search page a consolidated calendar of the four above.
-User on search page sees/has option(s) of choosing one or more or all fleet options.
-User on search page sees/has option(s) of choosing specific date range or full week or full month

Subtasks:

Nothing for the moment

Assignees:

• Leading Developer: @nikomakr
• Leading QA: @d-sholaakanbi

Labels:

MVP feature

Due Date:

19/01/2024

Dependencies:

None for the moment.
I will consult Shola as he works on search

Notes for Reviewers:

Please, be careful as calendars and search must be linked.
Consult Shola and Niko for any changes or additions.

Api Implementation

Description:

[Provide a clear and detailed description of the issue or feature request. Include the context, purpose, and any relevant background information.]

Priority:

[High / Medium / Low]

Type:

[Bug / MVP Feature / Enhancement / Task]

User story - Current Behaviour:

[Describe the current behaviour or issue you are facing.]

User Story - Expected Behaviour:

[Describe the expected behavior or how the feature should work.]

Steps to Reproduce:

[If it's a bug, provide detailed steps to reproduce the issue.]

Screenshots:

[Attach any relevant screenshots to help illustrate the issue or proposed feature.]

Branch Name:

Additional Information:

[Provide any additional information, context, or suggestions that might be helpful.]

Acceptance Criteria:

[Define the criteria that need to be met for this issue to be considered resolved.]

Subtasks:

• [List any subtasks that need to be completed for this issue.]

Assignees:

• Leading Developer: [@leading-developer]
• Leading QA: [@leading-qa]

Labels:

[Apply appropriate labels such as bug, enhancement, documentation, etc.]

Due Date:

[Optional - If there's a specific deadline or timeframe for resolving this issue.]

Dependencies:

[List any dependencies or related issues.]

Notes for Reviewers:

[Include any specific notes or considerations for reviewers.]

Contact component

Description:
Creating a contact page with forms that will allow the user send in emails when need.

Priority:
High

Type:
MVP Feature

User story -
Currently blank

User Story - Expected Behaviour:
When the contact button on the nav-bar is clicked it takes you to the page which in turn allows you to contact the company either via a form or calls or emails.

Steps to Reproduce:
not applicable

Screenshots:
none

Branch Name:
8-Contact-component

Additional Information:
[Provide any additional information, context, or suggestions that might be helpful.]

Acceptance Criteria:

• This should have a form created with formik this will allow for inquiries to be made.
• when you click on contact button it should open to a page with "Inquiries" link which opens up to a form when you click on inquiries (form should have name, email, phone numbers, message).
• contact details below.

Subtasks:
not applicable.

Assignees:
Leading Developer: [@Chiamaka]
Leading QA: [@shola]

Labels:
MVP

Due Date:
20/01/2024

Dependencies:
None

Notes for Reviewers:
None.

Implementing Json and Api on Search Component

Description:

Implement the Json and Api so when the user books a date to rent we calculate the cost of the number of days and the user has an option to change the currency to its preferred choice.

Priority:

[High]

Type:

[Task]

User story - Current Behaviour:

The Json and Api is not implemented on the search and hire page

User Story - Expected Behaviour:

The Api and Json must be implemented on the search and hire page so the user can be able to hire and also make enquirers in his preferred currency.

Steps to Reproduce:

Implement the Json and Api on the search and hire page

Screenshots:

Nothing visible on webpage

Branch Name:

api-implementation

Additional Information:

N/A

Acceptance Criteria:

Check if the user can book a tool for hire for different days and the cost is calculated.
Check if the user can also make enquires about the cost in its preferred choice of currency.

Subtasks:

N/A

Assignees:

• Leading Developer: @d-sholaakanbi
• Leading QA: @clamadi

Labels:

[React]

Due Date:

[24/01/2024]

Dependencies:

None

Notes for Reviewers:

Nothing specific

The footer

Description:
We need to add contents to the footer of the page which must meet the below acceptance criteria.

Priority:
[High]

Type:
MVP Feature

User story - Current Behaviour:
Nothing showing on the footer

User Story - Expected Behaviour:
Should have a footer showing the address of the business, registration mailing address and copyright details.

Steps to Reproduce:
N/A
Screenshots:
N/A
Branch Name:
7-the-footer

Additional Information:
None

Acceptance Criteria:
Styling colors must be the stated webpage colors
Should have mailing information.
Address of the company.
Copyright details.

Subtasks:
None

Assignees:
Leading Developer: [@clamadi]
Leading QA: [@nikomakr]

Labels:
MVP

Due Date:
18/01/2024

Dependencies:
None

Notes for Reviewers:
None

Install REACT, other packages & libraries

Description:

We need to:

• Install REACT
• Install other libraries
• Install other packages

Priority:

[High]

Type:

[Task]

Current Behaviour:

Lack of REACT.

Expected Behaviour:

Structure of files & packages to be included

Steps to Reproduce:

REACT can be checked on packages

Screenshots:

Nothing visible on webpage

Branch Name:

install-react-and-extras

Additional Information:

N/A

Acceptance Criteria:

Check if REACT installed, files follow right structure
Check libraries and packages such as yup, axios, tailwind, bootstrap, formik

Subtasks:

N/A

Assignees:

• Leading Developer: @nikomakr
• Leading QA: @d-sholaakanbi

Labels:

[React]

Due Date:

[17/01/2024]

Dependencies:

None

Notes for Reviewers:

Nothing specific

Nav Component Update

Description:
We need to add contents to the Navbar of the page which must meet the below acceptance criteria.

Priority:
[High]

Type:
MVP Feature

User story - Current Behaviour:
The Navbar is having the required components but it lacks styling
User Story - Expected Behaviour:
Should have a well styled navbar on the webpage that consist of the components buttons

Steps to Reproduce:
N/A

Screenshots:
none

Branch Name:
20-nav-component-update

Additional Information:
None

Acceptance Criteria:
Styling colors must be the stated webpage colors.
Each component must be a well styled button.
The navbar components links must be functioning.

Subtasks:
None

Assignees:
Leading Developer: @d-sholaakanbi
Leading QA: @nikomakr

Labels:
MVP

Due Date:
22/01/2024

Dependencies:
None

Notes for Reviewers:
None

About us Component

Description:

Create a well detailed aboutUs page that will be a brief explanation of what the company does and what it entails.

Priority:

[High]

Type:

[Task]

User story - Current Behaviour:

The webpage is without an aboutUs page

User Story - Expected Behaviour:

A well detailed aboutUs page must be included.

Steps to Reproduce:

Create an aboutUs page.

Screenshots:

Nothing visible on webpage

Branch Name:

aboutUs-page

Additional Information:

N/A

Acceptance Criteria:

Check if the aboutUs component is properly added to the webpage
Check if the aboutUs component has a good styling a well detailed text description.

Subtasks:

N/A

Assignees:

• Leading Developer: @d-sholaakanbi
• Leading QA: @nikomakr

Labels:

[React]

Due Date:

[18/01/2024]

Dependencies:

None

Notes for Reviewers:

Nothing specific