Apple Store – NEXTJS + JWT + STRIPE

---

Overview

Embark on a journey through a cutting-edge full-stack web application, meticulously crafted with Nextjs 13.5.5 and TypeScript, featuring robust JWT authentication and seamless Stripe payment processing.

Links

• Live Site: Experience the live website.
• Project Overview Video: Delve into the project overview video (5 mins).
• Github Repo: Explore the GitHub repository for this project.

Preview

---

---

---

How to run

Follow these steps to run the project:

1. Clone the project from the GitHub repo.
2. Run yarn install to install all the dependencies.
3. Run yarn prisma migrate dev --name init to migrate the database (ensure Postgres is installed).
4. Run yarn run dev to start the project.

My Process

In building this application, I opted for RTK Query data fetching in the authentication process. Departing from the conventional jsonwebtoken, I embraced the jose package for JWT authentication. This alternative not only adheres to JWT authentication principles but also offers additional features for enhanced functionality.

Webhooks seamlessly handle Stripe test payment processing, simplifying configuration while providing extensive features.

For a comprehensive understanding of the system, watch this 5-minute video overview.

Built With

• React: JS library
• Next.js 13.5.5: React framework
• TypeScript: JS Superset
• axios: Promise-based HTTP client
• TailwindCSS: CSS framework
• Shadcn-ui: UI Component library
• React-hook-form: Forms
• React-redux: State Management
• RTK-query: Data Fetching
• Zod: Data Validation
• Prisma: ORM
• PostgreSQL: Database
• Stripe: Payment Processing
• Vercel: Hosting
• Jose: JWT Authentication
• Bcryptjs: Password Hashing
• EsLint: Linter

Features

Users can:

• Enjoy a beautiful, animated, and responsive landing page
• Login and register using their name, email, and password
• Select desired products from the provided listings
• Adjust the quantity of selected products in the cart
• Make secure payments using the Stripe payment gateway

Embark on a seamless journey of user-friendly interactions with NEXTJS + JWT + STRIPE!