Designed as a “technical exploration” project, Miam.Pizza is a WordPress-powered website aiming to offer a free modern web page to restaurants and food trucks.
Miam.Pizza was inspired by a simple fact: in the French countryside or in the city, it’s hard to locate your favorite pizza truck and even harder to find its menu! So I created this online directory of pizza restaurants.
An online tool for pizza chefs, powered by WordPress
The Miam.Pizza website was created to help restaurant owners (regular pizzerias or pizza trucks) improve their online visibility. In just a few clicks, a professional can create a web page on Miam.Pizza.
A professional business card, online
From an architectural point of view, many WordPress post types have been developed to meet the site’s needs and store the different entities (business, menus, products, etc.).
The ACF plugin perfectly accompanies this specific development and helps create efficient front-end management forms available for professionals to edit their pages and content.
Once created and configured, its web page will display valuable and useful information to the pizzeria’s customers:
- logo, opening hours, telephone and address,
- truck rounds and locations,
- complete menu organized by size and price,
- services available in the restaurant/truck.
Marketing tools for business owners
When visiting a restaurant’s web page, a user will be able to add their choices of pizzas in a “virtual basket” and place an order by phone more efficiently. A handy little extra for pizza parties!
Restaurant owners have access to a private tool that generates custom visual designs with their information on the professional side. These visuals are automatically pre-filled on the server-side to provide a JPG image to share on the restaurant’s Facebook page.
A directory entirely developed using WordPress and React JS
From user registration to the administration of a restaurant page, the entire website design was created by myself and developed with and for WordPress. This open-source framework allows me to manage the whole life cycle of this complex website:
- the data architecture is managed via custom content types and taxonomies. An object-oriented abstraction layer allows easy and readable access to restaurant and user data on the theme side via models,
- metadata management is done via the ACF plugin. This plugin also handles the forms display for creating or editing content (contact information, logo, schedules, routes, pizzas, etc.),
- generation of custom visuals is triggered by the Rest API (coupled with the Intervention library)
- chained events are triggered by custom hooks with immediate or asynchronous processing (via Action Scheduler).
Front-End Management via ACF
The restaurant owner with a web page on Miam.Pizza will be able to manage it entirely on the front-end without leaving the site interface to access a WordPress back-end.
The editing of these pizzerias and pizzas metadata is managed internally by a thorough use of Advanced Custom Fields: front-end form, custom validation, data reception, and processing… everything goes through ACF and its hooks!
A visual generation tool powered by React JS
The visual generation tool, made available to the restaurant owners, was an excellent opportunity to experiment with React JS strengths in a real-world project. This JavaScript framework is used to create dynamic web interfaces managed by components that combine HTML structure, business logic, and CSS styling.
Connected to WordPress via its Rest API, this tool enables pizzeria administrators to generate customized designs presenting their business’ contact information in a few clicks. The resulting images are then made available to the professional and can be easily shared on their Facebook page. Perfect for modernizing your social networks and becoming more visible!
Miam.Store: the bigger brother
In 2020, I sold Miam.Pizza website’s rights to a long-term client. I had the responsibility and the chance to make the system evolve by integrating many new features. That is how Miam.Store came to be.
This second website is positioned as the Guadeloupean “Uber Eats”: restaurant owners have an even more complete range of tools to display their menus and accept online orders.
As for customers, they can enjoy a full shopping experience (online payment, account creation, order history and tracking, etc.).
Technical redesign with a modern object-oriented WordPress foundation
After 3 years of personal learning and coding standards evolving, it was time to modernize the website’s codebase. All the code has been reworked to respect a total object-oriented logic. Separation of responsibilities, triggering of events, refined models and relationships, etc. The reworked code offers better readability, maintenance, and flexibility.
A more comprehensive toolkit for entrepreneurs
On the functionality side, the system has also greatly evolved to offer restaurants more advanced settings to manage their Miam.Store page:
- possibility to define product variations,
- configuration of their payment tunnel to activate (or not) online and direct payment, delivery to the customer, authorized time for pre-ordering and order completion, preparation time,
- definition of daily product stocks and automatic deactivation of orders for sold-out dishes,
- React JS module for live tracking of the day’s orders and an interface allowing the restaurant owner to update the status of the order (in preparation, being delivered, etc.),
- development of an invoicing module per week per restaurant and an automatic commission calculation system for the platform.
Specific PHP developments to integrate with unique APIs
Finally, I created advanced developments in order to connect the Miam.Store website with external services through third-party APIs and internal webhooks. In details:
- I worked with the SpotPay payment gateway API to provide a comprehensive shopping experience. The SpotPay API verifies the credit card payment, and 3D-Secure validations are presented if needed. An internal custom webhook allows SpotPay to send back payment status evolutions. The order tracking page presented to the buyer is updated in real-time to reflect these events.
- another API for sending SMS allows, when creating a user account, to confirm the buyer’s cell phone number by a secret code to ensure the integrity of his request,
- an internal API is used as a webhook for a credit purchase system in order to follow the balance of the restaurant owners’ credits, allowing them to receive customer orders on the website.
Once again, WordPress was used as a full-fledged PHP framework offering incredible flexibility and performance to create such a complex project.