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 stages. Some of them are Windows XP and Ubuntu’s desktops emulation, and even a fake Firefox window can be found. With this SPA I tried to built a kind of complex system where plenty of CSS where used to give a final product where users can play a simple, funny interactive game.

Everything on Windows bar was made with CSS except Windows logo. It was a hard work, but very satisfying. Start button releases Windows menu which actually is a image, but at the top you can see the name the user inserted at the first stage. The clock shows real time (it would be a shame otherwise). Double click is needed to open My Computer.

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

Firefox window is made just to retrieve data from Edamam API.

GitHub - Fran Rodriguez