abhishekbhartiind / dopeshoe

E-commerce | Next.js, Typescript, graphql, urql, codegen, tailwindcss

DopeShoe | Shoes E-commerce

DopeShoe Live Preview

Created using NextJS, Typescript, Stripe, Hygraph, Tailwindcss, GraphQL (URQL), Codegen.

Main Goals

• Create an e-commerce using Stripe
  • Learn Stripe (payments)
  • Learn Hygraph
  • Learn Tailwindcss (responsive)
  • Learn Framer Motion

App Goals

• Buy shoes
• Shopping Cart
• Show customer Orders

Technologies

• Next.JS | Typescript | Stripe | Hygraph | GraphQL | Urql | Codegen | Tailwindcss | Framer Motion | Next Auth

ToDo Process

• Create Responsive Layout
• Search bar (search shoes)
• Search bar filter (lower prices, higher prices, new)
• Get products from Hygraph
• Pagination
• "Product" page (product details, buy button, add to cart)
• Show similar products (shoes)
• Shopping Cart
• Setup Next Auth
• Login with google
• Setup Stripe
• Validate products checkout
• Finish stripe checkout
• Setup Stripe Webhooks
• Save customer orders (Hygraph)
• Create Profile Page (Orders...)
• Customer Orders pagination

Layout Images

Home Page

Product Page

Shopping Cart Modal

Shopping Cart Checkout

Profile Page

Customer Orders

Mobile Layout

Home

Product Page

Profile Page