Hey everyone! 👋
Over the last 7 months, I’ve been working on a personal project: a fully open-source, privacy-first Chess Diagram Generator called Chess Viewer.
Usually, when developers build chess apps, they rely on heavy libraries like chess.js or react-chessboard. I wanted to challenge myself. So, I built the entire board, FEN (Forsyth-Edwards Notation) parsing, and piece rendering logic completely from scratch using React and Raw SVG.
It mathematically calculates where each SVG piece should go, supports advanced FEN previews, and exports high-quality diagrams.
Tech Stack: React, TypeScript, Vite, PWA.
🔗 Live Demo: https://chessvision.org
💻 GitHub Repo: https://github.com/chessviewer-org/chess-viewer
🔥 Roast My Code! (I need your feedback)
I'm 17 years old and mostly self-taught. Since I built the entire architecture and SVG logic myself without tutorials, I’m 100% sure there are better ways to handle some of the state management and re-renders.
I would absolutely love it if some experienced React developers could check out the repo and roast my code. Tell me what I did wrong or how I can optimize it!
🛠️ Want to contribute? (Good First Issues)
I want to make this a community-driven tool. I've set up several beginner-friendly issues in the repo if you want to make your first open-source contribution or just practice your React skills.
We currently need help with bugs like:
- #186 - Piece entrance animation replays on back-navigation
- #187 - Export file size estimate does not match actual exported file
Just look for the good first issue or help wanted tags in the repo!
Any feedback, Pull Requests, or stars ⭐ would mean the world to me. Thanks for reading!
Top comments (0)