Building an Inventory Management System for a Construction Equipment rental Company with Strapi, React-Hook forms and Next.js

[vector-10]

What is your article idea?

Building an Inventory Management System for a Construction Equipment Rental Company with Strapi and Next.js Socket.IO, Mapbox, and Algolia

Part 1: Introduction and Project Setup
Introduction

Project Overview:

• Managing construction equipment: tracking, availability, location, and maintenance.
• Use cases: scheduling rentals, managing inventory at multiple sites, tracking equipment conditions.
• Introduction to Strapi: Capabilities as a headless CMS for complex backend needs.
• Introduction to Next.js: Building dynamic, server-rendered applications and static sites.

Technology Stack:

• Tailwind CSS: For styling.
• Formik: Modern form management.
• Zod: TypeScript-first schema declaration and validation.
• Axios: HTTP client for API requests.
• Socket.IO: Real-time communication.
• Mapbox: Geolocation and mapping services.
• Algolia: Instant search and filtering.

Project Setup
Development Environment: Installing Node.js and npm.
Strapi Setup:

• Create and configure a new Strapi project.
• Include fields specific to construction needs like maintenance logs and usage statistics.

Next.js Setup:

• Create a new Next.js project.
• Set up directory structure and start the development server.

Connecting Strapi and Next.js:

• Configure API endpoints.
• Verify the connection with sample data relevant to construction equipment.

Part 2: Building the Backend with Strapi and Integrating Advanced Features

Creating Content Types in Strapi
Defining Data Structures:

• Equipment: Name, description, rental price, availability, maintenance schedule.
• Categories: Types like heavy machinery, tools, vehicles.
• Rentals: Track transactions with dates, customer info, equipment condition.
• Sites: Manage multiple construction sites and equipment at each site.
• Maintenance Logs: Track history, upcoming maintenance, and condition reports.

Configuring Relationships

• Setting Up Relationships:
• Link Equipment, Categories, Rentals, and Sites.
• Example: Many-to-one relationship between Equipment and Sites.
• Customizing the Strapi Admin Panel

Admin Panel Enhancements:

• Add custom fields for construction-specific data.
• Configure role-based access control for site managers, equipment handlers, and maintenance staff.
• Real-time Updates with Socket.IO

Socket.IO Integration:

• Set up Socket.IO for live updates on equipment status and location changes.
• Example: Real-time notifications when equipment is moved between sites or when a rental is initiated or completed.
• Geolocation with Mapbox

Mapbox Integration:

• Set up Mapbox to display equipment locations.
• Example: Mapping current equipment locations at multiple construction sites and tracking their movements.

Part 3: Building the Frontend with Next.js and Enhancing the User Experience
Fetching Data from Strapi

Data Fetching Methods:

• Use getStaticProps and getServerSideProps to fetch data on equipment availability, location, and status.
• Creating Dynamic Routes

Dynamic Routing:

• Implement routes for equipment details, including status, location, and rental history.
• Styling with Tailwind CSS

Tailwind CSS Integration:

• Install and configure Tailwind CSS.
• Use Tailwind classes for responsive design.
• Adding CRUD Functionality

Creating Equipment Entries:

• Formik: Manage form state and validation.
• Zod: Use for validation schemas.
• Build forms to add equipment entries, handle validation, and submit data to Strapi.

Updating Entries:

• Fetch and edit existing data.
• Forms populated with current details for updates.

Deleting Entries:

• Implement deletion and use modals for confirmation.
• Enhancing the User Experience

Search and Filtering with Algolia:

• Integrate Algolia for instant search based on equipment type, availability, or site location.

Geolocation with Mapbox:

• Display current equipment locations.
• Example: Interactive maps showing equipment distribution across construction sites and routing capabilities for equipment logistics.

Real-time Data Updates:

• Use Socket.IO to implement real-time updates on equipment availability and location.
• Example: Notification when equipment is rented or returned, and live updates to location maps.

Pagination:

• Add pagination for equipment listings to manage large inventories efficiently.
• User Authentication and Role Management

Authentication Setup:

• Manage user roles for site managers, equipment handlers, and administrative staff.
• Implement protected routes for sensitive data and operations.
• Deployment and Optimization

Deploying to Strapi Cloud:

• Guide to deploying backend to Strapi Cloud, including handling environment variables and configurations.

Deploying Frontend to Vercel:

• Steps for deploying a Next.js application on Vercel, optimizing for performance and SEO.

Monitoring and Maintenance:

• Recommendations for monitoring application performance and maintaining a robust system.

What are the objectives of your article?

This blog series will guide developers both new and old through the process of building an Inventory management system for a construction equipment rental company the knowledge which can be applied in any real-life inventory use case.
I focuses on highlighting the benefits of using Strapi and its content management features in building production applications. Also adding cool technologies like Algolia search, socket.io for real-time data etc.
Each part will covers an essential part of development up to deployment on Strapi cloud and Vercel for Next.js.

What is your expertise as a developer or writer?

Advance

What type of post is this?

Tutorial

Terms & Conditions

