Documentation

Everything you need to know about setup, customization, and deployment

Getting Started

Welcome to Studious Waffle! This e-commerce platform is built with Next.js and designed to be fast, SEO-friendly, and easy to customize. It integrates seamlessly with Gumroad for payment processing.

Installation

Follow these steps to set up the project:

Prerequisites

Node.js 18+ installed
npm or yarn package manager
Git for version control

Setup Steps

# Clone the repository
git clone https://github.com/GeosCrypto/studious-waffle.git
cd studious-waffle

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

The site will be available at http://localhost:3000

Customization

Branding

Update your brand identity in the following files:

components/Header.js - Update logo and site name
components/Footer.js - Update footer content and links
styles/globals.css - Customize colors and fonts

Color Scheme

Edit the CSS variables in styles/globals.css:

:root {
  --primary-color: #6366f1;
  --primary-dark: #4f46e5;
  --secondary-color: #8b5cf6;
  /* ... more colors */
}

Typography

The site uses system fonts by default. To use custom fonts, add them topages/_document.js and update the font-family in globals.css.

Managing Products

Products are managed in data/products.js.

Adding a New Product

{
  id: 7,
  name: "Your Product Name",
  slug: "your-product-slug",
  description: "Short description",
  longDescription: "Detailed description...",
  price: 29.99,
  gumroadUrl: "https://gumroad.com/l/your-product",
  image: "https://example.com/image.jpg",
  category: "Your Category",
  featured: true,
  tags: ["tag1", "tag2"]
}

Product Fields

id: Unique identifier (number)
name: Product name displayed everywhere
slug: URL-friendly version (lowercase, hyphens)
description: Short description for cards
longDescription: Full product details
price: Product price in USD
gumroadUrl: Your Gumroad product link
image: Product image URL
category: Product category
featured: Show on homepage (boolean)
tags: Array of tags for filtering

Gumroad Integration

This platform uses Gumroad for payment processing. Each product links directly to your Gumroad product page.

Setup Gumroad Products

Create a Gumroad account at gumroad.com
Create products for each item in your store
Copy the product URL (e.g., https://gumroad.com/l/product-name)
Add the URL to the gumroadUrl field in your product data

Why Gumroad?

✓ Secure payment processing
✓ Automatic digital delivery
✓ Customer management
✓ Analytics and reporting
✓ No monthly fees (only transaction fee)

Deployment

Deploy to Vercel (Recommended)

Push your code to GitHub
Go to vercel.com
Import your repository
Vercel will auto-detect Next.js and deploy

Deploy to Netlify

Build the site: npm run export
Deploy the out folder to Netlify
Or connect your Git repository for automatic deploys

GitHub Actions

The repository includes GitHub Actions for automated deployment. Configure your deployment secrets in your repository settings.

SEO Optimization

The platform is built with SEO best practices:

Built-in Features

✓ Meta tags for all pages
✓ Open Graph tags for social sharing
✓ Semantic HTML structure
✓ Fast page loads
✓ Mobile-responsive design
✓ Clean, crawlable URLs

Customizing SEO

Update meta tags in each page's Head component:

<Head>
  <title>Your Page Title</title>
  <meta name="description" content="Your description" />
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="Your description" />
</Head>

Best Practices

Keep titles under 60 characters
Keep descriptions under 160 characters
Use descriptive, keyword-rich content
Add alt text to all images
Use proper heading hierarchy (H1, H2, H3)

Need Help?

If you have questions or need assistance, feel free to reach out:

📧 Email support
💬 GitHub Issues
📚 Community forums

Ready to start selling?

Browse Products