In this technical guide, I'll share how I built a modern E-Scooter comparison platform using Next.js 14, TypeScript, and Prisma ORM. The live platform is running at akku-alle.de - a German E-Scooter comparison site.
The Tech Stack
Our stack includes:
- Next.js 14 with App Router
- TypeScript for type safety
- Prisma ORM with PostgreSQL
- Tailwind CSS for styling
- AI Integration for personalized recommendations
Key Features
1. Dynamic Product Pages
Each E-Scooter gets a SEO-optimized detail page with specs, pricing from Amazon PA-API, and our custom "AkkuAlle-Score" rating system.
// Fetching scooter data
const scooter = await prisma.scooter.findUnique({
where: { slug: params.slug }
});
2. AI-Powered Purchase Advisor
The Kaufberatung (Purchase Advisor) uses GPT-4 to match users with their ideal scooter based on budget, range needs, and use case.
3. Range Calculator Tool
Our Reichweiten-Rechner calculates real-world range based on rider weight, terrain, and weather.
Performance Optimizations
We achieved 95+ Lighthouse scores through:
- Server-side rendering for critical pages
- Image optimization with Next.js Image component
- Database query optimization with Prisma
Lessons Learned
Building a comparison platform taught us valuable lessons about data normalization, SEO for dynamic content, and integrating third-party APIs.
Check out the live site: akku-alle.de
What tech stacks are you using for your comparison platforms? Let me know in the comments!
Top comments (0)