MentoLoop Gemini MVP Generation - Complete Guide

Overview

This package contains everything you need to generate a complete, production-ready MVP of MentoLoop using Google Gemini. The prompt has been meticulously crafted with exact logos, color palettes, and architectural guidelines from your existing codebase.

What You'll Get

When you run the Gemini prompt, it will generate:

Pages & Routing

Landing Page (app/page.tsx) - Hero, features, social proof, CTA
Student Intake Wizard (app/student-intake/page.tsx) - 8+ steps with MentorFit assessment
Preceptor Intake Wizard (app/preceptor-intake/page.tsx) - 8+ steps with matching questions
Institution Lead Form (app/institutions/page.tsx) - School/enterprise intake
Role-Based Dashboards - Student, Preceptor, School, Admin views

Components

Logo Component (components/logo.tsx) - Main, Icon, Stroke variants with gradients
Glass Card (components/ui/glass-card.tsx) - Reusable glassmorphism component
Navigation - Navbar with auth integration points
Footer - Links, social, contact
Form Components - Input, select, radio, checkbox with styling

Styling & Configuration

Tailwind Config (tailwind.config.ts) - Complete color palette with MentoLoop extensions
Global CSS (app/globals.css) - CSS variables, animations, glassmorphism utilities
Dark/Light Mode - Full theme support with CSS custom properties

Database Schema

SQL migrations for Supabase with:
- Users table
- Profiles (Student, Preceptor, School)
- Intakes (Responses to MentorFit questions)
- Matches (AI matching results)
- Audit logs

Files Included in This Package

1. GEMINI_MVP_PROMPT.md (Main Prompt)

Complete, copy-paste ready prompt for Gemini
Includes all exact SVG paths for logos
All CSS color variables
MentorFit assessment questions (15 for students, 18 for preceptors)
Architectural requirements

2. DESIGN_SYSTEM_AND_BRANDING.md (Design Reference)

Logo usage guidelines and SVG inline code
Complete color palette (dark & light modes)
Semantic color tokens
Typography guidelines
Shadow system
Animation utilities
Glassmorphism effects

3. COLOR_PALETTE_QUICK_REFERENCE.md (Quick Lookup)

Color swatches with hex, RGB, HSL values
Dark mode theme colors
Light mode theme colors
Chart colors
Component-specific colors
Accessibility contrast ratios
Implementation examples

4. GEMINI_PROMPT_README.md (This File)

Overview and setup instructions
File descriptions
Step-by-step usage guide

Step-by-Step Usage Guide

Step 1: Open Gemini

Go to Google Gemini
Sign in with your Google account
Start a new conversation

Step 2: Copy the Prompt

Open GEMINI_MVP_PROMPT.md
Copy everything from "You are an expert Senior Full-Stack Engineer..." to "END OF PROMPT"
Make sure you copy the complete prompt (all sections)

Step 3: Paste into Gemini

In the Gemini chat box, paste the entire prompt
Click Send
Gemini will process the request

Step 4: Generate and Download

Gemini will generate code files
Download each file as it's provided
Follow the folder structure provided in the output

Step 5: Integrate into Your Project

# Example structure:
MentoLoop/
├── app/
│   ├── page.tsx (landing page)
│   ├── student-intake/page.tsx
│   ├── preceptor-intake/page.tsx
│   ├── institutions/page.tsx
│   ├── dashboard/
│   │   ├── page.tsx (redirect)
│   │   ├── student/page.tsx
│   │   ├── preceptor/page.tsx
│   │   ├── school/page.tsx
│   │   └── admin/page.tsx
│   └── globals.css (update)
├── components/
│   ├── logo.tsx (new/update)
│   ├── ui/
│   │   └── glass-card.tsx (new)
│   └── ...
├── tailwind.config.ts (update)
└── next.config.ts

Step 6: Environment Setup

# Install any new dependencies
npm install

# Run development server
npm run dev

# Type check
npm run type-check

# Lint
npm run lint

What Makes This Prompt Special

1. Exact Logo SVGs

Main logo with gradient (78x18 viewBox)
Icon-only variant (18x18)
Stroke variant for special uses
All inline SVG paths included

2. Complete Color System

Dark mode (default) with 20+ semantic colors
Light mode support
WCAG AA accessibility compliance
Gradient definitions
Chart color system

3. MentorFit Engine

15 student compatibility questions
18 preceptor teaching style questions
Structured for AI matching algorithms
Enum-based implementation for consistency

4. Production-Ready

TypeScript throughout
Error boundaries
Loading states
Form validation (Zod)
Accessibility best practices
Dark mode by default
Responsive mobile-first

5. Glassmorphism Design

.glass class (basic blur effect)
.glass-strong class (enhanced)
.glass-navbar for headers
Professional, modern aesthetic
Enterprise-grade appearance

Customization Tips

Change Primary Colors

In GEMINI_MVP_PROMPT.md, look for the color palette section:

--primary: 214 100% 60%;  /* Change this HSL value */

Modify MentorFit Questions

In the prompt, find the "MentorFit Assessment" section and edit question text and options directly.

Add/Remove Dashboard Sections

In the dashboard deliverables section, specify which tabs/sections you want.

Adjust Form Steps

Modify the "Deliverables" section to change the number of steps or reorder them.

Important Notes

1. Clerk Integration

The prompt mentions Clerk auth. You'll need to:

Set up Clerk project
Add API keys to .env.local
The generated code will have placeholder integration points

