🎰 SvelteKit Slot Machine — "The House Always Wins"

A modern, fully reactive slot machine built with Svelte 5 (runes) and TypeScript, deployed on Vercel.
This project demonstrates strong front-end architecture, server logic separation, and clean state management practices.

🧱 Tech Stack

Frontend:

• ⚡ Svelte 5 + TypeScript
• 🎨 Modern responsive UI with smooth animations
• 🧩 Runes-based reactivity ($state)
• 💾 Session persistence with sessionStorage

Backend:

• 🔐 SvelteKit API Routes (/api/start, /api/roll, /api/cashout)
• 🧠 In-memory session management (sessions.ts)
• 🎰 Pure TypeScript logic for deterministic gameplay
• ☁️ Ready for edge deployment (Vercel Functions)

🗂️ Project Structure

src/
├── lib/
│   └── server/
│       └── sessions.ts          # Session store and helpers
├── routes/
│   ├── +page.svelte             # Main slot game UI
│   └── api/
│       ├── start/+server.ts     # Start or resume a session
│       ├── roll/+server.ts      # Handle spin logic
│       └── cashout/+server.ts   # Handle cashout endpoint

🧩 Features

• 🎯 Auto session resume — Player can refresh and continue game
• 🎰 Animated slot reels with staged symbol reveal
• 💰 Cashout logic — Credits can be redeemed if eligible
• 💀 Game-over state when credits hit zero
• 🧠 Smart session handling — Sessions stored in memory for quick access
• 🔁 Replay-ready — Easily start a new session after cashout

⚙️ Running Locally

# 1️⃣ Install dependencies
npm install

# 2️⃣ Run the dev server
npm run dev

# 3️⃣ Open in your browser
http://localhost:5173

🚀 Deployment

Deployed via Vercel — uses SvelteKit’s native serverless adapters.
Each API route runs independently as a lightweight edge function.

💡 Design & Code Practices

• 🧩 Modular architecture separating UI, state, and API logic
• 💬 Strongly typed interfaces for all backend routes
• ⚡ Optimized for reactivity and instant feedback
• 🎨 Styled with modern gradients, rounded UI, and micro-interactions
• 🧠 Focus on readability, maintainability, and fun

🧑‍💻 Author

Rafael Dev
Independent Bilingual Developer — Full Stack / Frontend / Creative Technologist
🌎 Focused on remote-first, product-driven environments

🏁 Summary

A playful yet technically solid demonstration of SvelteKit’s full-stack power —
built with modern TypeScript, best practices, and developer joy in mind.