Product Rental System

A React application to view product-list, search and sort them, view their info, and book or return them. It uses browser's LocalStorage as a DataBase.

📷 ScreenShoot (s)

Product List

Product Booking

Product Returning

👨‍💻 Installation and Setup Instructions

To run locally, you will need node and npm or yarn installed globally on your machine.

Install the dependencies

yarn

To run the project locally

yarn start

To run tests

yarn test

To view the test coverage

yarn test:cov

To run eslint and prettier checks

yarn lint

To fix eslint and prettier issues silently

yarn lint:fix

Commands with npm

Install the dependencies

npm install

To run project locally

npm start

To run tests

npm test

To run test coverage

npm run test:cov

To run eslint and prettier checks

npm run lint

To fix eslint and prettier issues silently

npm run lint:fix

🗄️ Project Structure

Most of the code lives in the src folder and the project structure looks like this:

src
|
+-- assets            # assets folder can contain all the static files such as images,icons,fonts, etc.
|
+-- components        # shared components used across the entire application.
|
+-- constants         # Constants of the applications are here.
|
+-- contexts          # shared contexts used across the entire application.
|
+-- data              # Static datasets.
|
+-- features          # feature based modules, a feature can have components, hooks, assets etc.
|
+-- hooks            # shared hooks used across the entire application.
|
+-- pages            # All pages of the application are here.
|
+-- types            # shared types used across the entire application.
|
+-- utils            # shared utility functions.
|
+ eslintrc.json        # Adds the ESLint configuration for the project.
|
+ prettierrc.js        # Adds the Prettier configuration for the project.
|
+ tailwind.config.js   # TailwindCSS configuration file. Added some global theming here.

💻 Technical Choices

• React was the requirement.
• TypeScript made the application fully typed.
• React Context API - As this application is comparatively tiny, I have chosen ContextAPI over a global state library like Redux or Recoil.
• TailwindCSS - Tailwind is a utility-based, highly-customizable framework .Used it for styling the whole application without writing a single line of custom CSS. It also provided a customizable theme.
• classnames - It helps to make conditional styling. All it is is a single function, taking different values as arguments and spitting out a single string based on them.

💡 Logic

Besides the logic from the provided document, I have added some extra logic to make the application more logical. Here is the the list of all logics -

• User can book a product only if the product's Minimum Rental Period is smaller than the user's given period.

• If a user books more than the Minimum Rental Period, a 10% discount will be applied. The discount amount is changeable from the constant file.

• When a user books a product, It will be unavailable for booking.

• When a user returns a product, It will be available for booking again. But if its durability is greater than 0.

• When a user returns a product, mileage and durability will be changed based on the user's input.

• While booking, users can't select a date before today.

👌 Improvements

As the time was limited to develop the project, I couldn't make it with all the ideas in my mind. Things I consider adding to make it better -

More Testing: I have added some test cases with the React Testing Library for some components. Writing more test cases would be great.

Git Hooks: Pre-commit hooks can be added to check esLint errors, prettier errors, tests, and build errors. lint-staged & husky would be a good combination for this.

Author

• @SadatJubayer