A comprehensive web application for visualizing and comparing bicycle geometry parameters. This tool helps cyclists understand how different geometry parameters affect bike fit, handling, and rider position.
- Rendering of bicycle geometry using D3.js
- Side-by-side comparison between two bike configurations
- Toggle visibility of main bike and shadow bike for focused comparison
- Riding position angle calculation and comparison
- Standover height analysis with rider inseam comparison
- Ground pedal clearance measurements
- Toe overlap clearance calculations
- Trail measurements for handling characteristics
- Seatpost length requirements
- Pre-built bike presets for quick comparison
- Form validation with helpful warnings and constraints
- Responsive design that works on desktop and mobile
- Real-time updates as parameters are modified
- Side-by-side measurements table showing deltas and status indicators
- Frontend: Next.js 15 with React 19
- Styling: Tailwind CSS 4
- State Management: Redux Toolkit
- Visualization: D3.js
- Forms: React Hook Form with Zod validation
- Type Safety: TypeScript throughout
- Testing: Jest with React Testing Library
- Node.js 22+
- pnpm
- Clone the repository:
git clone <repository-url>
cd atb- Install dependencies:
cd ui
pnpm i- Start the development server:
pnpm run dev- Open https://localhost:3000 in your browser
pnpm run testThis project is licensed under the MIT License.
Ad Astra ✨