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 chessboard that works across all devices, and 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 up to large sizes for larger products and posters.
- Shade the moves based on the two colours provided for white and black, and the number 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 the games.
- Dashboard for managing 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!
Website Performance
The speed of a website is extremely important with website users being more and more impatient. Check out the audit results. Performance snap 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 up to 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.
