Case study
Chorouk Market
An online grocery app for a Tangier supermarket, on iOS, Android and the web, with delivery, loyalty points and a back office.
- Year
- 2025
- Services
- Technologies
- Next.js, React, Tailwind CSS, Radix UI, PocketBase, Leaflet, OpenStreetMap, Recharts
01 / Context
Overview
Chorouk Market is a neighbourhood supermarket in Tangier. We designed and built its whole online grocery system: a mobile app for iOS and Android, published under Claro's name since June 2025, an ordering website and a back office for the store's team. All three run on the same server, so a price, a promotion or an out-of-stock item changes everywhere at once.
02 / Starting point
What the project had to solve
Grocery shopping online is not like an ordinary online store purchase. Customers buy fresh produce, want to choose when they are delivered and pay at the door, often by card, while the store has to prepare every order quickly and without mistakes. So the app had to be as simple as a trip through the checkout for the customer, and a complete management tool for the team, from the catalogue to promotions.
03 / Scope
Scope
We built all of it, from the mobile app and the ordering website to the back office, the server and the messaging that connects customers with the store. The back office brings together products and categories, orders, customers, promotional banners, points and coupons, complaints, notifications and two analytics dashboards, one for orders and one for users, so the team runs all of its online sales from a single tool. Each team member signs in with their role (administrator, cashier or stock manager).
04 / Decisions
Decisions
Customers can buy by amount rather than by unit: they type a sum in dirhams and the app works out the matching quantity. Loyalty runs on points earned only on delivered orders, then turned into coupons in the app, and a cancelled order gives back both its points and its coupon. The server pushes every new order in real time to the back office, where a sound alert warns the team each time one arrives. Delivery fees and the free-delivery threshold are set in the back office, without touching the code.
05 / Build
What we built
Customers create their account with their phone number, save their addresses on a map or from their current location, then browse the aisles by category, with a search that suggests products as they type. Each product page shows the price, the current promotion, nutritional values, reviews and similar products. At checkout they can pick a delivery date and time. Payment, on the other hand, happens at the door, in cash or by card on the driver's terminal. Customers then follow their order step by step with their driver's name, message the store from the app and reorder the same basket in one tap.
06 / Technology and integration
Technology and integration
The ordering website and the back office are two Next.js applications, built with React, Tailwind CSS and Radix components. The server runs on PocketBase, which holds the database, the accounts and the real-time subscriptions, so the back office sees an order the moment it is placed. Maps use Leaflet and OpenStreetMap, charts use Recharts, and a dedicated messaging service connects customers with the store.
07 / Results
The results
Customers order their groceries from the iOS and Android app or from the website, and follow every order to their door.
Loyalty points turn into coupons in the app.
The team manages the catalogue, promotions, banners and push notifications from the back office, without a developer.
Every new order reaches the back office in real time, with a sound alert.
The store answers its customers by message, straight from the back office.
Related pages
Let's discuss your priorities
A comparable project in mind?
Tell us about your context, and we'll tell you how we would approach it.
- The call lasts thirty minutes, by video.
- You speak directly with a Claro expert.
- Afterwards, we email you the next step we recommend.