Build an Inventory Management System Using MongoDB Atlas
Rate this tutorial
In the competitive retail landscape, having the right stock in the right place at the right time is crucial. Too little inventory when and where it’s needed can create unhappy customers. However, a large inventory can increase costs and risks associated with its storage. Companies of all sizes struggle with inventory management. Solutions such as a single view of inventory, real-time analytics, and event-driven architectures can help your businesses overcome these challenges and take your inventory management to the next level. By the end of this guide, you'll have inventory management up and running, capable of all the solutions mentioned above.
We will walk you through the process of configuring and using MongoDB Atlas as your back end for your Next.js app, a powerful framework for building modern web applications with React.
The architecture we're about to set up is depicted in the diagram below:
This will result in a multi-store inventory management solution capable of efficiently navigating through your product catalog, receiving alerts, and automating restock workflows, all while maintaining control of your inventory through real-time analytics. Check out the end result here.
Let's get started!
Before you begin working with this project, ensure that you have the following prerequisites set up in your development environment:
- Git (version 2.39 or higher): This project utilizes Git for version control. Make sure you have Git installed on your system. You can download and install the latest version of Git from the official website: Git Downloads.
- Node.js (version 20 or higher) and npm (version 9.6 or higher): The project relies on the Node.js runtime environment and npm (Node Package Manager) to manage dependencies and run scripts. You need to have them both installed on your machine. You can download Node.js from the official website: Node.js Downloads. After installing Node.js, npm will be available by default.
- jq (version 1.6 or higher): jq is a lightweight and flexible command-line JSON processor. We will use it to filter and format some command outputs to better identify the values we are interested in. Visit the official Download jq page to get the latest version.
- mongorestore (version 100.9.4 or higher): The mongorestore tool loads data from a binary database dump. The dump directory in the GitHub repository includes a demo database with preloaded collections, views, and indexes, to get you up and running in no time. This tool is part of the MongoDB Database Tools package. Follow the Database Tools Installation Guide to install mongorestore. When you are done with the installation, run mongorestore --version in your terminal to verify the tool is ready to use.
- App Services CLI (version 1.3.1 or higher): The Atlas App Services Command Line Interface (appservices) allows you to programmatically manage your applications. We will use it to speed up the app backend setup by using the provided template in the app_services directory in the GitHub repository. App Services CLI is available on npm. To install the CLI on your system, ensure that you have Node.js installed and then run the following command in your shell: npm install -g atlas-app-services-cli.
- MongoDB Atlas cluster (M0 or higher): This project uses a MongoDB Atlas cluster to manage the database. You should have a MongoDB Atlas account and a minimum free tier cluster set up. If you don't have an account, you can sign up for free at MongoDB Atlas. Once you have an account, follow these steps to set up a minimum free tier cluster or follow the Getting Started guide:
- Log into your MongoDB Atlas account.
- Create a new project or use an existing one, and then click “Create a new database.”
- Choose the free tier option (M0).
- You can choose the cloud provider of your choice but we recommend using the same provider and region both for the cluster and the app hosting in order to improve performance.
- Configure the cluster settings according to your preferences and then click “finish and close” on the bottom right.
Once the MongoDB Atlas cluster is set up, locate your newly created cluster, click the "Connect" button, and select the "Compass" section. Copy the provided connection string. It should resemble something like this:
Note: You will need the connection string to set up your environment variables later (
MONGODB_URI).- Open your terminal or command prompt.
- Navigate to your preferred directory where you want to store the project using the cd command. For example:
- Once you're in the desired directory, use the
git clonecommand to clone the repository. Copy the repository URL from the GitHub repository's main page: - After running the
git clonecommand, a new directory with the repository's name will be created in your chosen directory. To navigate into the cloned repository, use the cd command:
The database contains:
- Five collections
- Products: The sample database contains 17 products corresponding to T-shirts of different colors. Each product has five variants that represent five different sizes, from XS to XL. These variants are stored as an embedded array inside the product. Each variant will have a different SKU and therefore, its own stock level. Stock is stored both at item (
items.stock) and product level (total_stock_sum). - Transactions: This collection will be empty initially. Transactions will be generated using the app, and they can be of inbound or outbound type. Outbound transactions result in a decrease in the product stock such as a sale. On the other hand, inbound transactions result in a product stock increase, such as a replenishment order.
- Locations: This collection stores details of each of the locations where we want to keep track of the product stock. For the sake of this guide, we will just have two stores to demonstrate a multi-store scenario, but this could be scaled to thousands of locations. Warehouses and other intermediate locations could be also included. In this case, we assume a single warehouse, and therefore, we don’t need to include a location record for it.
- Users: Our app will have three users: two store managers and one area manager. Store managers will be in charge of the inventory for each of the store locations. Both stores are part of the same area, and the area manager will have an overview of the inventory in all stores assigned to the area.
- Counters: This support collection will keep track of the number of documents in the transactions collection so an auto-increment number can be assigned to each transaction. In this way, apart from the default _id field, we can have a human-readable transaction identifier.
- One view:
- Product area view: This view is used by the area manager to have an overview of the inventory in the area. Using the aggregation pipeline, the product and item stock levels are grouped for all the locations in the same area.
- One index:
- The number of transactions can grow quickly as we use the app. To improve performance, it is a good practice to set indexes that can be leveraged by common queries. In this case, the latest transactions are usually more relevant and therefore, they are displayed first. We also tend to filter them by type — inbound/outbound — and product. These three fields —
placement_timestamp, type, andproduct.name— are part of a compound index that will help us to improve transaction retrieval time.
To replicate the sample database on your MongoDB Atlas cluster, run the following command in your terminal:
Make sure to replace
<your-connection-string> with your MongoDB Atlas connection string. If you've already followed the initial configuration steps, you should have obtained this connection string. Ensure that the URI includes the username, password, and cluster details.After executing these commands, you can verify the successful restoration of the demo database by checking the last line of the command output, which should display "22 document(s) restored successfully." These correspond to the 17 products, three users, and two locations mentioned earlier.
Note: You will need the database name to set up your environment variables later (
MONGODB_DATABASE_NAME). If the database name has not been specified, the default name will be inventory_management_demo.Atlas Application Services are fully managed backend services and APIs that help you build apps, integrate services, and connect to your Atlas data faster.
Atlas’s built-in device-to-cloud-synchronization service — Device Sync — will enable real-time low-stock alerts. Triggers and functions can execute serverless application and database logic in response to these events to automatically issue replenishment orders. And by using the Data API and Custom HTTPS Endpoints, we ensure a seamless and secure integration with the rest of the components in our inventory management solution.
Check how the stock is automatically replenished when a low-stock event occurs.
Follow these steps to set up Atlas App Services:
- First, let's make sure that the App Services configuration is correct. If you are building this app on an existing cluster that isn't named
Cluster0, you should navigate to the file app_services/data_sources/mongodb-atlas/config.json in your cloned repository and edit the clusterName field such as"clusterName": "<your-cluster-name>". - Then, you will need to generate your API key pair to authenticate your CLI calls. Navigate to MongoDB Cloud Access Manager, click the "Create API Key" button, and select the
Project Ownerpermission level. For an extra layer of security, you can add your current IP address to the Access List Entry. - Authenticate your CLI user by running the command below in your terminal. Make sure you replace the public and private API keys with the ones we just generated in the previous step.
- Import the app by running the following command. Remember to replace
<your-app-name>by your preferred name.You will be prompted to configure the app options. Set them according to your needs. If you are unsure which options to choose, the default ones are usually a good way to start! For example, this is the configuration I've used.Once the app is successfully created, you will be asked to confirm some changes. These changes will load the functions, triggers, HTTP endpoints, and other configuration parameters our inventory management system will use.After a few seconds, you will see a success message like “Successfully pushed app up:<your-app-id>”. Take note of the obtained app ID. - In addition to the app ID, our front end will also need the base URL to send HTTP requests to the back end. Run the command below in your terminal to obtain it. Remember to replace
<your-app-id>with your own value. The jq tool will help us to get the appropriate field and format. Take note of the obtained URI. - Finally, our calls to the back end will need to be authenticated. For this reason, we will create an API key that will be used by the server side of our inventory management system to generate an access token. It is only this access token that will be passed to the client side of the system to authenticate the calls to the back end.
Important: This API key is not the same as the key used to log into the
appservices CLI.Again, before running the command, remember to replace the placeholder
<your-app-id>.After a few seconds, you should see the message “Successfully created API Key,” followed by a JSON object. Copy the content of the field
key and store it in a secure place. Remember that if you lose this key, you will need to create a new one.Note: You will need the app ID, base App Services URI, and API key to set up your environment variables later (
REALM_APP_ID, APP_SERVICES_URI, API_KEY).Follow these steps to configure search indexes for full-text search and filter facets:
- Navigate to the "Data Services" section within Atlas. Select your cluster and click on "Atlas Search" located next to "Collections."
- If you are in the M0 tier, you can create two search indexes for the products collection. This will allow you to merely search across the products collection. However, if you have a tier above M0, you can create additional search indexes. This will come in handy if you want to search and filter not only across your product catalog but also your transaction records, such as sales and replenishment orders.
- Let's begin with creating the indexes for full-text search:
- Click "Create Search Index."
- You can choose to use either the visual or JSON editor. Select "JSON Editor" and click "Next."
- Leave the index name as
default. - Select your newly created database and choose the products collection. We will leave the default index definition, which should look like the one below.5. Click "Next" and on the next screen, confirm by clicking "Create Search Index." 6. After a few moments, your index will be ready for use. While you wait, you can create the other search index for the transactions collection. You need to repeat the same process but change the selected collection in the "Database and Collection" menu next to the JSON Editor.
Important: The name of the index (default) must be the same in order for the application to be able to work properly.
- Now, let's proceed to create the indexes required for the filter facets. Note that this process is slightly different from creating default search indexes:
- Click "Create Index" again, select the JSON Editor, and click "Next."
- Name this index
facets. - Select your database and the products collection. For the index definition, paste the code below.
Facets index definition for products
Click "Next" and confirm by clicking "Create Search Index." The indexing process will take some time. You can create the transactions index while waiting for the indexing to complete. In order to do that, just repeat the process but change the selected collection and the index definition by the one below:
Facets index definition for transactions
Important: The name of the index (
facets) must be the same in order for the application to be able to work properly.By setting up these search indexes and filter facets, your application will gain powerful search and filtering capabilities, making it more user-friendly and efficient in managing inventory data.
Enhance your application's visualization and analytics capabilities with Atlas Charts. Follow these steps to set up two dashboards — one for product information and another for general analytics:
- Navigate to the "Charts" section located next to "App Services."
- Let's begin by creating the product dashboard:
- If this is your first time using Atlas Charts, click on “Chart builder.” Then, select the relevant project, the database, and the collection.
- If you’ve already used Atlas Charts (i.e., you’re not a first-time user), then click on "Add Dashboard" in the top right corner. Give the dashboard a name and an optional description. Choose a name that clearly reflects the purpose of the dashboard. You don't need to worry about the charts in the dashboard for now. You'll configure them after the app is ready to use.
- Return to the Dashboards menu, click on the three dots in the top right corner of the newly created dashboard, and select "Embed."
- Check the "Enable unauthenticated access" option. In the "Allowed filter fields" section, edit the fields and select "Allow all fields in the data sources used in this dashboard." Choose the embedding method through the JavaScript SDK, and copy both the "Base URL" and the "Dashboard ID." Click “Close.”
- Repeat the same process for the general dashboard. Select products again, as we will update this once the app has generated data. Note that the "Base URL" will be the same for both dashboards but the “dashboard ID” will be different so please take note of it.
Note: You will need the base URL and dashboard IDs to set up your environment variables later (
CHARTS_EMBED_SDK_BASEURL, DASHBOARD_ID_PRODUCT, DASHBOARD_ID_GENERAL).Setting up Atlas Charts will provide you with visually appealing and insightful dashboards to monitor product information and overall analytics, enhancing your decision-making process and improving the efficiency of your inventory management system.
Copy the
env.local.example file in this directory to .env.local (which will be ignored by Git), as seen below:Now, open this file in your preferred text editor and update each variable on .env.local.
Remember all of the notes you took earlier? Grab them because you’ll use them now! Also, remember to remove any spaces after the equal sign.
MONGODB_URI— This is your MongoDB connection string to MongoDB Atlas. You can find this by clicking the "Connect" button for your cluster. Note that you will have to input your Atlas password into the connection string.MONGODB_DATABASE_NAME— This is your MongoDB database name for inventory management.REALM_APP_ID— This variable should contain the app ID of the MongoDB Atlas App Services app you've created for the purpose of this project.APP_SERVICES_URI— This is the base URL for your MongoDB App Services. It typically follows the formathttps://<cloud-region>.<cloud-provider-code>.data.mongodb-api.com.API_KEY— This is your API key for authenticating calls using the MongoDB Data API.CHARTS_EMBED_SDK_BASEURL— This variable should hold the URL of the charts you want to embed in your application.DASHBOARD_ID_PRODUCT— This variable should store the Atlas Charts dashboard ID for product information.DASHBOARD_ID_GENERAL— This variable should store the Atlas Charts dashboard ID for the general analytics tab.
Note: You may observe that some environment variables in the .env.local.example file are commented out. Don’t worry about them for now. These variables will be used in the second part of the inventory management tutorial series.
Please remember to save the updated file.
Execute the following commands to run your app locally:
Your app should be up and running on http://localhost:3000! If it doesn't work, ensure that you have provided the correct environment variables.
Also, make sure your local IP is in the Access List of your project. If it’s not, just click the “Add IP address” button in the top right corner. This will display a popup menu. Within the menu, select “Add current IP address,” and click “Confirm.”
Congratulations! Now, your app is up and running… but have you noticed anything odd? Your charts are empty! Let’s fix this.
Go to your product-related dashboard, and select “Add Chart” to create product-related charts. These charts will appear under the stock level of each product on the product page of the app. It’s a good opportunity to add context to the stock level of each product so you can make informed decisions on replenishment actions.
Consider including a chart showing the number of orders for the last day, grouped by hour. To do this, once you are in the product dashboard, select “Add Chart” and select the
transactions collection as the data source. Set the chart type to “Discrete Line.” Add placement_timestamp in the X axis binned by hour and _id aggregated using the count operator in the Y axis.
In the filter tab, drag and drop
placement_timestamp and type. Then, copy the configuration below. This will display inbound orders made in the current day only.
Your chart should look like this:
Another interesting option is to include a breakdown by size. To do this, add a new chart with
transactions as the data source, and select “Stacked Column” as the chart type. Set placement_timestamp as the X axis and amount inside the items array as the Y axis. Array fields must be reduced to visualize the data. Select “Unwind array” as the array reduction method, and “SUM” as the aggregate operator. Unwind will set the granularity of the data by item variant (White T-shirt XS, White T-shirt M,...) instead of the general product (White T-shirt).Finally, to add a breakdown by size, drag and drop the
name field located inside the items array into the “Series” option. Again, select “Unwind Array” as the array reduction method.
Filter by the current day and inbound transaction type like in the previous chart, and you will get a chart similar to this one:
For a deeper dive into chart customization and features, explore the official documentation of MongoDB Charts.
- To create a general analytics dashboard based on sales, we will need to generate sales data. Navigate to the control panel in your app by clicking http://localhost:3000/control.
- Then, click the “start selling” button. When you start selling, remember to not close this window as selling will only work when the window is open. This will simulate a sale every five seconds, so we recommend letting it run for a couple of minutes.
- In the meantime, navigate back to Atlas Charts to create a general analytics dashboard. For example, you can create a line graph that displays sales over the last hour, minute by minute. Now, you’ll see live data coming in, offering you real-time insights!To achieve this, from the general dashboard, click “Add Chart” and select
transactionsas the data source. Select “Discrete Line” in the chart type dropdown menu. Then, you will need to addtimestampin the X axis andquantityin the Y axis.
This data will update in real time, so to better appreciate the variability in real time, we can limit the results to show only sales data from the previous hour. Navigate to the “Filter” menu under the “Chart Type” dropdown menu. Drag and drop the field
type and timestamp, and copy this configuration, inserting your own timezone.
The resulting chart will look like this:
Your app is ready to go! For the first time, you may need to refresh the website to see the updated charts, but after that, the charts will update automatically, syncing with the new sales. And this is just an example — feel free to add the charts you consider most useful to this dashboard.
Congratulations! Your inventory management app is ready to go. Throughout this tutorial, we’ve covered multiple MongoDB topics. Here’s a quick recap of the key learnings:
- Real-time alerts: Implement real-time, low-stock alerts in your front end using Change Streams.
- Workflow automation: Leverage database triggers to automate stock replenishment workflows.
- Real-time analytics: Stay on top of your data, analyze trends, and make informed decisions in a timely manner thanks to Atlas Charts.
- Single view of inventory: Take advantage of the flexibility of the document model to create a comprehensive single view of inventory.
Remember that this is just the beginning. Feel free to explore, tweak, and enhance your inventory management system to fit your own needs.
Connectivity issues should not prevent your store operations from running smoothly. Continue to Part 2 of this guide to learn how to enable offline inventory management with Atlas Edge Server.
Curious for more? Learn how MongoDB is helping retailers to build modern consumer experiences. Check the additional resources below:
Rate this tutorial