Skip to content

QUICKSTART.md

Latest commit

 

History

History
95 lines (69 loc) · 2.38 KB

QUICKSTART.md

File metadata and controls

95 lines (69 loc) · 2.38 KB

Quick Start Guide

Installation & Setup

  1. Install dependencies:

    npm install

  2. Configure environment:

    cp .env.example .env

    Edit .env and set VITE_API_BASE_URL to your backend API URL.

  3. Start development server:

    npm run dev

  4. Open browser: Navigate to http://localhost:3000

Development Workflow

Without Backend (Mock Mode)

If you don't have a backend running yet, you can modify src/services/api.ts to use mock data:

// Temporarily use mock data
import { mockAnalysisResults } from '../data/mockData'

export const api = {
  analyzeUrl: async (url: string): Promise<AnalysisResult> => {
    // Simulate API delay
    await new Promise(resolve => setTimeout(resolve, 1000))
    return mockAnalysisResults[0] // Return first mock result
  },
  // ... other methods
}

Testing Components

Components are designed to work with mocked data. You can test individual components by importing them and passing mock props.

Building for Production

npm run build

The dist folder will contain the production build ready for deployment.

Project Structure Overview

  • src/components/ - Reusable UI components
  • src/pages/ - Page-level components
  • src/services/ - API client and external service integrations
  • src/types/ - TypeScript type definitions
  • src/utils/ - Utility functions
  • src/data/ - Mock data and fixtures

Key Features to Try

  1. Analyze a URL: Go to /analyze and paste a URL
  2. View History: Check /history for past analyses
  3. Dashboard: See analytics at /dashboard
  4. Bulk Upload: Use the batch uploader on the analyze page
  5. Settings: Configure preferences at /settings

Troubleshooting

CORS Errors

If you see CORS errors when calling the API, ensure your backend has CORS enabled for your frontend origin.

API Connection Issues

  • Check that VITE_API_BASE_URL is set correctly
  • Verify your backend is running
  • Check browser console for detailed error messages

Build Errors

  • Ensure all dependencies are installed: npm install
  • Clear node_modules and reinstall if needed
  • Check TypeScript errors: npm run build

Next Steps

  • Set up your backend API
  • Configure environment variables for production
  • Add custom styling if needed
  • Set up CI/CD pipeline
  • Add E2E tests