2. Stripe Setup

Similar to Clerk:

Create Stripe account
Set publishable and secret keys in environment
Generated code will have payment integration placeholders

3. Supabase Schema

The prompt includes SQL schema generation:

Review the generated SQL
Test it in your Supabase project
Adjust RLS policies as needed for your security requirements

4. Dependencies

The generated code assumes these are installed:

{
  "dependencies": {
    "react": "^19.0.0",
    "next": "^15.5.4",
    "tailwindcss": "^3.4.0",
    "framer-motion": "^12.23.0",
    "@clerk/nextjs": "^6.24.0",
    "stripe": "^18.4.0",
    "zod": "^3.25.76"
  }
}

5. Testing

After generation:

Run npm run type-check to find TypeScript issues
Run npm run lint for ESLint errors
Test forms with various inputs
Test responsive design at mobile breakpoints

Troubleshooting

Gemini Output is Incomplete

Try splitting the prompt into smaller sections
Or use multiple conversations (Phase 1, Phase 2, etc.)

Color Variables Not Working

Ensure you copy the entire CSS variables section
Check that app/globals.css is imported in your layout
Verify Tailwind config is correctly updated

Logo Gradient Not Displaying

Make sure the SVG <defs> section is included
Check that gradient IDs match between <defs> and <path>
Verify fill="url(#logo-gradient)" is correct

Forms Not Validating

Install Zod: npm install zod
Check that Zod schemas are created
Verify form component props match

Support & Resources

Referenced Files in Your Codebase

Existing Logo: components/logo.tsx (lines 1-120)
Color Variables: app/globals.css (lines 6-85)
Tailwind Config: tailwind.config.ts (lines 29-115)
Student Intake Example: app/student-intake/components/mentorfit-assessment-step.tsx
Preceptor Intake Example: app/preceptor-intake/components/mentoring-style-step.tsx

Documentation

Quick Command Reference

# Development
npm run dev              # Start dev server
npm run build           # Build for production
npm start               # Start production server

# Testing & Validation
npm run lint            # Run ESLint
npm run type-check      # TypeScript check
npm run validate        # Run all checks
npm run test:unit       # Run unit tests
npm run test:all        # Run all tests

# Deployment
netlify deploy          # Deploy to Netlify

Architecture Overview

MentoLoop MVP Architecture
├── Frontend (Next.js 14+ App Router)
│   ├── Pages (Landing, Intake, Dashboards)
│   ├── Components (Reusable UI + glassmorphism)
│   ├── Styling (Tailwind + CSS variables)
│   └── State (React Hooks + Context)
├── Backend (Next.js API Routes)
│   ├── Clerk Auth integration
│   ├── Stripe payment handling
│   ├── SendGrid email
│   ├── Twilio SMS
│   └── Supabase queries
├── Database (PostgreSQL via Supabase)
│   ├── Users & Profiles
│   ├── Intake responses
│   ├── MentorFit matches
│   └── Audit logs
└── Infrastructure
    ├── Netlify (hosting)
    ├── Upstash (Redis caching)
    └── Third-party services

Next Steps After Generation

Review Generated Code
- Check for any placeholder values
- Verify all imports are correct
- Ensure folder structure matches expectations

Update Environment Variables

# .env.local
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=...
CLERK_SECRET_KEY=...
STRIPE_PUBLIC_KEY=...
STRIPE_SECRET_KEY=...
NEXT_PUBLIC_SUPABASE_URL=...
SUPABASE_SERVICE_ROLE_KEY=...
SENDGRID_API_KEY=...
TWILIO_ACCOUNT_SID=...

Set Up Services
- Create Clerk application
- Set up Stripe Connect account
- Configure Supabase project
- Set up SendGrid templates
- Configure Twilio account

Test Locally

npm run dev
# Visit http://localhost:3000

Deploy to Staging
- Test all forms
- Verify payments flow
- Check auth integration
- Test email/SMS
Deploy to Production
- Run full test suite
- Deploy to Netlify
- Monitor for errors
- Gather user feedback

Questions & Improvements

If the generated code doesn't meet your needs:

Refine the prompt in GEMINI_MVP_PROMPT.md
Run Gemini again with updated requirements
Manually adjust specific sections as needed
Combine generated code with your existing patterns

Example refinement:

# If you want different colors:
Change the color palette section in GEMINI_MVP_PROMPT.md

# If you want more form steps:
Modify the "Deliverables" section to include additional steps

# If you want different dashboard layouts:
Update the dashboard requirements in the prompt

File Summary

File	Purpose	Size
`GEMINI_MVP_PROMPT.md`	Main prompt for Gemini	~10KB
`DESIGN_SYSTEM_AND_BRANDING.md`	Design reference guide	~15KB
`COLOR_PALETTE_QUICK_REFERENCE.md`	Color lookup table	~8KB
`GEMINI_PROMPT_README.md`	This file	~12KB

Total Documentation: ~45KB of comprehensive, organized guidance

Version Info

Created: 2025
MentoLoop Version: 0.9.7+
Next.js: 15.5.4+
Tailwind CSS: 3.4.0+
TypeScript: 5.9.2+

License & Attribution

All code generated from this prompt should follow your project's existing license (if any).

The color palette, logos, and design system are specific to MentoLoop and derived from your existing codebase.

Ready to generate? Start with GEMINI_MVP_PROMPT.md →

FilesExpand file tree

GEMINI_PROMPT_README.md

Latest commit

History