A modern, PWA-enabled running shoe tracking application built with React 19, TanStack Start, and the React Compiler RC. Track your running shoes, log your runs, and gain insights into your running performance with comprehensive analytics.
- Shoe Management: Add, edit, and track multiple pairs of running shoes
- Run Logging: Record runs with distance, duration, pace, and notes
- Mileage Tracking: Automatic mileage accumulation per shoe
- Collections: Organize shoes into custom collections
- Analytics: Comprehensive insights and performance tracking
- React 19 with latest features and performance improvements
- React Compiler RC for automatic memoization and optimizations
- TanStack Start for full-stack React framework
- TypeScript for type safety
- Convex for real-time backend and database
- Tailwind CSS for styling
- Motion for smooth animations
- Offline Support: Works without internet connection
- Install Prompt: Add to home screen on mobile devices
- iOS Enhancements: Native-like experience on iOS
- Push Notifications: Stay updated with your running goals
- Background Sync: Sync data when connection is restored
- Mobile-First Design: Optimized for mobile usage
- Dark Mode Support: Automatic theme switching
- Responsive Layout: Works on all screen sizes
- First-Visit Animations: Engaging onboarding experience
- Loading States: Smooth loading experiences
- Node.js 18+
- pnpm (recommended) or npm
- Git
-
Clone the repository
git clone <repository-url> cd shoes-final
-
Install dependencies
pnpm install
-
Set up environment variables
cp .env.example .env.local
Add your Convex deployment URL and other required environment variables.
-
Set up Convex backend
npx convex dev
-
Start the development server
pnpm dev
-
Open your browser Navigate to
http://localhost:3000
pnpm dev- Start development server with Convexpnpm build- Build for productionpnpm start- Start production serverpnpm pwa:check- Run PWA auditpnpm audit:animations- Audit animation performance
src/
├── components/ # React components
│ ├── analytics/ # Analytics dashboards
│ ├── loading/ # Loading states
│ ├── navigation/ # Navigation components
│ └── ui/ # UI components
├── hooks/ # Custom React hooks
├── routes/ # TanStack Router routes
├── services/ # API and service layers
├── styles/ # Global styles
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
convex/ # Convex backend
├── schema.ts # Database schema
├── shoes.ts # Shoe-related functions
└── auth.ts # Authentication logic
The project uses React Compiler RC for automatic optimizations:
// vite.config.ts
react({
babel: {
plugins: [["babel-plugin-react-compiler", {}]],
},
})PWA features are configured in vite.config.ts with VitePWA:
VitePWA({
registerType: "autoUpdate",
workbox: {
globPatterns: ["**/*.{js,css,html,ico,png,svg,woff2}"],
// ... more config
}
})The app can be installed on mobile devices and desktops:
- Mobile: "Add to Home Screen" prompt
- Desktop: Install button in browser
- Cached resources for offline usage
- Background sync when connection returns
- Offline indicator in UI
- Status bar styling
- Safe area handling
- Native-like interactions
- Haptic feedback
- Navigate to "Shoes" tab
- Click "Add New Shoe"
- Fill in shoe details (brand, model, purchase date, etc.)
- Optionally add to a collection
- Save to start tracking
- Go to "Runs" tab
- Click "Log New Run"
- Select the shoes used
- Enter run details (distance, time, etc.)
- Add notes if desired
- Save to update shoe mileage
- Access "Analytics" tab
- View running statistics
- See shoe performance data
- Track progress over time
The app uses Convex Auth for authentication:
- Email/password sign-up and sign-in
- Secure session management
- Protected routes
- User data isolation
pnpm build- Connect your GitHub repository to Vercel
- Set environment variables in Vercel dashboard
- Deploy automatically on push to main branch
- Build the project:
pnpm build - Deploy the
.output/publicdirectory - Configure environment variables
pnpm pwa:checkpnpm audit:animations- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow TypeScript best practices
- Use React Compiler-friendly patterns
- Write mobile-first responsive code
- Include appropriate loading states
- Test PWA functionality
- Automatic memoization reduces re-renders
- Improved component performance
- Better memory usage
- Optimized bundle size
- Fast loading with service worker caching
- Offline functionality
- Smooth animations with Motion
- Optimized images and assets
React Compiler Errors
- Ensure code follows Rules of React
- Check for proper dependency arrays in hooks
- Avoid breaking React patterns
PWA Not Installing
- Check manifest.json is accessible
- Ensure HTTPS in production
- Verify service worker registration
Convex Connection Issues
- Check environment variables
- Ensure Convex deployment is active
- Verify network connectivity
This project is licensed under the MIT License - see the LICENSE file for details.
- React Team for React 19 and React Compiler
- TanStack for the amazing router and start framework
- Convex for the real-time backend
- Tailwind CSS for the utility-first CSS framework
- Motion for smooth animations
If you have any questions or need help:
- Open an issue on GitHub
- Check the documentation
- Review the troubleshooting section
Built with ❤️ for runners who love their shoes!