Loading Marwan Elsayed
Skip to main content
Back to Work

E-commerce

Hamilton Pharmacy

A pharmacy website presenting services and prescription request forms.

Started
2025
Status
Completed
Role
Front-end developer
Area
E-commerce
Stack
Next.js, React, TypeScript, MUI
What I implemented

Implemented the pharmacy front end, including service pages and new-prescription, refill and transfer request interfaces.

Capture of the Hamilton Pharmacy home page shown with sample data.
Real interface, sample data

Context / scope

Overview and scope

A pharmacy website that presents services and collects prescription requests.

The routes in the code are about, contact, minor ailments, prescription, services with a virtual clinic page, policy and privacy.

Front-end developer. The CV lists integrated DTC e-commerce storefronts among the front ends built.

Results

  1. The CV records no result figures for this project, so none are stated.
  2. The prescription form is captured empty; no patient or health data appears.

Interface / screens

Walkthrough

Capture of the Hamilton Pharmacy home page shown with sample data.
Home page. Real interface, sample data.
1 of 5
Hamilton Pharmacy

Home page. Real interface, sample data.

1 of 5

Screen 1 of 5: Home page. Real interface, sample data.

Screen 1 of 5: Home page. Real interface, sample data.

Responsive and states

Capture of the Hamilton Pharmacy empty prescription request form shown with sample data.
Empty prescription request form. Real interface, sample data.
Hamilton Pharmacy

Empty prescription request form. Real interface, sample data.

Screen 1 of 1: Empty prescription request form. Real interface, sample data.

Screen 1 of 1: Empty prescription request form. Real interface, sample data.

Behaviour / flows

Features and flows

Prescription request modes

  • The prescription page selects new-prescription, refill or transfer forms from its mode parameter and scrolls to the form when a mode is supplied.
  • The new-prescription form requires address fields for delivery, alongside the required contact details, uploaded-file URL and privacy consent.

Engineering / decisions

Architecture and decisions

Next.js 16 with React 19 and TypeScript, using MUI 7 for the interface and Swiper for carousels.

Forms send through EmailJS and are protected with reCAPTCHA. The dependency list also includes Firebase and react-countup.

Separate forms under shared mode state

The prescription page owns the mode and submission state. A shared form wrapper renders separate new-prescription, refill and transfer components and passes submission and error callbacks to them.

Limits / notes

Known limitations

  1. The screenshots show the prescription-request interface; live uploads, email delivery and CAPTCHA verification are outside the captured walkthrough.

Stack / tools

Technologies

  • Next.js
  • React
  • TypeScript
  • MUI
WhatsApp (opens in a new tab)