HemexLanding pages
Hemex landing page
The public site of a children's coding academy in Egypt: a home page and a four-step parent registration, in English and Arabic.
Context / scope
Overview and scope
Hemex is a coding academy for children and young people in Egypt. This is its public site: a home page and the registration that creates a parent's account before the parent portal takes over.
Pages: home and register, each in English and Arabic.
Front-end developer: wrote all 24 commits of the site, December 2024 to February 2025. The home page, the Arabic version and the connected last step were added later in a second pass on the same code.
Results
- No results were recorded, so none are claimed.
- Emails, phone numbers and locations in the captures are sample data.
Interface / screens
Walkthrough
Screen 1 of 9: Home page. Real interface, sample data.
Responsive and states
Screen 1 of 1: Code step on a phone. Real interface, sample data.
Behaviour / flows
Features and flows
Home page
- A hero built from the academy's own description, the four registration steps and a closing call to register, with a header that links to each section.
- Locations come from the API: online classes and each branch with a map link; the section is hidden when none load.
Registration in four steps
- Register with an email address or a mobile number; the service's answer, such as an address already registered, is shown under the field.
- The code step names where the code went, accepts paste and the phone's code autofill, clears a wrong code with the reason, and offers a new code after 60 seconds.
- Contact channels and locations come from the API; the registered email or number fills the matching channel, and every value is checked as it is typed.
- The last step sends the chosen channel and location ids; a summary then shows what was saved, where the sign-in details go and a link to the parent portal.
English and Arabic, any screen
- Every page in both languages, Arabic right to left, with a language switch that keeps the visitor on the same step with the same choices.
- On phones the step labels become one line, and every field has a label and its own error message.
Engineering / decisions
Architecture and decisions
Next.js 15 App Router with React 19 and TypeScript, Tailwind CSS with daisyUI in the academy's purple and yellow, and next-intl for routing and messages in English and Arabic.
API calls live in small typed helpers, and each registration step has a hook for its request, errors and state.
Choices kept by the form
The steps were separate components with their own state, so going Back lost the ticked channels and locations while the old ones were still submitted. The form now owns every choice, and each step only shows and changes it.
A code verifies one contact
Verification is stored against the email or number the code was sent to, so changing the contact after verifying asks for a new code, and going back to the first step does not register the same contact twice.
Progress kept for the tab
The step and the choices are kept in session storage, so a refresh or a language switch continues where the visitor was. The code digits are never stored, and the saved progress is cleared once registration completes.
Lists rendered on the server
Channels and locations are rendered on the server and refreshed every five minutes instead of fetched on every visit, and a step whose list could not be loaded says so instead of failing.
Limits / notes
Known limitations
- The local copy of the Hemex backend predates this site and lacks its registration preference endpoints, so the calls follow the site's own types. The captures run the real production build against a local stand-in for the API with sample data.
- The home page shows only what the project's sources contain (the academy's description, the steps and the locations), so it has no courses, prices or academy contact details.
Stack / tools
Technologies
- Next.js
- React
- TypeScript
- Tailwind CSS
- daisyUI
- next-intl
- React Toastify
- React Icons
Part of Hemex
Hemex is a coding academy for children with a separate app for each role. The instructor dashboard covers sessions, attendance, availability and profiles; the parent portal covers students and level booking, in English and Arabic.
The public site has a home page and a four-step registration for parents (email or mobile, a verification code, contact preferences and locations) in English and Arabic, ending with a summary and a link to the parent portal.