Web App

ShopFlow E-Commerce

A full-featured e-commerce platform built for scale

Next.jsTypeScriptPrismaStripePostgreSQLTailwind CSS

View Live Site

Role

Full-Stack Developer

Timeline

3 months

Client

ShopFlow Inc.

Live URL

Visit Site

01 —

The Challenge

The client needed a modern e-commerce platform that could handle 10,000+ concurrent users with real-time inventory management, seamless checkout, and an admin dashboard for order management.

02 —

The Solution

Built a Next.js application with server-side rendering for product pages, implemented Stripe for payments with webhook handling, used Prisma ORM with PostgreSQL for data layer, and added real-time inventory updates via WebSocket connections.

03 —

The Results

40%

Faster Load Time

Conversion Rate

99.9%

Uptime

04 —

Code Highlights

Key implementation details and code snippets that powered this project.

api/payment/webhook.ts

 1
import { NextApiRequest, NextApiResponse } from 'next';
 2
import Stripe from 'stripe';
 3
import { prisma } from '@/lib/prisma';
 4
 
 5
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
 6
 
 7
export default async function handler(
 8
  req: NextApiRequest,
 9
  res: NextApiResponse
10
) {
11
  const sig = req.headers['stripe-signature']!;
12
  let event: Stripe.Event;
13
 
14
  try {
15
    event = stripe.webhooks.constructEvent(
16
      req.body,
17
      sig,
18
      process.env.STRIPE_WEBHOOK_SECRET!
19
    );
20
  } catch (err) {
21
    return res.status(400).send(`Webhook Error: ${err.message}`);
22
  }
23
 
24
  switch (event.type) {
25
    case 'checkout.session.completed':
26
      const session = event.data.object;
27
      await prisma.order.update({
28
        where: { paymentIntentId: session.payment_intent },
29
        data: { status: 'PAID' },
30
      });
31
      break;
32
    default:
33
      console.log(`Unhandled event type ${event.type}`);
34
  }
35
 
36
  res.json({ received: true });
37
}

components/ProductCard.tsx

 1
import { motion } from 'framer-motion';
 2
import Image from 'next/image';
 3
import { ShoppingCart } from 'lucide-react';
 4
 
 5
interface ProductCardProps {
 6
  product: {
 7
    id: string;
 8
    name: string;
 9
    price: number;
10
    image: string;
11
    stock: number;
12
  };
13
  onAddToCart: (productId: string) => void;
14
}
15
 
16
export default function ProductCard({ product, onAddToCart }: ProductCardProps) {
17
  return (
18
    <motion.div
19
      whileHover={{ y: -8 }}
20
      className="group relative bg-surface rounded-2xl p-4 border border-border overflow-hidden"
21
    >
22
      <div className="aspect-square relative rounded-xl overflow-hidden mb-4">
23
        <Image
24
          src={product.image}
25
          alt={product.name}
26
          fill
27
          className="object-cover group-hover:scale-110 transition-transform duration-500"
28
        />
29
      </div>
30
      <h3 className="font-syne font-bold text-lg mb-2">{product.name}</h3>
31
      <div className="flex items-center justify-between">
32
        <span className="text-primary font-bold text-xl">
33
          ${product.price.toFixed(2)}
34
        </span>
35
        <button
36
          onClick={() => onAddToCart(product.id)}
37
          className="btn-primary py-2 px-4 rounded-lg flex items-center gap-2"
38
          disabled={product.stock === 0}
39
        >
40
          <ShoppingCart className="w-4 h-4" />
41
          Add to Cart
42
        </button>
43
      </div>
44
      {product.stock < 10 && product.stock > 0 && (
45
        <p className="text-accent text-sm mt-2">
46
          Only {product.stock} left in stock!
47
        </p>
48
      )}
49
    </motion.div>
50
  );
51
}

05 —

Project Gallery

Previous Project

Saas Landing Pro

Next Project

Startup Launch Kit

Want Similar Results?

Let's discuss your project and build something that delivers real business impact.

Start a Project

Loading...

Preparing your experience

Optimizing performance...

import { NextApiRequest, NextApiResponse } from 'next';

import Stripe from 'stripe';

import { prisma } from '@/lib/prisma';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export default async function handler(

req: NextApiRequest,

res: NextApiResponse

) {

const sig = req.headers['stripe-signature']!;

let event: Stripe.Event;

try {

event = stripe.webhooks.constructEvent(

req.body,

sig,

process.env.STRIPE_WEBHOOK_SECRET!

);

} catch (err) {

return res.status(400).send(`Webhook Error: ${err.message}`);

}

switch (event.type) {

case 'checkout.session.completed':

const session = event.data.object;

await prisma.order.update({

where: { paymentIntentId: session.payment_intent },

data: { status: 'PAID' },

});

break;

default:

console.log(`Unhandled event type ${event.type}`);

}

res.json({ received: true });

}

import { motion } from 'framer-motion';

import Image from 'next/image';

import { ShoppingCart } from 'lucide-react';

interface ProductCardProps {

product: {

id: string;

name: string;

price: number;

image: string;

stock: number;

};

onAddToCart: (productId: string) => void;

}

export default function ProductCard({ product, onAddToCart }: ProductCardProps) {

return (

<motion.div

whileHover={{ y: -8 }}

className="group relative bg-surface rounded-2xl p-4 border border-border overflow-hidden"

>

<div className="aspect-square relative rounded-xl overflow-hidden mb-4">

<Image

src={product.image}

alt={product.name}

fill

className="object-cover group-hover:scale-110 transition-transform duration-500"

/>

</div>

<h3 className="font-syne font-bold text-lg mb-2">{product.name}</h3>

<div className="flex items-center justify-between">

<span className="text-primary font-bold text-xl">

${product.price.toFixed(2)}

</span>

<button

onClick={() => onAddToCart(product.id)}

className="btn-primary py-2 px-4 rounded-lg flex items-center gap-2"

disabled={product.stock === 0}

>

<ShoppingCart className="w-4 h-4" />

Add to Cart

</button>

</div>

{product.stock < 10 && product.stock > 0 && (

<p className="text-accent text-sm mt-2">

Only {product.stock} left in stock!

</p>

)}

</motion.div>

);

}