ReactJS Dashboard

The dashboard itself is built in a javascript library known as ReactJS, which was developed by the tech giant Facebook. We chose this library as it’s super fast and requires almost zero load time to switch between pages of orders (which is great when you need to switch between dozens of pages); and it’s incredibly scalable which has allowed us to add new features over time and scale the project.

As mentioned previously, the dashboard has been able to scale and adapt over time as the business has grown. We integrated with the WooCommerce API which allows us to pull new orders, we also built some custom fields asking the customers for more info about their account, such as pets name, breed, size and birthday. This really allows Ultimutt Dog Box to cater for their customers individual needs.

The dashboard also features a stock list, where they’re able to manage their current stock levels and visually see any products which are set to expire; therefore reducing waste and helping them become more eco friendly.

Another requirement was a space to upload the contents of each months box subscription which is sent out, to make sure they don’t send the same items out to customers more than once.

Finally, a quirky little thing they like to do is add personalised printed cards inside each of their boxes. Using the WooCommerce API we grab a list of the pets name, so all the team have to do is write their personalised message and hit print. This prints a list of cards with the custom message, but personalised to each of their customers, with minimum effort.

With each project, our approach is to find out the customs needs, and create a tech stack based on those requirements. Here is the tech stack which help us create this bespoke dashboard.

• React JS
• Tanstack Query (React Query)
• React Router
• Ant Design component library
• WooCommerce API
• React Vis Charts
• Firebase Authentication
• Firebase Firestore