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!