This is a Next.js project bootstrapped with create-next-app.

Design

The AGFE project follows a modern, professional design system. You can view the complete design prototype and specifications on Figma:

🎨 View Design Prototype

The design includes comprehensive layouts for all features including guide generation, saved guides management, authentication flows, and responsive mobile/desktop experiences.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Environment Setup

Copy .env.example to .env.local and fill in your configuration:

cp .env.example .env.local

Mailgun Setup

1. Sign up for a Mailgun account
2. Get your API key from the Mailgun dashboard
3. Add your domain to Mailgun or use the sandbox domain for testing
4. Add the following variables to your .env.local:

MAILGUN_API_KEY=your-mailgun-api-key
MAILGUN_DOMAIN=your-mailgun-domain.com
MAILGUN_URL=https://api.mailgun.net  # or https://api.eu.mailgun.net for EU
APP_NAME=AGFE

The email functionality includes:

• Password reset emails with styled HTML templates
• Automatic fallback to plain text
• Secure token generation and validation

Cloudinary Setup

1. Sign up for a Cloudinary account
2. Get your credentials from the Cloudinary dashboard
3. Add the following variables to your .env.local:

CLOUDINARY_CLOUD_NAME=your-cloudinary-cloud-name
CLOUDINARY_API_KEY=your-cloudinary-api-key
CLOUDINARY_API_SECRET=your-cloudinary-api-secret

The avatar functionality includes:

• Image upload with automatic optimization
• Face-detection cropping for avatars
• 5MB file size limit
• Automatic format conversion (WebP, AVIF)
• Responsive image delivery

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.