Digital Alchemy Vibe Code App

A static, frontend-only React application showcasing premium visuals, smooth animations, and community-focused features. Built for speed, beauty, and conversion.

Overview

Digital Alchemy (formerly Vibe Code App) is a single-page application that demonstrates cutting-edge frontend techniques without the complexity of backend infrastructure. It’s designed to be a portfolio piece, community platform, and design system showcase all in one.

Static SPA

No backend, no API endpoints, no auth service required

Mock AI Assistant

Local chat engine with browser persistence

Framer Motion

Buttery-smooth animations throughout

shadcn/ui

Beautiful, accessible component library

Architecture

Simplified for maximum performance:

Single project: webapp/
Runtime: Static SPA (client-side only)
Persistence: Browser localStorage
No server required: Deploy anywhere that hosts static files

This architecture choice means instant load times, zero server costs, and deployment to any static host (Vercel, Netlify, GitHub Pages, etc.)

Tech Stack

package.json (webapp)

{
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "react-router-dom": "^6",
    "framer-motion": "latest",
    "@radix-ui/*": "shadcn/ui components"
  },
  "devDependencies": {
    "vite": "latest",
    "typescript": "latest",
    "tailwindcss": "latest"
  }
}

React 18
Vite
Tailwind CSS
shadcn/ui

Modern React with:

Concurrent features
Automatic batching
Suspense for data fetching
Fast refresh during development

Routes

Clean, semantic routing structure:

/ (Landing)

Marketing page with hero section and feature highlights

/home (Laboratory)

Main workspace/dashboard after “entering” the app

/assistant

Mock AI chat interface with browser persistence

/community

Community features and CTA sections

/profile

Profile and settings surface

* (404)

Custom not found page

Key Features

Mock AI Assistant

Local chat engine that feels real:

// Simulated AI responses with realistic delays
const sendMessage = async (input: string) => {
  // Store in localStorage
  const messages = getStoredMessages();
  messages.push({ role: 'user', content: input });
  
  // Simulate thinking delay
  await delay(500 + Math.random() * 1000);
  
  // Generate response based on patterns
  const response = generateResponse(input);
  messages.push({ role: 'assistant', content: response });
  
  saveMessages(messages);
};

No network requests, no API keys needed. Everything runs in the browser with localStorage for persistence between sessions.

Premium Animations

Framer Motion powers all interactions:

import { motion, AnimatePresence } from 'framer-motion';

const pageVariants = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: -20 }
};

<AnimatePresence mode="wait">
  <motion.div
    key={location.pathname}
    variants={pageVariants}
    initial="initial"
    animate="animate"
    exit="exit"
    transition={{ duration: 0.3 }}
  >
    <Routes location={location}>
      {/* Your routes */}
    </Routes>
  </motion.div>
</AnimatePresence>

Design System

Digital Alchemy’s signature visual style:

Cyberpunk Theme

