After seeing this institutional website I thought it would be very interesting to have those castles "in your pocket". Having not found public APIs or a DB of that data I had to make a scraping bot written in NodeJS that processed page by page.

This app is born out of the desire to experience the world of PWAs, a set of technologies capable of approaching webapps to native mobile apps. I took advantage of it to immerse myself in the React world, studying the whole ecosystem (Redux, RXJS, Styled components, Firebase, ...).

The main feature of this micro-application is that it can work totally offline. In fact, caching systems of the app files (assets such as the JS engine) are exploited and the database is stored in the device, a database that resides on Firebase.

• COMPILING

  • Typescript
  • Create React App
  • Storybook

• CLIENT

  • React
  • Redux
  • Styled components
  • RxJS
  • PWA

• SERVER

  • NodeJS
  • Firebase

This experiment comes from a vision: a screen powered by a community that can display and automatically reproduce the various types of content: audio, video, photos, text ...

Of course there is no moderation or censorship, so the danger of incurring into inappropriate content is very high. Hence the name "Hell Display". A hellish monitor that not everyone will have the courage to keep open.

The contents are "launched" via Telegram. In fact, a bot has been built to receive content and turn it through websocket to the application.

Once the development of the SPA was finished I thought of packaging everything in a PWA desktop to allow installing the application. I have also implemented web push notification management.

• COMPILING

  • Typescript
  • Create React App

• CLIENT

  • React
  • Glamorous
  • Socket IO
  • PWA

• SERVER

  • NodeJS
  • RxJS
  • Socket IO

• EXTERNAL

  • Telegram

This app is in Italian and should be used preferably on mobile

This game has been created during the last months of primary school of my sons, which have helped me to plan, draw, invent everything. An infinite brainstorming, let's say. We wanted to create a tool that could keep children (now boys) in contact even after the end of primary school since almost everyone would no longer be in the same class the following year.

We set out to:

• don't create a chat
• do not use in any way personal or sensitive data
• do something that amused and even a little creative

From these few guidelines the "Sistema Scolare" (School System) was born.

The game works with a database (imported from a spreadsheet on Google) containing all the classmates grouped by classes. Each player has a preset password, few personal data (name, gender) and some answers to a questionnaire we had asked to answer (hair color, favorite cartoon, etc ...).

Once authenticated with his password, the player will find himself in space with a spaceship ready to explore the planets nearby. Each planet is owned by a classmate but is locked, to unlock it the player must guess the name of the owner using the clues (taken from the questionnaire above). Once the planet is unlocked, he can explore its surface in full "Zelda" style. This map is completely managed and customized by the owner himself. Here the visitor can also "plant" around messages that all planet's explorers will be able to read.

You can try demo using one of the players contained in this document. To simplify password is same as username. Once logged in you can build your own planet clicking on "Casa mia" or you can explore universe searching for planers to unlock. To unlock a planet you have to guess the owner's name with the help of the clues (you'll find in the usual document).

• COMPILING

  • Typescript
  • Create React App
  • Storybook

• CLIENT

  • React
  • Redux
  • FeatherJS client
  • GSAP (Green Sock)
  • PIXI.js
  • Hammer
  • Web Speech API

• SERVER

  • FeatherJS (NodeJS/Typescript)
  • MySQL
  • Socket IO