About the project

The main goal with this project was to release a full-stack application focusing in applying a solid development workflow, consistent code quality, a good organization and also learning new things along the way.

In this project I tried for the fist time GitHub Projects with Automated Kanban, and I gotta say that the experience was incredible. Usually my personal projects development process turns out to be really chaotic, and by adopting this tool, the development workflow became way cleaner and faster.

Another crucial mechanism that I adopted for the first time on this project was having three separate environments: development, test and production. This was easily achivable by pushing code to distinct git branches and turning on auto deploy on Netlify and Heroku.

Lastly, this was the first project that I implemented a JWT authentication. I did the token's creation from the ground up via PHP, and, to handle it on the front-end I used a third party package. I gotta admit that the token implementation on the back-end may need some security improvements, but, for now is enough.

You can find more detailed info about the project in the next sections.

Live demo

Features

The main functionality of this application is the possibility of users suggesting a game to be listed on the website through a form, without any kind of login or authentication. However, the games sent by users will remain hidden up to the point an admin reviews and approves it.

In a more detailed way, the following are the core features of PlanetGame:

• Game genres listing
• Game publishers listing
• Games listing
• Publisher details
• Game details
• Game suggesting (new game)
• Admin login
• Game approval
• Game denial (delete)

Front-end

The client-side of PlanetGame was built with React library. The key technical points to be noted throughout development of the front-end was the use of custom hooks and a clean component organization.

The main and secondary pages are presented with random banners to maintain a refreshing experience for the user. As this process envolved a few heavy images to be loaded, I converted those banners from .png to .webp to improve website performance. The results was incredible: I measured the first paint of home page before and after the conversion: the loading time decreased from 1.4 seconds to 0.7 seconds.

To improve the user experience, in the sections where data is fetched asynchronously from the back-end, Skeletons from MUI package was used as a placeholder until the data is completely loaded.

The UI, being entirely responsive was developed from the ground up using HTML and CSS. Talking about responsiveness, a hamburger menu was also developed from scratch, only using AOS and hamburger-react libraries for its animations.

Layout

Mobile

Desktop

Technologies

The following technologies were used to build PlanetGame front-end:

• @mui/material
• @date-io/date-fns
• aos
• axios
• disable-scroll
• hamburger-react
• jwt-decode
• react-helmet
• react-router-dom

Back-end

PlanetGame's back-end was developed with vanilla PHP, behaving as an API: by expecting requests and returning JSON responses.

The routing system of this app was developed from scratch, providing a reliable and consistent communication between front and back end.Another interesting feature that was developed from scratch was the error logging system in pair with custom Exception classes.

Lastly, an additional noteworthy point is the back-end was consistently backed by unit tests, to maintain a solid code quality throughout the entire development timespan.

Technologies

The following technologies were used to build PlanetGame back-end:

• mpratt/relativetime - For converting dates to sentences like "1 year ago"
• mofodojodino/profanity-filter - For filtering out bad words from forms
• phpunit/phpunit

Database

PlanetGame's database of choice was MySql. Check out a brief description of the tables:

• tb_admin: stores admins;
• tb_game: store games. It is related to genres and publisher;
• tb_genre: store game genres;
• tb_publisher: stores game publishers

How to set up

If you wish to fork this project you'll need to set up the following environment variables:

Client-side:

• REACT_APP_API_URL (Server URL in order to send requests)
• REACT_APP_PUBLIC_URL (Front-end URL)

Server-side:

• ADMIN_SALT (Salt for managing admin's passwords)
• CLEARDB_DATABASE_URL (URL for database connection)
• CLIENT_URL (Front-end url for CORS purposes)
• JWT_TOKEN_KEY (JWT secret for managing tokens)

Inspirations

PlanetGame was inspired by the following projects on Figma:

• GWP TeamFight Tactics (inspired PlanetGame color scheme)
• LOL - 404 page for Weekly Warm-Up (inspired PlanetGame UI)