Dark backgrounds with neon accents (Matrix Green #00E639)

Glassmorphism

Frosted glass effects with backdrop blur

Smooth Gradients

Carefully tuned color transitions

Glow Effects

Neon borders and shadows

Typography

Modern sans-serif with code-style monospace

Micro-interactions

Every click, hover, and scroll feels polished

Local Development

Navigate to Project

cd webapp

Install Dependencies

npm install

Start Dev Server

npm run dev

Opens at http://localhost:5173 with hot reload

Quality Checks

Before deploying:

cd webapp
npm run lint

Deployment

Vercel (Recommended)

The project includes webapp/vercel.json with SPA rewrites and security headers:

Import Project

In Vercel dashboard, import the repository and set webapp as the root directory

Configure Build

Build command: npm run build
Output directory: dist
Install command: npm install

Deploy

Click deploy and wait for build to complete

Validate

Test all routes:

/ (landing)
/assistant (AI chat)
/community (community)
/profile (profile)

Ensure SPA routing works (no 404s on direct navigation)

The vercel.json configuration ensures all routes redirect to index.html for proper SPA behavior.

Other Platforms

Netlify
GitHub Pages
Cloudflare Pages

Create _redirects file in public/:

/*    /index.html   200

Deploy settings:

Build command: npm run build
Publish directory: dist

Add to vite.config.ts:

export default defineConfig({
  base: '/repository-name/',
  // ... other config
});

Create .github/workflows/deploy.yml:

name: Deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Build command: npm run build
Build output directory: dist
Root directory: webapp

Cloudflare automatically handles SPA routing.

Domain Setup

For custom domain digitalalchemy.dev:

Configure DNS

In your DNS provider:Apex record:

Type: A
Name: @
Value: Vercel’s IP (or CNAME to Vercel)

WWW record:

Type: CNAME
Name: www
Value: cname.vercel-dns.com

Add Domain in Vercel

In Vercel project settings:

Add domain: digitalalchemy.dev
Add domain: www.digitalalchemy.dev

Verify TLS

Wait for SSL certificate issuance (usually < 1 minute)

Test

Verify both:

https://digitalalchemy.dev
https://www.digitalalchemy.dev

Test on desktop and mobile devices

Rollback Strategy

If issues arise after deployment:

Vercel Dashboard

Go to project deployments page

Find Previous Deployment

Locate the last known good deployment

Promote

Click “Promote to Production”

Verify

Re-test key routes and interactions

Communicate

Announce rollback to users if necessary

Always test in preview environments before promoting to production. Vercel provides preview URLs for every git push.

Project Structure

Digital Alchemy Vibe Code App/
├── webapp/
│   ├── src/
│   │   ├── components/
│   │   │   ├── ui/          # shadcn/ui components
│   │   │   ├── layout/      # Layout components
│   │   │   └── features/    # Feature-specific components
│   │   ├── pages/
│   │   │   ├── Landing.tsx
│   │   │   ├── Home.tsx
│   │   │   ├── Assistant.tsx
│   │   │   ├── Community.tsx
│   │   │   └── Profile.tsx
│   │   ├── lib/
│   │   │   ├── utils.ts     # Utility functions
│   │   │   └── storage.ts   # localStorage helpers
│   │   ├── App.tsx
│   │   └── main.tsx
│   ├── public/
│   ├── package.json
│   ├── vite.config.ts
│   ├── tailwind.config.ts
│   └── vercel.json
├── README.md
└── CLAUDE.md

Future Enhancements

Possible additions (currently static-only):

Backend Integration

Add API endpoints when user accounts are needed

Real AI

Replace mock assistant with actual AI API

Authentication

Add auth when user-specific data is required

Database

Store user data server-side instead of localStorage

The backend can be restored later from git history if needed. The current static-first approach prioritizes speed and simplicity.

Performance

Lighthouse Score

100/100 on Performance (optimized static build)

First Load

< 1s on fast connections with code splitting

Bundle Size

Minimal JS thanks to Vite optimization

View Live Site

Experience Digital Alchemy in action

Featured Apps

Tools & Utilities

Experiments

​Digital Alchemy Vibe Code App

​Overview

Static SPA

Mock AI Assistant

Framer Motion

shadcn/ui

​Architecture

​Tech Stack

​Routes

/ (Landing)

/home (Laboratory)

/assistant

/community

/profile

* (404)

​Key Features

​Mock AI Assistant

​Premium Animations

​Design System

Cyberpunk Theme

Glassmorphism

Smooth Gradients

Glow Effects

Typography

Micro-interactions

​Local Development

​Quality Checks

​Deployment

​Vercel (Recommended)

​Other Platforms

​Domain Setup

​Rollback Strategy

​Project Structure

​Future Enhancements

Backend Integration

Real AI

Authentication

Database

​Performance

Lighthouse Score

First Load

Bundle Size

View Live Site

Build docs developers (and LLMs) love

Digital Alchemy Vibe Code App

Overview

Architecture

Tech Stack

Routes

Key Features

Mock AI Assistant

Premium Animations

Design System

Local Development

Quality Checks

Deployment

Vercel (Recommended)

Other Platforms

Domain Setup

Rollback Strategy

Project Structure

Future Enhancements

Performance