Hire Lifting Machines & Vehicles
Contributors:
- Nikolaos Makridis
- Chiamaka Lilian Amadi
- Shola Akanbi
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.
- 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 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
- 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
- [Translation API] (https://rapidapi.com/undergroundapi-undergroundapi-default/api/google-translate113)
- JSON files to mimic the use of a database
- [Dealing with Forms in REACT] (https://formik.org/docs/overview)
- [Dealing with calendars in RAECT] (https://www.npmjs.com/package/react-calendar)
- 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 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.
- Clone the repository:
git clone https://github.com/your-username/Mak-Lift.git
- Navigate to the project directory:
cd Mak-Lift
- Install dependencies:
npm install
- Run the application:
npm start
,npm run dev
- Open your browser and visit:
http://localhost:3000
(please check if the host id number is different on your end)
- application is deployed using Netlify. You can access the live version Netlify Deployment URL).
![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)