Full Stack
Oylkka - E-Commerce Platform
Oylkka started as a learning project and turned into a real, deployed e-commerce store. I built the entire stack: Next.js for SSR and routing, Prisma with MongoDB for the database, NextAuth.js for login with Google/GitHub, and Stripe for payments. The admin panel lets the store owner manage products, view orders, and update inventory without touching code. The hardest part was getting the cart state to sync correctly between the server and client during checkout.
Project Goals
- Let customers browse products, add to cart, and checkout with Stripe without creating an account.
- Give the store owner a dashboard to manage products, orders, and inventory in real time.
- Keep the cart in sync across tabs using server-side session storage.
- Handle image uploads and optimization automatically on the server.
My Process
I started with the database schema in Prisma, then built the API routes one by one — products, cart, orders. The frontend came last, using TanStack Query for data fetching and caching. I deployed on Vercel with a MongoDB Atlas cluster. Most of the bugs were around race conditions in the cart when two browser tabs were open simultaneously.
Challenges & Solutions
Challenge:
Prisma's `include` eager loading was killing page load times at 500+ products — initial loads took over 3 seconds.
Solution:
Switched to Prisma `select` with manual joins and added database indexes on frequently queried fields — cut page load from 3.2s to 400ms.
Challenge:
Cart state desynced between server and client during concurrent checkouts, causing double charges.
Solution:
Implemented optimistic locking on the cart with a version field, and added a mutex lock on the checkout route to prevent concurrent processing.
Challenge:
Image uploads were sluggish because I was processing full-resolution photos in the API route.
Solution:
Moved image processing to a separate background job using Sharp, with automatic WebP conversion and responsive sizing on upload.
Key Learnings
- Prisma's default eager loading is a trap at scale — always profile with `.$queryRaw` to see the actual SQL.
- Optimistic locking is simpler than you think and prevents most race conditions in e-commerce.
- Server-side cart management is more reliable than client-side state for multi-tab scenarios.
Gallery
