Train des Cévennes

WordPress and React JS web app to manage train bookings and wagon compositions for a tourist attraction.

Démonstration de l'usage de la web app ReactJS & WordPress Rest API
Demonstration of the use of the web app

In Cevennes, a family business operates a steam train for tourists. We designed a tool to facilitate their booking process for this attraction: an intuitive web app powered by React JS and WordPress was born.

In partnership with a local agency, we designed the user interface, the React JS development, and the WordPress integration of a modern web app allowing the creation, editing, and visualization of train compositions and group reservations in tourist cars.

Efficient, reliable, and professional!
We thoroughly appreciated his skills, methodology, and respect for deadlines during our collaboration. We plan to extend our relationship to several future projects. We highly recommend him!

Philippe Couret, iLoop Agency

A Modern Business App with WordPress

Perfectly integrated into the WordPress back-office, the developed tool allows today to administer group reservations through a modern and reactive interface.

How the Reservation Tool Works

The admin can, via a custom-developed form, create a composition for a specific day.

The loaded composition proposes, by default, a configuration of empty wagons. With one click in a wagon/time slot cell, a reservation of a group of people — and their contact information — is taken.

L'UI/UX et design de cet outil ont été conçus par Mosaika
The UI/UX and design of this tool were conceived by Mosaika

Each ticket in a group can be dragged and dropped into another time slot or even another train wagon. Adding a new wagon to the train allows the admin to arrange the train as reservations are made quickly. No page refreshes are required: the server is informed of each action, with WordPress and its Rest API saving data on the fly.

Vital data is updated in real-time in the interface to facilitate quick information: number of remaining seats in a wagon, occupancy bar of a train by time slot, number of people on the train, etc. The React JS framework ensures such responsiveness in the user interface.

Vue opérateur permettant de visualiser le calendrier du jour, les différents trajets et la composition des wagons créée par l'outil React JS en back-office

A WordPress CRUD app

3 SQL tables have been custom created in the client’s WordPress installation to store data in such a particular format. They provide adequate storage for saving train compositions, wagons, and groups.

The tool accepts several types of users to consume this data. On the one hand, the admin can freely design and delete train compositions and organize the wagons and groups in these compositions. A calendar allows access to a composition already created for a specific day.

On the other hand, other user profiles can only read these compositions: armed with smartphones on visiting days, they can easily access the composition of the day and thus detail the composition of a train for a specific journey. Each reserved group is detailed, its route specified, and its size presented.

React JS Development Integrated with the WordPress Rest API

The reactivity of such an app is essential: making a reservation for a group of tourists must be done easily and quickly. React JS & Redux allowed us to achieve this responsiveness. The interface loads the JSON data provided by WordPress, and any new user action (creating/editing/moving/deleting a group, adding/deleting a wagon) is automatically and immediately recorded in AJAX.

The WordPress Rest API allows us to create secure routes explicitly designed for this tool. Thanks to this React JS and Rest API WordPress coupling, the delivered tool is fast and responsive, perfect for intensive daily admin.