This project is a responsive chessboard application built with Vue 3 and SCSS, following the requirements defined in the Chess.com frontend challenge.
The goal was not only to meet the requirements, but to deliver a clean, production-ready frontend implementation with proper structure, responsiveness, and test coverage.
- ♟️ Fully responsive 8x8 chessboard
- 📱 Mobile-first layout (sidebar moves below board)
- 🖥️ Desktop layout (sidebar positioned right)
- 🎯 Square highlighting with multiple selection support
- 📝 Click log sidebar with preserved history
- 🔁 Toggle behavior:
- Click → highlight + log
- Click again → unhighlight (no log change)
- Click again → new log entry
- 📏 Board always visible with minimum 264x264
- 🧪 Unit tests using Vitest + Testing Library
- Vue 3 (Composition API)
- Vite
- SCSS (BEM methodology)
- CSS Flexbox + Grid layout
- Vitest
- @testing-library/vue
The project was tested and verified with:
v20.19.5
v22.18.0
npm install
npm run dev
npm run test:run
npm run build
The project includes unit tests covering:
- Board rendering (64 squares)
- Highlight behavior
- Log ordering
- Toggle behavior (highlight / unhighlight / re-log)
- Chessboard is generated dynamically using file/rank arrays
- Highlight state is stored separately from the log to match requirements
- Layout uses Flexbox + CSS Grid to guarantee responsiveness
- SCSS is structured using BEM methodology for maintainability and clarity
- Accessibility considered via:
- role="grid" and gridcell
- aria-pressed for interaction state
The implementation focuses on:
- clarity over over-engineering
- predictable state management
- clean component structure
- strong UX consistency across devices
Oliver Trajcheski
Senior Frontend Engineer
Vue / Nuxt / Product-focused development
oliver@akrinum.com