React JS x Strapi – Apple Inventory Management System
A content management system enables its user to manage the creation and modification of digital content. For instance, it can be utilized for enterprise content management and web content management. Actually, there are a lot of CMSs such as WordPress.
However, have you ever heard of “…CMS that front-end developers love..” or “…Front-end Developers Should Use a Headless CMS…” ? So it was several months ago that I knew Strapi. At the time, I did not know why it can get thousands of stars on GitHub and loved by developers, especially front-end developers, as it stated on its website.
In previous posts related to Strapi, I described about Strapi but I still have no idea how useful it is. So, recently I decided to create a website using ReactJS and Strapi. The website is Apple Inventory Management System.
— Technical —
I have created both front-end and back-end repositories on GitHub. Feel free to give a star, thank you 🙂
As the source code is on GitHub, this article will not cover deeply in technical things. In this project, I used ReactJS as a framework that I used to build front-end, and Strapi is used to handle back-end.
To create a website using ReactJS framework, first open terminal then you have to create a react app. You can use npx, npm, and yarn.
In this project, the name is apple-inventory-frontend. So just change the ‘my-app’ to ‘apple-inventory-frontend’.
Both ReactJS and React Native are frameworks maintained by Facebook, and are component-based. This means, you can import a component to another page. For example, I created a navbar in ‘./components/Nav.js’.
Then I want to import to App.js. I just have to import like below :
Then place the alias where you want to display the component. In this term, the alias is ‘Nav’.
To fetch data using API, I used a library called Axios. Below is an example :
I needed to determine the HTTP method and url to fetch data via API.
To create the navbar, I used React Bootstrap. However, I must change a number of lines of codes to insert the Apple logo and change the text.
The background is not an image. It is coded using a repeating-linear-gradient function on CSS.
The combination of colors used in CSS was more than three colors.
To change the displaying app’s name on the browser, you can change go to index.html and find the <title></title> element. Inside the element, change ‘React App’ to anything you desire as the displaying name in the browser tab.
In this project, I changed the ‘React App’ string to ‘Apple Inc. Inventory’.
To initialize back-end development using Strapi, open another terminal without closing the terminal used to create this react app.
Just like the react app, change the ‘my-project’ to your project name. In this project, I named the strapi app as ‘apple-inventory-backend’.
Register first, but if you have registered, just login.
First, create collection types, named Product and Stockevent. When creating a collection type, you should name it a singular word.
Fields in Product :
- name : text (short)
- stockevents : relation
Fields in Stockevent :
- type : enum (add and remove)
- qty : number (integer)
- product : relation
For example, product. You should name it as ‘Product’ instead of ‘Products’ because Strapi will automatically put it in plural on the collection types menu.
Go to the `Roles & Permissions` tab. Then click `Public`.
Give a mark like below on each tab, to allow public users to create, find, and find a specific product and stockevent.
Marking on the upload option will enable you to upload images to the media library in the strapi app.
Actually, allowing public users to do create and upload actions is not recommended. Nevertheless, personally I think this is not a problem if only intended for practice.
— Website —
This is the homepage. This website has a navbar on the top of the page which guides users to other pages that have different purposes.
To add a new product, just click the `Products` tab on the navbar.
On this page, users can input a new product’s name.
After that, click the `Create new product` button. If the request is successful, you will be prompted like below :
Click `OK` to confirm.
If you look at Strapi, the iPad Pro 2019 was successfully added.
If you want to see products available on Stocks, just click the `Stocks` tab. You will see a list of stuff and its current amount.
People will buy products and the amount of products will decrease. On the other hand, if products are delivered from factories, the amount of products will increase. How can we manage this?
You can click anywhere on the text of the product to see details. For example, I want to see details of iPad Pro. So just click the `iPad Pro` text.
As you see, we can know that initially the supplied amount of iPad Pro was 120. Eventually, 45 iPad Pros were sold or transferred to another store or even lost.
Although we can see details of events of each product, how can we manage this?
Go to `Add Stocks` tab, and then you can manage this easily.
Click the `Add` button to add an event. This goes whenever you want to either add or remove.
Next, you can see three input bars which enable you to input name of the product, amount of product, and the event (add or remove).
For example, your store has just got 80 iPad Pro 2019 from iStore or Official Apple Store. Then you try to submit like below to save data on the inventory management system.
Click the `submit` button to save. If your input was successfully saved, you will be prompted a message like below :
To check whether if the event was successfully submitted or not, go to Strapi and check the Stockevent :
As you can see, it is the entry with id=18 which we just successfully added.
I want to upload images to save the product’s picture.
No problem. Click the `Upload` tab, then you can submit any images.
Actually, I do not have any pictures so I will upload a random image.
Then click the `Submit` button to save. While uploading, you will see the progress bar and the text saying `Uploading…`.
After successfully uploaded, the text saying `Uploading…` will disappear.
To prove this, we will check the `Media Library` on Strapi.
In the `More` tab, you can see credit which redirects you to the credit page. Besides that, you can see both the source code of the frontend and backend, and also you can visit Apple’s official website although this is not necessary.
On the credit page, there are my name and Alex the entreprenerd, a youtube channel which gives tutorials about Strapi.
You can also visit Kevin’s and Alex’s Github pages by clicking the Github logo.
Last but not least, the `Read Blog` on the navbar will bring you to this article and by clicking the `Github` tab, you can visit my apple-inventory-frontend repository on Github.
Thank you for reading this article! Any advice and improvement on this website and article will be highly appreciated.
