Forever Chess Games
Custom application which allows users to generate designs and products from a list of chess moves (PGN.) The design is fully customisable and products are automatically generated based on user design.
Wow, this was a really fun project! There were lots of challenges in this project we had to work through to ensure that the app not only functioned great, but also performed.
A few of the challenges:
- Parse a PGN. This is the game information from a chess game.
- Create a fully responsive chess board that works across all devices, which can be customised.
- Map the moves from the parsed PGN onto the Chess Board.
- Generate SVGs for all of the moves, sequentially placing them on top of each other. SVG was an important factor as it scales upto large sizes for larger products and posters.
- Shade the moves based on the two colours provided for white and black, and the amount of moves in the game.
- Make everything customisable.
- Generate an image from the user generated content on the website.
- Integrate Custom E-Commerce flow to purchase an image.
- Integrate dynamic product generation with Zazzle based on user designs that are created.
- Allow users to save and come back to edit games, along with sharing of the games.
- Dashboard for managing the Famous games and templated designs.
- Do all of this on the website, while maintaining excellent performance.
As you can see the project had lots of complications, and we will be doing blog post write ups for a lot of these challenges. Some of the solutions we came up with are really interesting.
I would recommend you go and check out the website for yourself, we're really proud of it!
The speed of a website is extremely important with website users being more and more impatient. Check out the audit results.
This is on the Home page of the website, which is loading a large image at the top, and 10 large images beneath. All images are served in the most upto date formats and correctly optimised across the whole website.
The lighthouse audit is a great indication, but more importantly is how a website performs with real users. You can see here with over 4000 visitors, the performance of the website was excellent.