Documentation Index
Fetch the complete documentation index at: https://mintlify.com/MateoKania/crypto/llms.txt
Use this file to discover all available pages before exploring further.
Info Crypto follows a feature-oriented folder structure under src/. Each directory has a single, well-defined responsibility, making it straightforward to locate code and add new features.
Directory tree
crypto/
├── public/
├── src/
│ ├── components/
│ │ ├── converterCrypto.jsx
│ │ ├── cryptoCard.jsx
│ │ ├── cryptoGrafics.jsx
│ │ ├── cryptoNews.jsx
│ │ ├── navbar.jsx
│ │ └── text.jsx
│ ├── context/
│ │ └── useContext.jsx
│ ├── hooks/
│ │ └── useFavorites.jsx
│ ├── pages/
│ │ ├── converter.jsx
│ │ ├── favorites.jsx
│ │ ├── grafics.jsx
│ │ ├── home.jsx
│ │ └── news.jsx
│ ├── services/
│ │ ├── cache.js
│ │ ├── cryptoApi.js
│ │ ├── historyApi.js
│ │ ├── newsApi.js
│ │ └── priceApi.js
│ ├── utils/
│ │ └── formatNumbers.js
│ ├── App.jsx
│ ├── main.jsx
│ └── style.css
├── index.html
├── package.json
├── tailwind.config.js
└── vite.config.js
Directory responsibilities
| Directory | Responsibility |
|---|
src/components/ | Reusable UI components used across multiple pages |
src/pages/ | Route-level page components rendered by React Router |
src/services/ | All external API calls and the localStorage cache layer |
src/hooks/ | Custom React hooks that encapsulate stateful logic |
src/context/ | React context providers for global app state |
src/utils/ | Pure utility functions for formatting and calculations |
src/components/
Contains all reusable UI components. These are not tied to any single route and can be composed across different pages.
| File | Description |
|---|
cryptoCard.jsx | Card component displaying a single cryptocurrency’s name, price, and 24h change |
converterCrypto.jsx | Interactive form that converts an amount between two selected cryptocurrencies |
cryptoGrafics.jsx | Recharts-powered price history chart for a selected asset |
cryptoNews.jsx | Renders a single news article card with headline and source |
navbar.jsx | Top navigation bar with links to all routes and a dark/light mode toggle |
text.jsx | Shared typography component for consistent heading and body text styles |
src/pages/
Each file maps directly to a route defined in App.jsx. Pages are responsible for fetching data (via services) and composing components into a full view.
| File | Route | Description |
|---|
home.jsx | / | Lists the top 20 cryptocurrencies by market cap |
converter.jsx | /converter | Full-page crypto-to-crypto converter |
grafics.jsx | /grafics | Price history charts with selectable time ranges |
news.jsx | /news | Latest cryptocurrency market news |
favorites.jsx | /favs | User’s saved favorite cryptocurrencies |
src/services/
All external API communication lives here. Each file is responsible for a single data domain. The cache.js module wraps every API function with a localStorage cache that expires after 5 minutes, reducing unnecessary network requests.
| File | Description |
|---|
cryptoApi.js | Fetches the top 20 coins by market cap from the CoinGecko /coins/markets endpoint |
priceApi.js | Retrieves current USD prices for multiple coins in a single request |
historyApi.js | Fetches historical OHLC or price data for a given coin and time range |
newsApi.js | Retrieves the latest crypto news articles from a public news API |
cache.js | Wraps each API function with a localStorage cache; re-fetches only when data is older than 5 minutes |
// cache.js — example of the caching pattern used for all API calls
export async function keepInfo() {
const cache = localStorage.getItem("getInfoCrypto");
const cacheDate = localStorage.getItem("getInfoCryptoDate");
if (cache && cacheDate && Date.now() - Number(cacheDate) < 5 * 60 * 1000) {
return JSON.parse(cache); // return cached data if fresh
} else {
const data = await getTopCryptos();
localStorage.setItem("getInfoCrypto", JSON.stringify(data));
localStorage.setItem("getInfoCryptoDate", Date.now());
return data;
}
}
src/hooks/
Custom React hooks that separate stateful logic from component rendering.
useFavorites.jsx — manages a list of favorite coin IDs persisted to localStorage. Exposes addFavorite, removeFavorite, and isFavorite helpers so any component can read or update the favorites list without prop drilling.
src/context/
React context providers that make shared state available throughout the component tree without passing props manually.
useContext.jsx exports two providers:
FavoritesProvider — wraps the useFavorites hook and provides favorites state globally via FavoritesContext.ColorModeProvider — manages dark/light mode state, persists the preference to localStorage, and toggles the dark class on <html> for Tailwind’s dark mode utilities.
Both providers are applied at the root of the app in App.jsx, wrapping all routes.
src/utils/
Pure utility functions with no side effects or React dependencies.
formatNumbers.js — exports two Intl.NumberFormat instances:
formatter — formats a number as a USD currency string with two decimal places (e.g. $42,150.00).formatterCrypto — formats a raw crypto quantity with two decimal places, without a currency symbol.
Entry points
| File | Description |
|---|
src/main.jsx | Renders the React app into #root, wrapping <App> in <BrowserRouter> and <StrictMode> |
src/App.jsx | Defines all routes via <Routes>, wraps the tree in FavoritesProvider and ColorModeProvider |
vite.config.js | Configures Vite with the React SWC plugin and Tailwind CSS v4 Vite plugin |