Skip to content

PROJECT_STRUCTURE.md

Latest commit

 

History

History
151 lines (127 loc) · 4.01 KB

PROJECT_STRUCTURE.md

File metadata and controls

151 lines (127 loc) · 4.01 KB

AutoReference - Project Structure

File Tree

AutoReference/
├── .gitignore
├── README.md
├── PROJECT_STRUCTURE.md
├── package.json
├── tsconfig.json
├── next.config.js
├── tailwind.config.ts
├── postcss.config.js
│
├── app/
│   ├── layout.tsx              # Root layout with theme provider
│   ├── page.tsx                # Landing page (marketing)
│   ├── globals.css             # Global styles with theme variables
│   │
│   └── app/                    # App routes (protected)
│       ├── layout.tsx          # App layout with navigation
│       ├── page.tsx            # Dashboard
│       ├── onboarding/
│       │   └── page.tsx        # Onboarding/connect accounts
│       ├── worklog/
│       │   └── page.tsx        # Work log timeline
│       ├── profile/
│       │   └── page.tsx        # User profile settings
│       └── export/
│           └── page.tsx        # Export impact bullets
│
├── components/
│   ├── app-nav.tsx             # App navigation component
│   ├── demo-mode-toggle.tsx    # Demo mode switch
│   ├── theme-provider.tsx      # Theme context provider
│   ├── theme-toggle.tsx        # Theme toggle button
│   │
│   └── ui/                     # shadcn/ui components
│       ├── button.tsx
│       ├── card.tsx
│       ├── input.tsx
│       ├── label.tsx
│       └── switch.tsx
│
└── lib/
    ├── utils.ts                # Utility functions (cn helper)
    ├── demo-data.ts            # Mock data for demo mode
    └── demo-mode.ts            # Demo mode utilities

Key Features Implemented

1. Landing Page (/)

  • Large hero section with headline and CTA
  • Feature cards showcasing value proposition
  • Clean, minimal design with lots of whitespace
  • Theme toggle in navigation

2. App Dashboard (/app)

  • Stats overview (artifacts, bullets, approved)
  • Recent artifacts grid
  • Demo mode support with sample data
  • Empty state when no connections

3. Onboarding (/app/onboarding)

  • Connect Gmail and Google Calendar
  • Visual connection status
  • Privacy notice

4. Work Log (/app/worklog)

  • Timeline view of work signals
  • Artifacts grouped by initiative
  • Signal icons by type (meeting, email, doc, ticket, commit)
  • Demo mode with mock data

5. Profile (/app/profile)

  • Personal information form
  • Connected services management
  • Account settings

6. Export (/app/export)

  • Select impact bullets for export
  • Export as text file
  • Resume export (placeholder)
  • Confidence scores and evidence links

Design System

Theme

  • Light/dark mode support via next-themes
  • CSS variables for theming
  • Smooth transitions

Typography

  • Inter font family (modern, clean)
  • Clear hierarchy with proper font sizes
  • Readable line heights

Components

  • shadcn/ui based components
  • Consistent spacing and borders
  • Rounded corners (0.5rem radius)
  • Subtle shadows

Layout

  • Container-based responsive design
  • Generous whitespace
  • Card-based content sections
  • Clean navigation

Demo Mode

Demo mode can be enabled:

  1. Via query parameter: /app?demo=true
  2. Via toggle switch in app navigation
  3. Automatically if OAuth is not configured

When enabled, the app uses mock data from lib/demo-data.ts:

  • 5 work signals
  • 3 artifacts
  • 3 impact bullets

Tech Stack

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • UI Components: shadcn/ui
  • Icons: lucide-react
  • Theme: next-themes
  • Date Formatting: date-fns

Getting Started

  1. Install dependencies:

    npm install

  2. Create .env.local (optional for demo mode):

    DEMO_MODE=true

  3. Run development server:

    npm run dev

  4. Visit http://localhost:3000 and enable demo mode to see the app with sample data.