Silverstripe + React + Material-UI

Early this year we were presented with a project scope to develop a property management system which holds information about various tourism organisations mainly hotels, their room types, room rates, free-busy periods and finally an advanced booking system.

Challenges we had were choosing the right stack of technologies and building the system’s architecture. We have a few things in mind to achieve with this project. It needed to be extremely fast, and scalable among multiple servers. 

We knew the right direction to go was to use a distributed database, distributed digital assets and make the maximum of out of client side processing. We came up with a technical stack which included 

• Silverstripe CMS, for data management 
• Amazon S3, for digital assets storage
• ReactJS, to build the user interfaces taking them completely away from Silverstirpe
• Material-UI, to use as the base to built the interfaces 
• GraphQL, to manage communications between Silverstripe and React 
• JWT for authentication

With the use of react we could avoid using Silverstripe templates, what this meant was all the looping, conditional and injections were not used, and brought to the client side. It also made it possible to use multiple servers without having to worry about distributed sessions.

A good thing about using Material-UI and basing the designs on MUI is faster turnarounds in development. After completing our basic style guides and patterns, the rest pretty much was to follow the wireframes and build each section in. Material-UI allowed us to create reusable react components for various complex field types, data grids, etc. and worked perfectly.

Silverstripe has a powerful ORM. We used all powers of it for CRUD operations of various data types. Silverstripe also ships with a GraphQL module enabling using it with React Apollo. Apollo allowed fetching data and executing mutations on the database, We ended up extending it to handle file uploads, versioned records updates etc.  GraphQL enabled querying data on a need to know basis, this saved us a lot of processing power in the CMS.

We made use of the react router to enable switching between various screens of the application. It ended up being as fast as lightning when a button was clicked and was only showing a different screen.

With the use of react and its statuses we built form validations within the front end application. However we did also have validations in the PHP, but we could avoid scenarios where a user submits a form and waits for the server to respond with validation errors. It also helps with minimising the traffic for the API.

We made a powerful data management system within a time span of eight sprints and achieved unimaginable speed and stability. The project is still in its early stages in terms of production, but we haven’t had any issues so far, which is great. Our recommendation for any data management, business automation project would be to use Silverstripe with React JS and Material-UI.

It all starts with a “Hello!” click below to flick us a message to discuss your next digital project.