Math&Maroc
An association's site, and the platform behind it
For a non-profit that teaches olympiad mathematics for free: its site in three languages, its five programme sites, a participant space to apply to any of them, and the console its volunteers run every edition from.
- Role
- Design, development
- Status
- Nearly live
- Built with
- Next.js, Convex, Better Auth, Sanity
- Visit
- mathmaroc.org
3 languages, one read right to left
5 programme sites, from one app
1 account for every programme
I · The association
Mathematics, for free, across Morocco
Math&Maroc is a Moroccan non-profit founded in 2016 by former olympiad participants. It runs free competitions, camps and olympiad training, and each of its programmes (MTYM, MDM, MMC, FMA and the Summer Camp) has its own site.
It asked for a new site in English, French and Arabic, edited by volunteers. The programmes' sign-ups ran on separate older apps, so the work grew into one platform for all of them.
II · What I made
A site, then a platform
Designed and built in full, in English, French and Arabic:
- The association's site, edited in Sanity by volunteers.
- The five programme sites, served by one app, each in its own colour.
- A participant space: one account to apply to every programme, with teams, tickets and certificates.
- A staff console: applications, decisions, juries, check-in at the door and certificates.
- The association's historic logo, redrawn for the screen.
III · The site
A notebook, and a binder
The site is set like a mathematician's notebook: warm paper on a graph-paper grid, square corners, one blue ink. The divisions page is a binder: each division is a sheet that stacks on the last as you scroll, leaving its tab showing.
The association's bilingual lockup was redrawn as vectors from the original artwork, in the new blue. The same drawing marks every site, ticket, certificate and social card.
3a. Home. The home page hero: the mission headline under the Math&Maroc lockup, and a scatter of photos from the events.
3b. Programs menu. The Programs menu open in the header: the five flagship programs, each with its own website.
3c. Programs. The programs section of the home page, one card per competition or camp.
3d. Divisions. The divisions page, laid out as a binder: a table of contents of the five divisions, then one sheet per division.
3e. Divisions binder. Further down the binder: each sheet sticks as it reaches the top, and the covered ones leave their tabs like a binder's dividers.
3f. Division. A division page, Mathematical Olympiads: the mission, key figures and the documents to download; the five division pages share this layout.
IV · Three languages
English, French, and Arabic from the right
Arabic reads right to left, so the whole layout mirrors, and it gets its own typography rather than the Latin settings. A missing translation stops the build instead of falling back silently.
V · The programmes
Five sites, one notebook
One app serves all five programme sites, from the address it's reached at. They share the notebook and each writes in its own ink; a strip on top links the whole family and the participant space.
5a. MTYM site. The MTYM site, one of the five program sites served by a single app, each in its own ink; the strip on top links the whole family and the participant space.
5b. Summer Camp site. The Summer Camp site: the same notebook, in the camp's own ink.
VI · Participants
One account, every programme
One account for every programme. A participant sets up their profile once, with a guardian's signed authorisation for minors, then applies through forms that save as they go. Teams form with a code. Accepted participants get a ticket with a QR code, and afterwards a certificate anyone can check.
6a. Overview. The participant space, one account for every program: the setup done once (email, profile, guardian, signed authorisation), then applications and messages. Demo data.
6b. Application. An application to MTYM 2026, in the program's ink: the decision, the next step, the stages and what is still to submit.
6c. Team. The team page: name, quadrigram and status, the members, and the code teammates join with.
6d. Ticket. The admission ticket, with its QR code, to show at the door on a phone or printed.
6e. Certificate. A certificate of participation, to print or save as PDF, with a public check link and QR code.
VII · The staff
The console behind it
The volunteers who run each edition work in one console, and each sees only what their role opens: reviewers, jurors, check-in volunteers, programme admins.
- Applications in a queue, with filters and an export.
- Decisions drafted first, and published to applicants only when staff choose to.
- Jury desks that show a team's work and score sheet, never its members' details.
- Check-in at the door from a phone, by scanning the ticket or by name.
- Certificates, messages to applicants, and the application forms themselves, built and versioned in the console.
7a. Edition overview. The staff console for one edition: live counts, the pipeline by screening status and by decision, and the places the person's roles open.
7b. Applications. The applications queue: status tabs with counts, filters, bulk actions and a CSV export.
7c. Application file. One application file: its stages, the drafted decision ready to publish, the screening status and the reviewer.
7d. Decisions. Drafted decisions wait here; applicants see nothing until staff select and publish them.
7e. Form builder. The versioned form builder: the questions, each one's settings in three languages, and a live preview drawn by the participant space's own renderer.
VIII · On a phone
In a pocket
The site, the programmes and the participant space all work on a phone, in all three languages.
8a. Home. The home page hero on a phone.
8b. Menu. The phone menu, with the language and theme switches at the bottom.
8c. Division. A division page on a phone.
8d. Divisions. The divisions page on a phone: the table of contents, then the first sheet.
IX · Where it stands
Nearly live
The site, the programme sites, the participant space and the console are built. The move to mathmaroc.org is close.
Credits
- Mohamed Ali Mejbar Design and development