Do dot matrix printers still exist?
....

Personal Video Archive

Overview

...

Tech

  • COMPILING

    • Typescript
    • Create React App
  • CLIENT

    • React
  • SERVER

    • NodeJS

Alpen Trekking webapp

Overview

I am part of the organizational staff of a group that has been walking in the hills at night for several years: Alpen Trekking. This webapp was born because partecipants wanted some information and statistics about completed tours: distance walked, difference in height, time elapsed. Soon the desire to put everything in a ranking emerges... everyone likes a bit of competition!

To speed up development without sacrificing the quality of the project, I decided to use a framework that has great immediate productivity: Laravel. Laravel in "hybrid" mode with InertiaJS allowed me to create a PWA in React in relatively little time.

For the data part I built an import engine to put the contents of Google Spreadsheets into the database: in this way the other staff members can make data entries in a controllable, fast and versioned way.

Tech

  • COMPILING

    • Typescript
    • Vite
  • CLIENT

    • React
    • SASS
    • InertiaJS
    • PWA
  • SERVER

    • Laravel 10
    • Google Spreadsheet

APP Emilia-Romagna castles

Overview

Remake of this PWA, have a look to that repo's README to know some background.

This app has been created in React Native (based on Expo) and adds some kind of gamification to user experience. In fact user can now "collect" a castle if he's near enough to its geolocation and he will be warned by a local notification. This will work in background mode too if user activates "radar mode *".

User can reach achievements and earn badges that can sometime unlock hidden castles.

* At the moment I had to remove this feature because I wasn't able to explain to Google the reason it would be useful.

Tech

  • COMPILING

    • Typescript
    • Expo
    • Storybook
  • CLIENT

    • React Native
    • Redux
    • Styled components
    • RxJS
    • Local notifications (+ background)
    • Firebase Analytics
    • Google AdMob

Sistema Scolare (School System)

Overview

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.

How it works

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.

Demo

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).

Tech

  • 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

Emilia-Romagna (North Italy) castles

Overview

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.

Tech

  • COMPILING

    • Typescript
    • Create React App
    • Storybook
  • CLIENT

    • React
    • Redux
    • Styled components
    • RxJS
    • PWA
  • SERVER

    • NodeJS
    • Firebase

Hell Display

Overview

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.

Tech

  • COMPILING

    • Typescript
    • Create React App
  • CLIENT

    • React
    • Glamorous
    • Socket IO
    • PWA
  • SERVER

    • NodeJS
    • RxJS
    • Socket IO
  • EXTERNAL

    • Telegram