Few months after I started to work at Overblog, we started the big project I was employed for: An engineering redesign of our web back office application, which let users manage their blogs.
The old application was built using an home made Javascript framework based on YUI, built by Yahoo but no longer maintained. It becomes important to rebuild from scratch using a new modern stack before adding new functionalities.
We quickly decided to use ReactJs for its components based approach allowing us to organize our code base but also for the JSX language allowing us to use HTML inside Javascript.
We used the Apollo library, which follow GraphQL specification, to request data in a simple and flexible way. It allowed us, front-end developers, to be more autonomous compared with a Rest API.
We used the styled-components library and could have profit of the CSS-in-JS power using the CSS syntax in the Javascript thanks to "templates string".
We also used styled-system because we love the responsive and scaled props the library offer. It help us minimize our markup and keep the application unified.
Forms are everywhere in our application and we chose to use React Final Form to handle them. We liked how we could build dynamics and complex forms with it.
A modern web application should adapt to every screen size and be able to be used in landscape or portrait mode. Our old design was not responsive.
We had to rethink the user interface but also the user experience to make the new application ergonomic and easy to use from every platform.
We developed a dark theme because we wanted to offer a feel good effect and a restful design to our users. It’s important to let each use the choice because using a dark theme or not is very personal.
One the application was responsive, the next step was to make it involved to a Progressive Web App.
The purpose was to let users install the web application on their smartphone.
We developed an universal native application to be present on the PlayStore and l’AppleStore. These applications are built using Expo and composed of a WebView which render our responsive web application.
To be confident before deploying a new version, we developed end-to-end tests using Jest and Puppeteer.
We could tests critical scenarios like: