[Gerimed Mobility]
Project Overview
Gerimed Mobility is a local medical supply shop operating out of Langebaan. They have been in business since 2001 and needed an online shop to cater to their user's needs. As ambitious as I was, I built the entire frontend from the ground up, creating the backend with Strapi and custom plugins.
Role
Fullstack Developer
Stack
- Javascript
- React
- Gatsby
- SCSS
- Strapi
- GraphQL
Problem Statement
The Problem
Wanting to expand their business, the shop owner approached me with an opportunity to build an online shop, wanting an easy way to manage their products and orders.
The Solution
Not wanting to use WordPress for this, I decided that a custom solution would be the best choice to allow for as much flexibility as possible while keeping to my skills.
The Results
The result of a custom online shop was an easily adaptable online shop that's performant with hassle-free management from the admin panel, pushing me as a developer.
Project showcase
(TapClick to zoom, drag to scroll)
Concluding notes
Project scope
Without a doubt, the scope of this project was humongous. I was already comfortable creating the storefront but had little experience with the backend.
Security
Keeping security as the primary objective, I researched various approaches to dealing with the backend, ensuring the entire setup was PCI-compliant. A few pain relievers came from the owner and the way he wanted to deal with payments.
Online payments and deliveries
Although I wanted to implement a full payment and delivery system, the owner prefered having a quote-based system and manual handling of orders. This was a massive relief for me as I did not have to deal with payments and deliveries.
I did, however, implement a cart system, an order management system, and quotes and invoices generation from the ground up
API handling and the storefront architecture
Using React as the focal point for the storefront meant I had to make architecture decisions that would typically not be of interest in static sites. With React being only a library, I decided to follow the MVC pattern (Model-View-Controller).
The main setup for this patterns was:
- Model ➜ GraphQL (From Strapi)
- View ➜ React
- Controller ➜ xState (Finite state machines)
Following this pattern allowed me to separate logic, have clear insights on the data model being used, and create global and scoped states that are predictable.