• I have read the Write for the Community program guidelines.

[vector-10]

Hi @Theodore-Kelechukwu-Onyejiaku. Take a look at my outline for a Blog series I am proposing in 6 parts. I am open to adjustments and suggestions and will be expecting your feedback.

Thank you!!

[Theodore-Kelechukwu-Onyejiaku]

This looks good @vector-10 .

Can we also add some cool technologies to this application. React-hook is kind of very common. Perhaps, Chart.js, Real time with Strapi socket.io plugin, etc.

Please let me know what you think so we can update the title. Thank you!

[vector-10]

Hi @Theodore-Kelechukwu-Onyejiaku.
Yes we can add cool technologies and update the title, real time with Strapi socket.io plugin and chart.js for inventory statistics and more. I can work with that.
Do you have any specific title in mind or should i rephrase it myself?

[Theodore-Kelechukwu-Onyejiaku]

Hi @vector-10,

Thanks. I actually want you to include any other technologies. It doesn't necessarily have to be the ones I have mentioned. For example, you can add Algolia Search or any other interesting Technology asides Reach-Hook forms. That way, we can derive a new title.

Concerning the part series, we could have the parts you listed above crammed into 2-3 blog series.

Please let me know what you think. Thank you!

[vector-10]

Hi @Theodore-Kelechukwu-Onyejiaku. Good day, I understand you now and have taken the lliberty to edit the outline with new technologies for features. I also agreed and reduced the series to a 3 part one, I hope this will be standard enough.
Thank you

[Theodore-Kelechukwu-Onyejiaku]

Hi @vector-10 ,

Thanks for your response and you willingness to use other technologies 💪. Please it would be great you list out the new suggestions instead of modifying an old one.

If we are on the same page, you are using the following technologies in the inventory management system:

1. Mapbox
2. Next.js
3. Zod
4. Socket.io
5. and Algolia.

Please proceed! Thank you!

I would also love that you include chart.js 😅. I believe that would also be a great way to display the current products in the inventory, the used ones, total products, etc.

Keep me posted. If you have any challenges don't forget to hit me up 💪

Thank you!

[vector-10]

Thank you @Theodore-Kelechukwu-Onyejiaku. I will begin right away!!

[Theodore-Kelechukwu-Onyejiaku]

Thank you!

[vector-10]

Hi @Theodore-Kelechukwu-Onyejiaku,

I completed my draft for the first part of my blog series here https://hackmd.io/@sqQHs9f3Tjq3Lpw2h9sPKQ/B1B8U3vUR/edit
I also had difficulties adding two GIFs for proper demonstrations in the article with HackMD, I would appreciate instructions to achieve that.

Thank you

[Theodore-Kelechukwu-Onyejiaku]

Hi @vector-10 ,

Thank you! Could you please provide me an edit access to the draft?

[vector-10]

Good evening @Theodore-Kelechukwu-Onyejiaku, I have granted you edit access to the draft.

[Theodore-Kelechukwu-Onyejiaku]

Hi @vector-10 ,

Your article looks good, but lacks the following to fit in to the 2-3 blog series we agreed upon.

• No Visual Demo of what we are building. Do you plan on providing that later?
• It is too short. There is nothing the audience can play with at the moment.
• No technologies used so far.

How about we make it like this:

• Part 1: We include

However, we can make it better:

1. For part 1: We cover the parts where zod and mapbox is required.
2. For part 2: We utilize the power of socket.io using a plugin from the Strapi market place.
3. For part 3: We implement Algolia.

What do you think?

[vector-10]

Good evening, @Theodore-Kelechukwu-Onyejiaku. I just read through and I will follow your suggestions. I had initially planed to make part 1 introductory but dive in later. Now I will make it work and send the draft as soon as possible.

I also mentioned I had trouble with displaying demos in form of GIFs on the HackMD editor, else I had recorded demos video. i will try again to embedd it in the draft.

Thank you.

[Theodore-Kelechukwu-Onyejiaku]

Hi @vector-10 ,

I hope you are doing great! Thanks for your contribution. You can share your GIFs here with me if you have HackMD size-upload limit issue.

Since this work is in progress, would you be willing to use Strapi 5 (https://strapi.io/five)?

[vector-10]

Hi @Theodore-Kelechukwu-Onyejiaku ,

I am doing very fine, It would be unique to work with Strapi 5, so I would do it. Please expect the drafts at the end of the week.
Also should I share the GIFs on Discord?

[Theodore-Kelechukwu-Onyejiaku]

Thank you @vector-10 🚀

You can share the GIFs here please.

[Theodore-Kelechukwu-Onyejiaku]

Hi @vector-10,

Please may I know the status of this draft?

[vector-10]

I will send the draft link as soon as I conclude with the RBAC content

[Theodore-Kelechukwu-Onyejiaku]

Hi @vector-10, I hope you are doing great! Could you please share an update on when this will be ready? Do you anticipate it being completed this week, or should we look to next week? It’s been pending for a while now and would be great to wrap it up.

Thanks so much for your help!