Case study · Fishmonger & Click & Collect
La Marée Malouine: from catalogue to collection
Let customers prepare their orders on their phones while giving the merchant control over daily operations: I built a showcase website and Click & Collect application for La Marée Malouine.
- Click & Collect
- React
- TanStack Start
- PostgreSQL
- Brevo
The need: order online, pay on collection
The fishmonger needed to present fresh arrivals, promote special offers and receive orders for defined pickup slots. The experience had to be simple on mobile, with a catalogue the merchant could update every day without technical help.
- Browse products and place an order from a phone.
- Choose a pickup slot with capacity suited to preparation.
- Pay on collection, with an estimated total for products sold by weight.
A customer journey through to collection
Visitors browse categories, view product details and build their selection. They enter their contact details, choose an available slot and receive an order reference. The merchant accepts or declines the request and can notify the customer when it is ready.
- Filterable catalogue and promotions displayed on relevant products.
- Summary of quantities, prices and pickup location.
- Receipt, acceptance, refusal and ready-for-collection emails as the order progresses.
A dashboard for daily operations
A protected administration area brings routine tasks together. The merchant updates the selection as deliveries arrive, organises pickups and handles requests from the same interface.
- Create and edit products, photos, stock, prices and availability.
- Schedule promotions and generate recurring slots with a maximum capacity.
- Track orders with search and status filters.
- Read and reply to customer messages, and update contact details and opening hours.
Consistent orders, including retries
Order validation recalculates prices and promotions on the server, then checks stock and slot capacity within a PostgreSQL transaction. A submission identifier lets a request resume without creating another order.
- Availability checks when the order is submitted.
- Notifications saved with the order, then sent in the background through Brevo.
- Retries after sending failures and email status tracking for the merchant.
Clear responsibilities and indexable pages
React, TypeScript and TanStack Start handle the interface and server rendering. Routes compose pages, services implement business rules, and data access modules use Drizzle ORM and PostgreSQL. This separation supports changes to customer and merchant workflows without mixing presentation and persistence.
- Tailwind CSS for layouts that adapt to mobile and desktop.
- Metadata, canonical URLs, sitemap and structured data for public pages.
- Admin authentication, server validation and anti-bot protection for forms.
- A Docker container for deployment on a VPS.
Delivery with practical guidance
The site is online, with management tools for the merchant to populate the catalogue and organise pickups. A user guide documents everyday operations. The project also includes an action history, backup export and a restoration procedure reserved for the operator.
- Tests for order rules and concurrent database operations.
- Checks covering message replies, security and restoration.
- A merchant guide for everyday use.
Explore further
Let’s start with your needs.
Your goal, your deadline, the tools you use: a few lines are enough to start the conversation.
Describe my project