AI Journal Workshop

A full-stack web application workshop demonstrating how AI tools enhance the development process for junior React developers. This project showcases modern development practices with a React frontend and Vapor Swift backend, powered by OpenAI APIs.

🚀 Features

• Mood Journal: Record and track your emotional state
• AI Chatbot: Get empathetic responses and support for your moods
• Image Generation: Create visual representations of your emotions using AI
• PDF Export: Export your journal entries to PDF format

🏗️ Architecture

This is a monorepo containing:

• Frontend: React with Vite (fast, modern development)
• Backend: Vapor Swift (lightweight, performant API server)
• AI Integration: OpenAI Chat Completions and DALL-E for chat and image generation

📁 Project Structure

AIJournal/
├── frontend/                    # React frontend (Vite)
│   ├── src/
│   │   ├── components/
│   │   │   ├── JournalEntry/   # Form for mood input
│   │   │   ├── Chat/           # Chat interface for AI responses
│   │   │   ├── MoodImage/      # Displays generated images
│   │   ├── services/
│   │   │   ├── ChatService.js  # API calls for chat
│   │   │   ├── ImageService.js # API calls for images
│   │   ├── pages/
│   │   │   ├── Home.jsx        # Landing page
│   │   │   ├── Journal.jsx     # Journal page
│   │   ├── App.jsx             # Main app component
│   ├── package.json            # npm dependencies
│   └── README.md               # Frontend setup instructions
├── backend/                    # Vapor Swift backend
│   ├── Sources/
│   │   ├── App/
│   │   │   ├── Controllers/
│   │   │   │   └── APIController.swift  # Chat and image endpoints
│   │   │   ├── configure.swift          # App configuration
│   │   │   ├── routes.swift             # API routes
│   │   │   └── main.swift               # Application entry point
│   ├── Package.swift                    # Vapor dependencies
│   ├── Dockerfile                       # For Render deployment
│   ├── .env.example                     # Template for OPENAI_API_KEY
│   └── README.md                        # Backend setup instructions
└── README.md                   # Main project documentation

🛠️ Tech Stack

Frontend

• React 18 - Modern UI framework
• Vite - Fast build tool and dev server
• JavaScript - Core language
• jsPDF - PDF generation for journal exports

Backend

• Vapor 4 - Swift web framework
• Swift 5.9+ - Programming language
• OpenAI API - AI chat and image generation

🚀 Getting Started

Prerequisites

• Node.js 18+ (for frontend)
• Swift 5.9+ (for backend)
• OpenAI API key

Backend Setup

1. Navigate to backend directory:

   cd backend

2. Install Swift dependencies:

   swift package resolve

3. Configure environment:

   cp .env.example .env
   # Edit .env and add your OpenAI API key

4. Run the backend server:

   swift run

The backend will be available at http://localhost:8080

Frontend Setup

1. Navigate to frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Start development server:

   npm run dev

The frontend will be available at http://localhost:5173

📡 API Endpoints

Chat Endpoint

POST /api/chat
Content-Type: application/json

{
  "text": "I'm feeling really happy today!"
}

Response:

{
  "response": "That's wonderful to hear! It's great that you're feeling happy..."
}

Image Generation Endpoint

POST /api/image
Content-Type: application/json

{
  "prompt": "A bright and colorful sunrise over mountains"
}

Response:

{
  "imageUrl": "https://oaiusercontent.com/.../image.png"
}

🚢 Deployment

Backend (Render)

The backend is configured for easy deployment on Render:

1. Create a new Web Service on Render
2. Connect your GitHub repository
3. Set build command: swift build --configuration release
4. Set start command: ./.build/release/App
5. Add OPENAI_API_KEY environment variable

Frontend (Vercel/Netlify)

The React frontend can be deployed to any static hosting service:

• Vercel: Connect GitHub repo, auto-deploys on push
• Netlify: Drag & drop build folder or connect GitHub
• GitHub Pages: Use GitHub Actions for deployment

🎯 Workshop Goals

This workshop demonstrates:

• AI-Assisted Development: How tools like Cursor and GitHub Copilot speed up development
• Full-Stack Development: Building both frontend and backend components
• API Integration: Working with external APIs (OpenAI)
• Modern Tooling: Using contemporary development tools and practices
• Deployment: Getting applications production-ready

📚 Learning Objectives

By the end of this workshop, participants will:

• Build a complete full-stack web application
• Integrate AI APIs into their applications
• Use modern development tools effectively
• Deploy applications to production
• Understand the benefits of AI-assisted development

🤝 Contributing

This is a workshop project designed for learning. Feel free to:

• Experiment with the code
• Add new features
• Improve the documentation
• Share your learnings

📄 License

This project is created for educational purposes as part of a workshop.