Back to the App# Implementation Notes
Tech Stack and Best Practices
- ✅Used Dynamic store layout and walkable area with shelf placement
- ✅Base a11y practices followed (since app might be used by disabled people) tested with voice over :)
- ✅Used React 19 and Next.js 16+
- ✅tailwindcss for utility-first CSS styling
- ✅three.js and @react-three/fiber for 3D rendering
- ✅A* pathfinding algorithm for shortest path calculation
- ✅Held-Karp algorithm for optimal TSP route calculation
- ✅zod and nuqs for Typesafe state management (no useState in entire app)
- ✅Used motion to animate show/hide items
- ✅Architectured for scalability and maintainability
- ✅React Server Components where applicable
- ✅Donut pattern for client in server components
- ✅Tested rendering with heavy products list. app/page.tsx
- ✅Used jest and react-testing-library for unit and integration tests
- ✅Used and added playwright tests for basic e2e testing (Results: https://ah.sayjeyhi.com/e2e/)
AI Usage
- ✅Used cursor (Composer Model) to implement 3D models and store assets
- ✅Get cursor (Composer Model) assist to write e2e and unit tests
- ✅Used Chat-GPT to get help on fixing some bugs and optimizing code
- ✅The algorithm for pathfinding was inspired by chat gpt suggestions and improved upon using cursor
Can Be Also Done...
- ⬜️Load Products from external source
- ⬜️Add more unit and integration tests
- ⬜️Improve e2e tests to get cleaner and cover more user paths
- ⬜️Confirm delete all products action
- ⬜️Implement more a11y features and become WCAG compliant
- ⬜️Improve skeletons for page load
- ⬜️Optimize 3D store appearance
- ⬜️Improve pathfinding algorithm for more products
- ⬜️Add i18n support, dutch, etc.
- ⬜️Support dark mode
Back to the App 