A map of the store
Realmed is a pharmacy in the UK. They keep medicines and medical equipment on shelves around the shop and in a back warehouse.
The app shows the whole store as a map. Click a shelf slot and you get a list of what's on it, where you can add stock or export it to Excel.
What I built
I was one of three full-stack developers. My two teammates built the rest of the app.
- backend
Database design
How products, locations and staff are stored in MongoDB.
- backend
Login and security
Sign-in, sessions, password hashing and password reset by email.
- full stack
User management
Creating, editing and removing staff accounts, from the API to the screen.
- devops
Deployment design
I planned the deployment layout. A teammate set it up.
How it's put together
- Frontend
- React with Vite and Tailwind CSS, in JavaScript.
- Backend
- Node.js and Express with Mongoose, in JavaScript.
- Database
- MongoDB, running outside the server.
- Hosting
- Docker Compose on a DigitalOcean droplet, behind Nginx with HTTPS from Let's Encrypt.
Getting login right
This was one of my first paid projects, and I didn't have much experience yet. Login was the part I was most nervous about, because it guards a pharmacy's stock.
Passwords are hashed with bcrypt, so the real password is never saved. After login, the server gives the browser a JWT inside a cookie set to HTTP-only, Secure and SameSite. That means scripts on the page can't read it, it only goes over HTTPS, and other sites can't use it. If someone forgets their password, they get a reset link by email.
What I'd do differently
I'd write it in TypeScript.
I used plain JavaScript because I'd only just started taking client work, and it was what I knew. Types would have caught a lot of small bugs earlier. Everything I've built since is in TypeScript.
Where it is now
- Status
- Live, and still used by the store
- Team
- 3 developers
- Screens
- Shown with the client's permission