Batou

Batou is a SPA built with React using functional components. It uses React’s Context to share data between components and Axios to retrieve data from APIs. Its design is fully responsive.

It takes users through different scenarios. Some of them are emulations of the Windows XP and Ubuntu desktop, and you can even find a fake Firefox window. With this SPA I tried to build a system that used a lot of CSS to give a final product where users could play a simple and fun interactive game.

Everything in the Windows bar was done with CSS except the Windows logo. The start button releases the Windows menu which is actually an image, but at the top you can see the name that the user inserted in the first stage. The clock shows the actual time (it would be a pity if it didn’t). It is necessary to double-click to open My Computer.

In Ubuntu, both the top bar and the left bar are also made with CSS. As in the real OS, you can see the user’s name, the current time and the operating system options. The latter launches another menu which is also an image. The left bar has three icons, but only the one for Firefox is useful.

The Firefox window is only made to retrieve data from the Edamam API.