nikomakr/mak-lift

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

Mak-Lift

Hire Lifting Machines & Vehicles

The Team, NCS:

Contributors:

• Nikolaos Makridis
• Chiamaka Lilian Amadi
• Shola Akanbi

Overview

Mak-Lift is a platform specializing in lifting machines and vehicles. Our website provides an overview of our current fleet options, detailed specifications for each option, availability, and a seamless inquiry process.

General Requirements

• ReactJS: The project is built using ReactJS.
• [1/2] GET Routes: Utilizes two GET routes for data retrieval.
• Deployment: The application is deployed using Netlify.
• Technologies: Incorporates at least two libraries, packages, or technologies not covered in discussions.
• Polished UI: Front end/UI is designed to be polished and user-friendly.
• Coding Standards: Adheres to good coding standards (indentation, scoping, naming).
• Quality README: Contains a unique name, description, technologies used, screenshot, and a link to the deployed application.

User Story

• User Role (Who):* As a user, a representative of an SME, I am looking for a business to rent/hire useful tools and vehicles to help our team overcome challenges in various scenarios dealing with heavy weight lifting and reaching heights.

• Achievable Action (What):* Find fleet catalog options, understand specifications, search availability, and create inquiries.

• Desired Business Value (Why):* Achieve the first layer of including or excluding certain fleet options, validate the idea of the ideal option, and create an inquiry for potential hire or tool/vehicle acquisition.

Acceptance Criteria:

• Detailed product information per fleet option.
• [1/2] Polished UI/UX with a responsive design.
• Retrieves internal data stored in JSON file.
• [1/2] Utilizes a relevant API for dynamic availability.
• [1/2] Displays availability on a calendar month.
• Built in REACT for scalability.
• User-friendly browsing experience.

Story Name: Streamlining B2B Lift Hiring Experience

Minimum Viable Product

• Navigation bar
• Footer
• About page
• Fleet page
  • [0] Display availability for each fleet option
  • Detailed specifications
• Contact Us page
  • Ability to create an inquiry
• Search/Hire (Check availability) page
  • Filter in/out from fleet options
  • [0] View availability of each fleet option

Server Side API(s):

• [Translation API] (https://rapidapi.com/undergroundapi-undergroundapi-default/api/google-translate113)
• JSON files to mimic the use of a database

Additional Technologies Used

• [Dealing with Forms in REACT] (https://formik.org/docs/overview)
• [Dealing with calendars in RAECT] (https://www.npmjs.com/package/react-calendar)

Additional Potential Features

• Ability to compare two options based on:
  • Working height
  • Outreach
  • Safe working load
  • Weight
• Demonstration page with videos of fleet and usage
• Basic training on usage with videos and photos
• Extras such insurance add-on page with options from various providers
• Transportation/Delivery of tools and vehicles to preferred locations with providers and cost breakdown
• Demonstration page with graphics on how to pick up and return tools/vehicles
• Spinner Loader Library for adding CSS animations
• [Spinner CSS] (https://www.npmjs.com/package/spinner-loader-library)

Wireframe

Wireframe details are provided in the previous text-based response (project proposal). Please, refer to the wireframe section for a visual representation. It represents just the direction of developer's work and client's preference. There were elements later on where client decisions lead into further optimisation.

How to Run Locally

1. Clone the repository: git clone https://github.com/your-username/Mak-Lift.git
2. Navigate to the project directory: cd Mak-Lift
3. Install dependencies: npm install
4. Run the application: npm start, npm run dev
5. Open your browser and visit: http://localhost:3000 (please check if the host id number is different on your end)

Deployment

• application is deployed using Netlify. You can access the live version Netlify Deployment URL).

Badges

Screenshots

![Screenshot of the website] (https://drive.google.com/file/d/1bCY6fSQOHFmm7u_KJHM94RT8qBaI0UWw/view?usp=sharing)https://drive.google.com/file/d/1bCY6fSQOHFmm7u_KJHM94RT8qBaI0UWw/view?usp=sharing)