🔮 Fortunegram

A mystical fortune-telling web app with a witchy aesthetic. Discover your daily fortune channeled from the cosmic energies.

✨ Features

• Daily Fortune Display - A new fortune for each day, consistent throughout the day
• Mystical Aesthetic - Dark, purple, and mystical design with animations
• Responsive Design - Beautiful on all devices
• Fast & Modern - Built with Next.js 15 and React 18
• Easy to Deploy - Ready for Vercel deployment

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

npm install

Development

npm run dev

Open http://localhost:3000 to see your app.

Production Build

npm run build
npm start

📦 Tech Stack

• Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS
• Fonts: Cinzel & Garamond (Google Fonts)
• Deployment: Vercel

🎨 Design System

The app features:

• Mystical color palette (purples, blacks, whites)
• Twinkling stars and cosmic background
• Shimmering text effects
• Witchy card designs with glass morphism
• Glowing effects and smooth animations

🌟 Components

• FortuneCard - Displays the mystical fortune with loading states
• StarField - Animated background with twinkling stars and cosmic orbs
• Main Page - Landing page with fortune display and action buttons

🔮 Fortunes

The app includes 30+ mystical fortunes that rotate daily. Get a new fortune by:

• Visiting the site (loads the daily fortune)
• Clicking "Another Fortune" button for random fortunes

📝 Customization

• Edit fortunes in lib/fortunes.ts
• Customize colors in tailwind.config.js
• Modify styles in app/globals.css
• Update metadata in app/layout.tsx

🚀 Deployment

This app is optimized for Vercel:

1. Push your code to GitHub
2. Connect to Vercel at https://vercel.com
3. Deploy with one click!

Or use the Vercel CLI:

npm i -g vercel
vercel

📄 License

Open source and ready to mystify.

---

✦ Tap into the mystical energies ✦