chaulmark/finlion-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
finlion-website/cline_docs/memoryBank.md

14 KiB
Raw Blame History

FinLion Website - AI Assistant Memory Bank

IMPORTANT: User Profile & Expectations

USER: Eliza

  • Experience Level: Novice web developer, NOT interested in learning web development
  • Role: Project owner and content provider
  • Expectation: AI assistant (Cline) handles ALL technical work
  • User Interaction: Provides content, approves changes, makes high-level requests only
  • NO USER EDUCATION: Do not teach or explain technical concepts unless specifically asked

AI Assistant Responsibilities

What I (AI) Do Autonomously:

  1. ✅ Edit/Create/Delete Files: All code changes without user intervention
  2. ✅ Git Operations: Pull, commit, push using Eliza's credentials
  3. ✅ Local Testing: Test changes before deployment
  4. ✅ Troubleshooting: Debug and fix issues independently
  5. ✅ Documentation: Update memory bank after significant changes
  6. ✅ Dependencies: Install and manage npm/pnpm packages

What User Does:

  1. 📝 Content Requests: "Update homepage", "Add new service"
  2. ✅ Approve Actions: Review and approve proposed changes
  3. 📦 Provide Assets: Supply images, text, content when needed
  4. 🎯 Strategic Decisions: Final say on design/content direction

Critical Credentials & Access

