Elara Frontend

🏆 3rd Place Winner - MongoDB Track - 🏆

Developed by @gaiborjosue and @dariadobrolinski.

To view the backend for this project:

Description

Elara is a Next.js frontend for an AI-powered chat that recommends herbal remedies and recipes. Built with TypeScript and deployed on Google Cloud Run. Now includes user registration with email verification.

Tech Stack

• Framework: Next.js (App Router) + React 18 + TypeScript
• Styling: Tailwind CSS, Radix UI, lucide-react icons
• Forms/Validation: react-hook-form, Zod
• AI Chat: Vercel AI SDK, Google PaLM Gemini
• Deployment: Google Cloud Run (Frontend & Backend)
• Auth: Service Account (JWT stored in localStorage) + Email Verification

High-Level Architecture

Shows the frontend service, AI integration, and backend API interactions.

Chat Functionality

Zooms into the chat flow: user input → /api/chat → Gemini AI with tools → streamed response & dynamic UI components.

Screenshots

Setup & Run

1. Clone Repo

   git clone https://github.com/gaiborjosue/elaraFrontend.git
   cd elaraFrontend

2. Install Dependencies

   npm install

3. Environment Variables (create .env.local)

   NEXT_PUBLIC_BACKEND_API_URL=https://<backend-cloud-run-url>
   GOOGLE_API_KEY=<your_google_api_key>

4. Local Development

   npm run dev

5. Deploy to Cloud Run

   gcloud builds submit --config cloudbuild.yaml --project="${GCP_PROJECT_ID}" --substitutions=_NEXT_PUBLIC_BACKEND_API_URL="https://elarabackend-114195159699.us-central1.run.app/"
   
   gcloud run deploy elarafrontend --image "${IMAGE_PATH}" --region "${REGION}" --service-account "${SERVICE_ACCOUNT_EMAIL}" --allow-unauthenticated --project "${GCP_PROJECT_ID}" --set-  secrets="GOOGLE_GENERATIVE_AI_API_KEY=google-api-key:latest,RUNTIME_NEXT_PUBLIC_BACKEND_API_URL=api-url:latest"

New Features

User Registration & Email Verification

• Sign Up Flow: Users can create accounts with email verification
• Email Verification: Automated email sending with verification links
• Verification UI: Dedicated pages for email verification status
• Security: Email verification required before login

Folder Structure

├── app/                # Next.js App Router pages
│   ├── layout.tsx      # Global layout (AuthProvider)
│   ├── page.tsx        # Landing page with signup
│   ├── chat/page.tsx   # Chat interface
│   └── verify-email/   # Email verification page
├── components/         # Reusable UI components
│   ├── PlantInfoCard.tsx
│   ├── RecipeCard.tsx
│   ├── SavedRecipesDrawer.tsx
│   ├── LoginDialog.tsx
│   ├── SignupDialog.tsx        # New: User registration
│   └── EmailVerification.tsx   # New: Email verification UI
├── context/            # React Context (Auth with registration)
│   └── auth-context.tsx
├── pages/api/          # Next.js API routes
│   └── chat.ts         # /api/chat (AI orchestration)
├── styles/             # Tailwind CSS config
└── tsconfig.json       # TypeScript config

Contact

For questions, reach out to the Elara team.