Skip to main content
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

DirectoryResponsibility
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.
FileDescription
cryptoCard.jsxCard component displaying a single cryptocurrency’s name, price, and 24h change
converterCrypto.jsxInteractive form that converts an amount between two selected cryptocurrencies
cryptoGrafics.jsxRecharts-powered price history chart for a selected asset
cryptoNews.jsxRenders a single news article card with headline and source
navbar.jsxTop navigation bar with links to all routes and a dark/light mode toggle
text.jsxShared 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.
FileRouteDescription
home.jsx/Lists the top 20 cryptocurrencies by market cap
converter.jsx/converterFull-page crypto-to-crypto converter
grafics.jsx/graficsPrice history charts with selectable time ranges
news.jsx/newsLatest cryptocurrency market news
favorites.jsx/favsUser’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.
FileDescription
cryptoApi.jsFetches the top 20 coins by market cap from the CoinGecko /coins/markets endpoint
priceApi.jsRetrieves current USD prices for multiple coins in a single request
historyApi.jsFetches historical OHLC or price data for a given coin and time range
newsApi.jsRetrieves the latest crypto news articles from a public news API
cache.jsWraps 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

FileDescription
src/main.jsxRenders the React app into #root, wrapping <App> in <BrowserRouter> and <StrictMode>
src/App.jsxDefines all routes via <Routes>, wraps the tree in FavoritesProvider and ColorModeProvider
vite.config.jsConfigures Vite with the React SWC plugin and Tailwind CSS v4 Vite plugin

Build docs developers (and LLMs) love

Get started for freeTalk to us