Quick Start Guide

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { SettingsProvider } from './contexts/SettingsContext'
import { ToastProvider } from './contexts/ToastContext'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <SettingsProvider>
      <ToastProvider>
        <App />
      </ToastProvider>
    </SettingsProvider>
  </StrictMode>,
)

import axios from 'axios'

const API_BASE_URL = import.meta.env.VITE_COINGECKO_BASE_URL ?? 
  'https://api.coingecko.com/api/v3'
const API_TIMEOUT = Number(import.meta.env.VITE_API_TIMEOUT ?? 10000)
const API_KEY = import.meta.env.VITE_COINGECKO_API_KEY

const apiClient = axios.create({
  baseURL: API_BASE_URL,
  timeout: API_TIMEOUT,
})

// Request interceptor - adds headers and API key
apiClient.interceptors.request.use(
  (config) => {
    const nextConfig = { ...config }

    nextConfig.headers = {
      Accept: 'application/json',
      ...nextConfig.headers,
    }

    if (API_KEY) {
      nextConfig.headers['x-cg-pro-api-key'] = API_KEY
    }

    return nextConfig
  },
  (error) => Promise.reject(error),
)

// Response interceptor - normalizes errors
apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    const normalizedError = {
      status: error.response?.status ?? 0,
      message: error.response?.data?.error || 
               error.response?.data?.message || 
               error.message || 
               'Unexpected API error',
      data: error.response?.data,
      original: error,
    }
    return Promise.reject(normalizedError)
  },
)

export default apiClient

import { createContext, useContext, useState, useEffect } from 'react'

const SettingsContext = createContext()

export function SettingsProvider({ children }) {
  const [theme, setTheme] = useState(() => {
    const saved = localStorage.getItem('crypto-dash-theme')
    return saved || 'dark'
  })

  useEffect(() => {
    localStorage.setItem('crypto-dash-theme', theme)
    
    if (theme === 'dark') {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  }, [theme])

  const toggleTheme = () => {
    setTheme(prev => prev === 'dark' ? 'light' : 'dark')
  }

  return (
    <SettingsContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </SettingsContext.Provider>
  )
}

export function useSettings() {
  const context = useContext(SettingsContext)
  if (!context) {
    throw new Error('useSettings must be used within SettingsProvider')
  }
  return context
}

import { useSettings } from './contexts/SettingsContext'

function MyComponent() {
  const { theme, toggleTheme } = useSettings()

  return (
    <button onClick={toggleTheme}>
      Current theme: {theme}
    </button>
  )
}

import apiClient from '../api/axios'

export async function fetchMarketData() {
  try {
    const response = await apiClient.get('/coins/markets', {
      params: {
        vs_currency: 'usd',
        order: 'market_cap_desc',
        per_page: 100,
        page: 1,
      },
    })
    return response.data
  } catch (error) {
    console.error('Failed to fetch market data:', error.message)
    throw error
  }
}

import { useTranslations } from '../hooks/useTranslations'
import { useDocumentTitle } from '../hooks/useDocumentTitle'
import { useDashboardData } from '../hooks/useDashboardData'

function MyComponent() {
  const { t } = useTranslations()
  useDocumentTitle('My Page Title')
  const { data, loading, error } = useDashboardData()

  if (loading) return <div>Loading...</div>
  if (error) return <div>Error: {error}</div>

  return <div>{t('welcome_message')}</div>
}