👟 VessiMock

This is a headless e-commerce application built with Next.js, leveraging WordPress and WooCommerce as the backend. Using Stripe as pyament system

🚙 Live Version 📔Figma Design File

📑 Table of Content

• 👟 VessiMock
  • 📑 Table of Content
  • 🌟 Features
  • 🧱 Dependencies
  • 🚀 Getting Started
  • 📘 Acknowledgements
  • 🔨 Created By

📷 Thumbnails

Landing Page

Blogs Page

Shop Page

Product Page

Cart Page

Checkout Page

🌟 Features

• Headless CMS: Utilizes WordPress and WooCommerce as a backend to manage content and products.
• Next.js Framework: Provides server-side rendering and static site generation.
• Stripe Integration: Secure payment processing through Stripe.
• WordPress + WooCommerce CMS Integration: Manage products and blogs content.
• GraphQL API: Efficient data fetching with Apollo Client.
• Newsletter Subscribe: User can subscribe to newsletter
• Ecommerce: Shop -> Product Page -> Cart -> Checkout -> Payment

🧱 Dependencies

Core

• next: ^14.2.5
• react: ^18
• react-dom: ^18

State Management and Data Fetching

• @apollo/client: ^3.11.4
• @apollo/experimental-nextjs-app-support: ^0.11.2
• graphql: ^15.9.0
• react-query: ^3.39.3

Payment Integration

• @stripe/react-stripe-js: ^2.8.0
• @stripe/stripe-js: ^4.4.0
• stripe: ^16.10.0

Styling

• tailwindcss: ^3.4.1

Utilities

• axios: ^1.7.4
• @svgr/webpack: ^8.1.0

🚀 Getting Started

1. Clone the Repository

   ```bash git clone https://github.com/your-username/your-repo.git cd your-repo

2. Install all the depndencies
   npm install

3. Create local.env

    CONSUMER_KEY=
    CONSUMER_SECRET=
    NEXT_PUBLIC_WORDPRESS_API_URL=
    NEXT_PUBLIC_NEWSLETTER_KEY=
    NEXT_PUBLIC_NEWSLETTER_SECRET=
    STRIPE_SECRET_KEY=
    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
    STRIPE_WEBHOOK_SECRET=
   

4. NEXT_PUBLIC_WORDPRESS_API_URL is the wordpress url, for example. 'https://navajowhite-yak-294103.hostingersite.com'

5. Navigate to WordPress WooCommerce -> Settings -> Advanced -> REST API -> Add Key

6. Once key generated update the CONSUMER_KEY and CONSUMER_SECRET

7. Setup Stripe testing account

8. Stripe Dashboard -> Overview; will have the STRIPE_SECRET_KEY and NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY

9. On Stripe Dashboard -> Webhooks; will have Signing Secret, use that to update STRIPE_WEBHOOK_SECRET

10. On WordPress Admin Dashboard -> Install Plugin Newsletter -> Newsletter install Addons Manager -> Install Newsletter API

11. Newsletter -> API -> Create New Key -> Permission Read / Write -> will generate NEWSLETTER_KEY and NEWSLETTER_SECRET

12. Run the server

    npm run dev
    

📘 Acknowledgements

• Next.js
• WordPress
• WooCommerce
• Stripe
• Tailwind CSS
• Apollo Client
• React Query

🔨 Created By

• Jordan Wang @jordanwang199507

  ALL CONTENT AND ASSET FROM VESSI, PURELY FOR LEARNING PURPOSE