Atomic-Shop

📚 Project Description

The project involves a marketplace application that utilizes the Stripe API for product registration and checkout purposes. This enables us to simulate the user experience, starting from the catalog page and concluding with the redirection to the success page after the checkout process is completed. To accomplish this, a new API has been developed within the application to furnish Stripe with the requisite checkout details and facilitate dynamic redirection to the success page. The application includes the following features.

Viewing products from the Home page.
Accessing company details through the About Us route.
Exploring selected product details, including the option to choose size and quantity for adding items to the shopping cart.
Providing personal information to finalize the purchase.
User is redirected to the Stripe checkout page.
Upon completing the checkout process, the user is dynamically redirected to a success page.

📌 What did I learn?

This was my first project in Next.js, and it provided me with the opportunity to utilize FileSystem Routing for generating new routes within the application. Additionally, I employed the Stitches style library, which offers support for server-side rendering and pre-bundling capabilities.

I gained knowledge on how to handle the getServerSideProps and getStaticProps functions to fetch data from the server and pass it as props to the rendered components.

export const getStaticProps: GetStaticProps<any, { id: string }> = async ({
  params,
}) => {
  const productId = params!.id

  const product = await stripe.products.retrieve(productId, {
    expand: ['default_price'],
  })
  const price = product.default_price as Stripe.Price
  return {
    props: {
      id: product.id,
      name: product.name,
      imageUrl: product.images[0],
      price: new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
      }).format(price.unit_amount! / 100),
      description: product.description,
      defaultPriceId: price.id,
    },
    revalidate: 60 * 60 * 1, // 1 hours
  }
}

I also developed a custom API to supply Stripe with the necessary purchase information for checkout and dynamically redirect the user to the checkout page upon completing the purchase.

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const successUrl = `${process.env.NEXT_URL}/success?session_id={CHECKOUT_SESSION_ID}`
  const cancelUrl = process.env.NEXT_URL

  const { lineItems } = req.body

  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed.' })
  }

  if (!lineItems) {
    return res.status(400).json({ error: 'Item not found.' })
  }

  const checkoutSession = await stripe.checkout.sessions.create({
    success_url: successUrl,
    cancel_url: cancelUrl,
    mode: 'payment',
    line_items: lineItems,
  })

Furthermore, I familiarized myself with the new Image and Link components provided by Next.js, which significantly contribute to the application's performance. I also practiced utilizing hooks like useDebounce and useMemo to enhance performance. Additionally, I created a custom useLocation hook utilizing the Geolocation API. Finally, I used keen-slider library to craft an interactive carousel that showcases products from the catalog.

🔍 Links

Preview Site

💻 My Process

Built with:

ℹ️ How to run the application?

Clone the repository:

git clone https://github.com/maricastroc/github-blog

Install the dependencies:

npm install

Start the service:

npm run dev

⏩ Access http://localhost:3000 to view the web application.

maricastroc / atomic-shop