designing and creating beautiful experiences

or

my projects

Traducila.it

Traducila.it

Sito di traduzione canzoni dall'inglese all'italiano

This is my most recent project, as well as the most polished of all my works, both graphically and functionally speaking. After creating more than 10 different designs for this website, I choose what you can now see by clicking te link below (or, well, what you see in the screenshot). On the frontend you can find a combination of Next.js and Typescript, two very useful tools for every frontend dev which I use everyday. Next.js is particularly important: thanks to its server side rendering feature, it can be possible to achieve the best possible results SEO wise, which was a very important goal I was aiming for. For the backend, I opted for Strapi, an headless CMS that I used in the past. Thanks to it, I was able to create a database where I could store all the data needed for the project (songs, translations, relations between authors, albums and songs and MUCH more), as well as post templates which make the creation of new posts easy fro the translator. I was also able to create some custom functions in Node.js; for example I implemented an API call to register user views on each page of the website. Thanks to this last feature, it was possible to create charts and lists based on user preferences. The website is almost complete, but before publishing it I need to work on some content for the about us and some other songs.

Technologies used: HTML, SASS, Typescript, React, NextJS, Strapi CMS, Restful API, GIT, Figma, Netlify, Railway (to host Strapi CMS)

Features: CMS set up to easily create new posts, searchbar with hints based on user input, lists and charts based on user views and on post publishing date, pages and subpages on authors and songs, linked between them with relations, responsive design

Pomodoro Timer

Pomodoro Timer

A tool to help you stay focused

This website is one of my first more “complex” works, which didn’t take me too long to realize, but that thought me a lot. Object oriented programming, ES6 syntax and modules are some of the most important concepts I discovered during this project, but I also learnt how to modify the color theme of a website on user click or preference, how to add interactive elements such as music on click and how to use localstorage. Other than that, I also improved my knowledge on version control tools, GIT in this case, and I also published the website on Netlify. During this project I also had the opportunity to practice with localization, in fact the website supports both English and Italian, feature that I implemented with a simple JSON file which contained the correct version for each language. I think this project made me aware of the multitude of problems a developer must face and overcome in order to achieve its end goal, and it ultimately made me realize that researching and developing solutions is one of my favourite parts of this job.

Technologies used: HTML, CSS, JavaScript, GIT, Netlify

Features: ES6 syntax, JS classes, modules, timers, audio toggle, multiple languages, music on click, five different themes.

BookManager

Book Manager

A book manager website, to help you keep track of your reading habits

For this project, I designed and built a CRUD app to manage the user’s book preferences. I used React and Typescript as the main front-end technologies of the website, while for the backend part I choose Firebase, a great tool that I used to implement both Google Login and the user database. The website also works without logging in, although the preferences are only saved in localStorage; instead, while logging in, the user saves his preferences in the database I created. The user can perfectly manage each one of the three lists I implemented, adding and removing whatever book they want. I used Google Books API to get the fetched data for my site, and this part really helped me strengthen my knowledge on Rest APIs. For the multi-lingual feature of this site, I decided to opt for a more professional tool instead of the JSON file I used in the previous project: i18n. Overall, I think this project has thought me a lot, especially in terms of React, Typescript, Firebase and Restful APIs, technologies which I can now use rather effortlessly.

Technologies used: HTML, SASS, Typescript, React, Firebase, Rest APIs, i18n, Context API, React Router, GIT, Netlify

Features: Google login, Firestore database to store user data, multiple languages, guest mode to use the website without logging in, three lists to save books

Le Chicche di Girotondo

Le Chicche di Girotondo

Kids store website

In this third project, I developed a fully functional kids store spotlight website for a client. Other than the usual technologies, I used the NextJS and Strapi. I decided to use NextJS because I thought a website like this would have been a great use case for Static Site Generation, instead of the Client Side Rendering approach I used for the other two sites, and this for two reasons: the first one is that I wanted a fast website, and NextJS was able to accomplish this, thanks to it’s built in features, like generating HTML only at build time and reusing it at each request (good for SEO too) and Images Optimization. The second reason is that a website like this needed to be as SEO friendly as possible, and so Client Side Rendering was not an option. Another tool I opted for is Strapi, which I useds to create a CMS interface for the site admin to add new content. The admin, in fact, can add whatever product he wants, as it is an extremely user friendly and efficient platform. I also implemented Google Analytics, and for this reason I also needed to add a cookie consent banner to make the product GDPR compliant. The website, apart from some minor graphic details, is ready, but will officially launch in 2023 as requested by the client.

Technologies used: HTML, SASS, Typescript, React, NextJS, Strapi headless CMS, GraphQL, GIT, AOS, Google Analytics, Figma, Netlify, Heroku (for the admin website)

Features: CMS for admin user, products catalogue, contact form, on scroll animations, search and filter bar, responsive design, Cookie banner

My Skills

Rest API

MongoDB

Typescript

NextJS

GIT

Sass

Firebase

React

Strapi

Figma

Photoshop

i18n

MaterialUI

Bootstrap

GraphQL

About Me

Who am I?

Hello! My name is Giovanni Beccaro and I enjoy building things on the internet. I started surfing the world wide web at 12, and since then my interest in this world never ceased to increase, culminating with me learning the basics of web development some years later. Flash forward to today, I built many websites and tools both for personal use and for clients. I like experimenting with different technologies and I always want to learn new things that could make my projects better, and I think this desire of learning new stuff is one of my biggest strengths. Other nice things I could say about me? I'm a fast learner, I try to improve and be the best at everything I'm passionate of (yeah, web development is one of these things), and I enjoy facing new challenges everyday.

How do I work?

When I code, what I usually do is setup a neat andorganized work environment, so that I can keep control overeverything I do. I always try to mantain my code clean and readable, using common conventions and comments. I can buildstatic pages, server and client side rendered websites andstaticly generated sites thanks to technologies I have learnt, such as NextJS. I also have some knowledge of backend services, namely Firebase and Strapi, and the websites I create are always functionally and aestethically polished. I like to design a website with Figma and then translate it into code with VSCode. A responsive design is always implemented in my works. I also have solid SEO knowledges, particularly concerning the front end world (semantic HTML, accessibility, SSR and so on).

Contact Me

Other contacts:

gio.beccaro@gmail.com giovannibeccaro Giovanni Beccaro