DopeShoe | Shoes E-commerce

DopeShoe Live Preview

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

Testing the App

If you want to test the app, you can access the live preview and try out the features. To complete a test purchase, you can use the following test card details:

• Card Number: 4242 4242 4242 4242
• Expiration Date: 12/30
• CVC: 123

Please note that these are test card details and should only be used for testing purposes. Do not use real credit card information when testing the app. If you encounter any issues while testing, please let me know by opening an issue on this repository.

Main Goals

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

App Goals

• Allow customers to purchase shoes
• Provide a shopping cart feature
• Display customer orders

Technologies

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

ToDo Process

• Create a responsive layout
• Implement a search bar to search for shoes
• Add filters (e.g. lower prices, higher prices, new items)
• Retrieve products from Hygraph
• "Product" page (product details, buy button, add to cart)
• Provide a shopping cart
• Set up Next Auth
• Login with google
• Set up Stripe integration
• Validate products during checkout
• Complete Stripe checkout process
• Configure Stripe Webhooks
• Save customer orders to Hygraph
• Create a profile page

Layout Images

Home Page

Product Page