🧇 ByteWaffle — Setup Guide

Folder Structure

bytewaffle/
├── public/
│   └── frames/              ← PASTE YOUR 200 FRAMES HERE
│       ├── frame_001.jpg
│       ├── frame_002.jpg
│       └── ... frame_200.jpg
├── pages/
│   ├── _app.js
│   └── index.js
├── styles/
│   └── globals.css
├── next.config.js
└── package.json

Step-by-Step Setup

1. Install Node.js

Download from https://nodejs.org (LTS version)

2. Create project folder

mkdir bytewaffle
cd bytewaffle

3. Copy all these files into the folder (keeping the structure above)

4. Add your frames

• Create folder: public/frames/
• Paste your 200 frames named: frame_001.jpg to frame_200.jpg
• EZGif usually exports them like this by default ✅

5. Install dependencies

npm install

6. Run locally to preview

npm run dev

Open http://localhost:3000

7. Build for deployment

npm run build

This creates an out/ folder.

8. Deploy on Netlify

1. Go to netlify.com → Log in
2. Drag the out/ folder onto Netlify
3. Get your live URL instantly! 🚀

---

Frame Rename Fix (if needed)

If your frames are named differently (e.g. 0001.jpg), open a terminal in the frames folder and run:

Windows (PowerShell):

$i=1; Get-ChildItem *.jpg | Sort-Object Name | ForEach-Object { Rename-Item $_ "frame_$('{0:D3}' -f $i).jpg"; $i++ }

Mac/Linux:

i=1; for f in *.jpg; do mv "$f" "$(printf 'frame_%03d.jpg' $i)"; ((i++)); done

---

WhatsApp Order Setup

The "Order Now" button is pre-configured to:

• Phone: +91 6268238126
• Pre-written message: "Hi Nitish! I'd like to order from ByteWaffle..."

To change the message, edit line 7 in pages/index.js.