Git Access (Eliza's Account)

  • Repository: https://gitea.sigd.net/chaulmark/finlion-website
  • Username: eliza
  • Token: 3dba996c9eca5b6267f7cd1b0996a94aac1ac0d5 (created 3/5/2026)
  • Local Path: /Users/Eliza/Writing_Project/FinLion
  • Remote: Configured with authentication on 3/13/2026

Git Configuration

  • User Name: eliza
  • User Email: eliza@gitea.sigd.net
  • Branch: main
  • Status: Working tree clean, up to date with origin/main

AI Workflow for Changes

Standard Change Process (I Handle Everything)

  1. User Request: User says "Update homepage" or "Add service"
  2. Pull Latest: git pull to ensure working with latest code
  3. Make Changes: Edit necessary files (no user involvement)
  4. Test Locally: Run pnpm dev to verify changes work
  5. Commit & Push: 
    git add .
git commit -m "Descriptive message"
git push
  6. Report: Tell user "Done! Changes pushed to repository"

Git Commands I Use (User Never Runs These)

# Start every task
git pull

# After making changes
git add .
git commit -m "Clear description of what changed"
git push

# Check what changed (for my reference)
git status
git diff
git log --oneline -15

Token Management (If Needed)

When Token Expires:

What I Tell User: "Your Git access token has expired. Please generate a new one:"

User Steps (only these 3):

  1. Go to https://gitea.sigd.net
  2. Settings → Applications → Access Tokens → Generate New Token
  3. Copy the new token and give it to me

What I Do: Update the git remote configuration with new token

git remote set-url origin https://eliza:NEW_TOKEN@gitea.sigd.net/chaulmark/finlion-website.git
git pull

Website Technical Stack

Frontend Technologies

  • React: 19.0.0 - Core UI framework
  • Next.js: 15.0.4 - React framework with App Router
  • TypeScript: Latest - Type safety and enhanced development
  • Tailwind CSS: Latest - Utility-first CSS framework
  • Framer Motion: Latest - Animations and micro-interactions

Backend Technologies

  • Next.js API Routes: Built-in API endpoints
  • Nodemailer: Email service integration
  • Upstash Redis: Rate limiting and caching

Development Tools

  • pnpm: 9.14.2 - Package manager
  • Docker: Containerization for development and production
  • ESLint: Code quality enforcement

Architecture

  • Next.js App Router: Modern routing system
  • Server-Side Rendering: For better SEO and performance
  • API Routes: Backend functionality within Next.js
  • Component-Based: Reusable React components

Website Components (What I Manage)

Pages (src/app/)

  1. page.tsx (root): Homepage/landing page
  2. about/page.tsx: About page
  3. services/page.tsx: Services showcase
  4. contact/page.tsx: Contact form

Key Components (src/components/)

Layout Components (components/layout/)

  • Header.tsx: Site header with branding
  • Navigation.tsx: Main navigation menu
  • Footer.tsx: Site footer with links and info

Home Components (components/home/)

  • Hero.tsx: Homepage hero section
  • Services.tsx: Services overview on homepage

Shared Components (components/shared/)

  • Toast.tsx: Notification system

UI Components (components/ui/)

  • Button.tsx: Reusable button component

Other Components

  • Modal.tsx: Modal dialog component
  • ServiceCard.tsx: Service display card

API Routes (src/app/api/)

  • contact/route.ts: Contact form submission endpoint with rate limiting

Key Features I Maintain

Contact Form (contact/page.tsx + api/contact/route.ts)

  • Professional contact form with validation
  • Rate-limited API endpoint for security
  • Email integration via Nodemailer
  • Success/error notifications

When User Says: "Fix contact form" or "Email not working"

What I Do:

  1. Check .env file for email configuration
  2. Verify API route is working
  3. Test form submission locally
  4. Fix any issues in contact form or API
  5. Test email delivery
  6. Commit and push changes

Services Page (services/page.tsx)

  • Service cards displaying offerings
  • Responsive layout
  • Professional design

When User Says: "Add new service" or "Update service"

What I Do:

  1. Open src/data/services.ts or src/app/services/page.tsx
  2. Add/update service information
  3. Ensure proper formatting and styling
  4. Test locally to verify appearance
  5. Commit: "Add/Update service: [Service Name]"
  6. Push changes

Environment Variables (.env)

Critical: Never commit this file!

# Email Configuration
SMTP_HOST=your-smtp-host
SMTP_PORT=your-smtp-port
SMTP_USER=your-smtp-user
SMTP_PASS=your-smtp-password
FROM_EMAIL=your-from-email
TO_EMAIL=your-to-email

# Redis Configuration (for rate limiting)
UPSTASH_REDIS_REST_URL=your-redis-url
UPSTASH_REDIS_REST_TOKEN=your-redis-token

Development Commands

Local Development

# Install dependencies
pnpm install

# Start development server (port 3000)
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Lint code
pnpm lint

Docker Commands

# Development with Docker
docker compose -f docker-compose.dev.yml up

# Production with Docker
docker compose up --build -d

# View logs
docker logs finlion-web

Task Execution Patterns (AI Internal Process)

Task: "Update Homepage Content"

1. User Request: "Change the hero text on homepage"
2. I pull latest: git pull
3. I identify correct file: src/components/home/Hero.tsx or src/app/page.tsx
4. I make the content changes
5. I test locally: pnpm dev (verify changes look good)
6. I commit: "Update homepage: change hero text"
7. I push: git push
8. I report: "Done! Homepage updated and pushed to repository"

Task: "Add New Service"

1. User Request: "Add [Service Name] to services page"
2. User provides: Service description, details
3. I pull latest: git pull
4. I open src/data/services.ts or relevant file
5. I add the new service entry
6. I test locally: pnpm dev (verify service displays correctly)
7. I commit: "Add new service: [Service Name]"
8. I push: git push
9. I report: "Done! New service added to services page"

Task: "Fix Contact Form"

1. User reports: "Contact form not working"
2. I pull latest: git pull
3. I diagnose issue:
   - Check src/app/contact/page.tsx (frontend)
   - Check src/app/api/contact/route.ts (backend)
   - Verify .env email configuration
4. I fix the problem
5. I test locally: pnpm dev, submit test form
6. I commit: "Fix contact form: [description of fix]"
7. I push: git push
8. I report: "Fixed! Contact form is working now. [Brief explanation]"

Task: "Update Styling/Design"

1. User Request: "Change button color" or "Update layout"
2. I pull latest: git pull
3. I identify correct component or style file
4. I make styling changes (Tailwind CSS classes)
5. I test locally: pnpm dev (verify visual changes)
6. I commit: "Update styling: [description]"
7. I push: git push
8. I report: "Done! Design changes applied"

Task: "Install New Package/Dependency"

1. User Request: "Add animation library" or "Need new feature"
2. I pull latest: git pull
3. I install package: pnpm add [package-name]
4. I implement the feature using the package
5. I test locally: pnpm dev
6. I commit: "Add [package-name] and implement [feature]"
7. I push: git push
8. I report: "Done! [Feature] added and working"

Critical Files I Work With

Main Code Files

  • src/app/page.tsx - Homepage
  • src/app/about/page.tsx - About page
  • src/app/services/page.tsx - Services page
  • src/app/contact/page.tsx - Contact page
  • src/app/layout.tsx - Root layout (affects all pages)
  • src/app/api/contact/route.ts - Contact form API endpoint
  • src/data/services.ts - Services data
  • src/components/ - All React components
  • .env - Environment variables (SECRETS - never commit!)
  • .env.example - Environment variable template

Configuration Files

  • package.json - Dependencies and scripts
  • next.config.ts - Next.js configuration
  • tailwind.config.ts - Tailwind CSS configuration
  • tsconfig.json - TypeScript configuration
  • docker-compose.yml - Production Docker setup
  • docker-compose.dev.yml - Development Docker setup

Asset Directories

  • public/ - Static assets (images, icons, etc.)
  • public/images/ - Image files
  • src/styles/globals.css - Global CSS styles

Project Structure

/Users/Eliza/Writing_Project/FinLion/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   ├── page.tsx           # Homepage
│   │   ├── layout.tsx         # Root layout
│   │   ├── about/             # About page
│   │   ├── services/          # Services page
│   │   ├── contact/           # Contact page
│   │   └── api/               # API routes
│   ├── components/            # React components
│   │   ├── home/             # Home-specific components
│   │   ├── layout/           # Layout components
│   │   ├── shared/           # Shared/reusable components
│   │   └── ui/               # UI components
│   ├── data/                 # Data files
│   ├── lib/                  # Utility functions
│   ├── styles/               # CSS/styling files
│   └── types/                # TypeScript type definitions
├── public/                    # Static assets
│   └── images/               # Image files
├── cline_docs/               # Documentation (this file)
├── .env                      # Environment variables (SECRET)
├── .env.example              # Env template
├── package.json              # Dependencies
├── pnpm-lock.yaml            # Lock file
├── next.config.ts            # Next.js config
├── tailwind.config.ts        # Tailwind config
├── tsconfig.json             # TypeScript config
├── docker-compose.yml        # Production Docker
└── docker-compose.dev.yml    # Development Docker

Common Issues & AI Solutions

Issue: "Contact form not working"

What I Do: Check API route, verify .env email settings, test form submission, fix and push changes

Issue: "Page not displaying correctly"

What I Do: Check component files, verify Tailwind classes, test responsive design, fix and push

Issue: "Dependencies issue"

What I Do: Run pnpm install, check for version conflicts, update dependencies if needed, test and push

Issue: "Build errors"

What I Do: Run pnpm build locally, identify errors, fix TypeScript/import issues, verify build succeeds, push

Issue: "Images not loading"

What I Do: Check public/ directory, verify file paths, ensure proper Next.js Image component usage, fix and push

Issue: "Git token expired"

What I Tell User: "Please generate new token at gitea.sigd.net → Settings → Applications → Access Tokens" What I Do: Update git remote with new token when provided

Communication Style

Good Responses (User-Friendly):

✅ "Done! I've updated the homepage hero text. Changes are pushed to the repository." ✅ "Fixed the contact form - it was a configuration issue. Email now works properly!" ✅ "I've added the new service to your services page. It's ready for deployment."

Bad Responses (Too Technical):

❌ "I updated the Hero.tsx component in src/components/home/ directory..." ❌ "The SMTP_PORT environment variable was incorrectly set to 465..." ❌ "I modified the ServiceCard props interface to accept a new type..."

Rule: Report WHAT was done and RESULTS, not HOW it was done technically

Quick Reference

User Says → AI Does

  • "Update [page] content" → Edit page file, test locally, commit, push
  • "Add new service" → Edit services data/page, test, commit, push
  • "Fix contact form" → Diagnose, fix API/form/env, test, commit, push
  • "Change styling" → Update Tailwind classes, test, commit, push
  • "Add feature" → Install packages if needed, implement, test, commit, push
  • "Images not working" → Check paths, fix issues, commit, push

AI Never Asks User To:

  • ❌ Run git commands
  • ❌ Edit code files
  • ❌ Install dependencies
  • ❌ Run development server
  • ❌ Debug code
  • ❌ Configure Docker

AI Always:

  • ✅ Pull before starting work
  • ✅ Test locally when possible
  • ✅ Commit with clear messages
  • ✅ Push to Git repository
  • ✅ Report completion simply
  • ✅ Update this memory bank after significant changes

Recent History (Reference Only)

  • March 13, 2026:
    • Cloned repository from Gitea
    • Configured Git authentication with Eliza's credentials
    • Set up git user configuration (eliza / eliza@gitea.sigd.net)
    • Created comprehensive memory bank based on DeafGain template
    • Repository status: Working tree clean, up to date with origin/main
    • Ready for development work

Status

🟢 System Ready - Repository cloned, git configured, ready for development 🤖 AI Assistant Ready - Waiting for user requests to make changes, add content, or fix issues 📝 Next Steps: User to provide content requests or development tasks