visit web app

visit Github

A place where people can create, comment or read guides about teamfight tactics

letter-gg web app

what is this

Letter-gg was built for people that played teamfight tactics. Once an account is created you can make guides, like guides, and comment on guides.

I spent a lot of time designing a platform where it is easy to create guides and look at specific guides for a certain character in the game.

how to use

If you don’t want to make an account you can use this one


HTML CSS JavaScript React Firebase Firestore Firebase hosting Git Figma

challenges and knowledge acquired


Using firebase is like having a dedicated backend development team. There are some limits and the learning curve starts easy but when you are trying to create something complex the limits will make you have to create hacks to make it work.

Overall I would use firebase when I am creating something small that requires a database.

There isn’t a unique field in firestore

Firestore does not have a unique field. This was an issue when trying to create unique usernames.

To solve this issue I had to create a collection with the id of each doc being the username that was being created. Every attempt to create a user this collection had to be queried by ID to see if the username was already created. If the username wasn’t found in the collection it would create a new document with that username. If it was found a message will be sent to the user that the username is already taken.

I research about logo designed and learned that logos should be an identifier and doesn’t have to mean anything It just needs to be identifiable.

Knowing that logos should be unique I decided to use circles and move them around until I couldn’t identify it with something. For the final design overlapped two circles and it made an arc that I liked. :)

letter-gg logo designs

link to pdf of logo designs


A mobile-first approach was taken when designing because It will guarantee that all screens will be supported

letter-gg website design

link to figma of the full design