Skip to content

README.md

Latest commit

 

History

History
114 lines (85 loc) · 3.14 KB

README.md

File metadata and controls

114 lines (85 loc) · 3.14 KB

Frontend README

ProactivePulse AI Frontend

This is the frontend application for ProactivePulse AI, built with Next.js 14, TypeScript, and Tailwind CSS.

Tech Stack

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • UI Components: Custom component library with AWS-inspired design
  • Data Fetching: SWR (Stale-While-Revalidate)
  • HTTP Client: Axios
  • State Management: React Context API
  • Icons: Heroicons
  • Forms: React Hook Form + Zod
  • Charts: Recharts
  • Notifications: React Hot Toast

Project Structure

app/                    # Next.js app router pages
├── insights/          # Insights list and detail pages
├── analysis/          # Analysis control and history pages
├── settings/          # System settings page
├── layout.tsx         # Root layout
└── page.tsx           # Dashboard page

components/             # Reusable UI components
├── dashboard/         # Dashboard-specific components
├── layout/            # Layout components (header, sidebar, etc.)
├── shared/            # Shared UI components (buttons, cards, etc.)
└── index.ts           # Component exports

src/
├── lib/               # Business logic and utilities
│   ├── api/          # API clients
│   ├── hooks/        # Custom React hooks
│   ├── types/        # TypeScript types
│   ├── utils/        # Utility functions
│   └── context/      # React context providers
└── styles/            # Global styles and Tailwind config

public/                # Static assets

Getting Started

  1. Install dependencies:

    npm install

  2. Run the development server:

    npm run dev

  3. Open http://localhost:3000 in your browser.

Environment Variables

Create a .env.local file in the frontend directory with the following variables:

NEXT_PUBLIC_API_URL=http://localhost:8000
NEXT_PUBLIC_APP_NAME=ProactivePulse AI
NEXT_PUBLIC_ENVIRONMENT=local

Development Guidelines

Component Design

  • Follow the AWS Console-inspired design system
  • Use the provided color palette and typography
  • Implement responsive design for all components
  • Ensure accessibility compliance (WCAG 2.1 AA)
  • Use TypeScript for type safety

Data Fetching

  • Use SWR hooks for data fetching and caching
  • Implement proper loading and error states
  • Handle pagination and filtering on list pages
  • Use optimistic updates where appropriate

Styling

  • Use Tailwind CSS utility classes
  • Follow the established design system
  • Implement both light and dark themes
  • Use consistent spacing and typography

Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run start - Start production server
  • npm run lint - Run ESLint
  • npm run type-check - Run TypeScript type checking

Deployment

The frontend can be deployed as a standalone Next.js application or as a static export.

For static export:

npm run build && npm run export

The static files will be generated in the out directory.