Level Up

AI Fortune Teller

Build an AI-powered fortune teller app with Fal.ai

What you'll build:

AI-Powered Fortunes

Connect to Fal.ai to generate mystical predictions

Dark Mystical Theme

Purple gradients and glowing effects

Interactive Interface

Input field and animated fortune cards

Loading States

Mystical animations while AI thinks

Initial build: 30-40 minutes

(Iterations and tweaking can take hours of joyful exploration)

Before you start

Make sure you have:

  • Cursor open and ready
  • Opened the chat panel with Cmd+L
  • A Fal.ai account (free signup at fal.ai)
  • A GitHub account (for saving your work)
  • About 25-30 minutes to complete

Prompts to try:

1

Start here: Build the complete AI fortune teller

10-12 minutes

This creates your complete fortune teller app

Create a mystical AI-powered fortune teller app using Next.js and Fal.ai: PROJECT SETUP: - Create new Next.js app called "ai-fortune-teller" - Use TypeScript, Tailwind CSS v3 (IMPORTANT: use @3.x, NOT v4), and App Router - Install framer-motion for animations - Create .env.local file with: FAL_API_KEY=your-api-key-here (we'll get this key in next step) USER INTERFACE: - Dark background with purple to black gradient - Centered title "AI Oracle" with mystical font styling - Subtitle: "Ask the cosmos anything..." - Input field for questions with glowing border - Submit button "Reveal My Fortune" with purple glow effect - Card area below for displaying fortunes (initially hidden) - Add starry particle background effect for ambiance API INTEGRATION: - Create API route at /api/fortune - Accept POST requests with user's question - Call Fal.ai text generation API using the API key - Format prompt: "You are a mystical fortune teller. Give a mysterious and poetic fortune about: [user question]. Keep it brief and enigmatic." - Return formatted fortune response - Handle errors gracefully ANIMATIONS & POLISH: - Input field glows when focused - Button pulses with mystical energy on hover - Loading state: spinning crystal ball icon while waiting - Fortune card fades in with ethereal effect - Typewriter effect for fortune text - Error messages appear as "The spirits are disturbed..."
2

Manual step: Get your Fal.ai API key

3-5 minutes

You'll need this to connect to the AI

Manual step: 1. Visit fal.ai and sign up for a free account 2. Go to your dashboard 3. Find the API Keys section 4. Create a new API key and copy it 5. Replace "your-api-key-here" in your .env.local file with the actual key
3

Then try: Add fortune history

5-7 minutes

Keep track of mystical insights

Enhance the app with these features: 1. Fortune History: - Store last 5 fortunes in state - Display them in a sidebar or below main area - Each shows question and fortune with timestamp - Fade in animation for new entries - Clear history button 2. Fortune Categories: - Add buttons for quick fortunes: "Love", "Career", "Future", "Lucky Numbers" - Pre-populate input when clicked - Different color themes for each category 3. Share Feature: - Add "Share Fortune" button - Copy to clipboard functionality - Twitter/X share button - Success animation when copied
4

Then try: Add mystical effects

7-10 minutes

Create an immersive mystical experience

Make it more immersive with advanced effects: 1. Background Enhancements: - Animated gradient that shifts colors slowly - Floating mystical orbs using CSS animations - Parallax star field effect on mouse move - Fog overlay animation 2. Sound Effects (optional): - Mystical chime when fortune appears - Ambient background music toggle - Click sounds for interactions 3. Fortune Card Styling: - Tarot card-inspired design - Gold border with corner ornaments - Old paper texture background - Wax seal animation when fortune appears 4. Crystal Ball Loading Animation: - Replace simple spinner with animated crystal ball - Swirling mists inside the ball - Glowing effect that intensifies
5

Then try: Add advanced AI features

5-8 minutes

Advanced features for power users

Expand the AI capabilities: 1. Multi-Model Support: - Add dropdown to select different AI "spirits" - Each has unique personality and style - Examples: "Ancient Oracle", "Cosmic Sage", "Dream Walker" 2. Context Awareness: - Include time of day in prompts for relevant fortunes - Add user's zodiac sign input for personalized readings - Moon phase integration for "optimal" fortune timing 3. Fortune Enhancement: - Add "Clarify this fortune" button - Generate related follow-up questions - Suggest lucky numbers based on fortune 4. Export Features: - Download fortune as mystical-styled image - PDF generation with beautiful formatting - Email fortune to yourself

Bonus Tip: Test Your API Key

If the request doesn't work, double-check that your .env.local file is correctly formatted, and make sure the key name matches in both your file and the code.

View your fortune teller in the browser

What's Terminal?

Think of Terminal as a text-based remote control for your computer. You type commands, press Enter, and your computer does things!

Open your Terminal

Press Cmd + Space, type "Terminal", then press Enter.

Navigate to your project folder

In the terminal, type:

cd ai-fortune-teller

Then press Enter.

Start the development server

Type:

npm run dev

Then press Enter.

What's happening? This starts a local web server on your computer - like a mini version of the internet just for you to preview your site!

Open your site in a browser

Go to:

http://localhost:3000

Common hiccups:

  • • API not working? Check your .env.local file has FAL_API_KEY=your-actual-key
  • • Mystical fonts not showing? Save all files (Cmd+S) and refresh
  • • Nothing appears? Check if npm is still installing (look for activity in Terminal)
  • • Error messages? Head to the Debug page for solutions

Done?

Once your app runs, you can ask the AI Oracle any question and receive a mystical fortune.

I completed this practice project