Building a Crypto Update App with React.js, Tailwind CSS, and CoinGecko API

In this article, we'll look into the process of building a crypto update web application using React.js, Tailwind CSS for styling, and CoinGecko API for fetching cryptocurrency data. By the end, you'll have a solid understanding of how to integrate these technologies to create a dynamic and responsive crypto update platform.

1. Setting Up the Project

To kick things off, we create a React application using Create React App. This gives us a boilerplate setup to start building our app.

npx create-react-app crypto-update-app

2. Integrating Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows us to quickly style our components without having to write custom CSS. We integrate it into our project using the following steps:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Next, we create a tailwind.config.js file in the root directory of our project and customize Tailwind CSS according to our preferences.

3. Fetching Crypto Data with CoinGecko API

CoinGecko API provides comprehensive cryptocurrency data that we can utilize in our application. We create a custom hook useAxios to handle API requests using Axios.

import axios from "axios";
import { useEffect, useState } from "react";

const useAxios = (param) => {
  const [response, setResponse] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  axios.defaults.baseURL = "https://api.coingecko.com/api/v3";

  const fetchData = async (param) => {
    try {
      setLoading(true);
      const result = await axios(param);
      setResponse(result.data);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData(param);
  }, [param]);

  return {
    response,
    loading,
    error,
  };
};

export default useAxios;

4. Creating Components

We structure our application into reusable components such as Navbar, Footer, CryptoHome, CryptoDetail, Markets, Trending, CoinDetail, and HistoryChart. Each component serves a specific purpose in displaying cryptocurrency information.

5. Routing with React Router

We use React Router to handle navigation within our application. With React Router's BrowserRouter, we define routes for our different pages such as the home page and coin detail page.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import CryptoHome from "./pages/CryptoHome";
import CryptoDetail from "./pages/CryptoDetail";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";

const App = () => {
  return (
    <>
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<CryptoHome />} />
          <Route path="/coin/:id" element={<CryptoDetail />} />
        </Routes>
      </Router>
      <Footer />
    </>
  );
};

export default App;

6. Styling with Tailwind CSS

We leverage Tailwind CSS to style our components. Tailwind's utility classes make it easy to design visually appealing interfaces without writing extensive CSS.

7. Conclusion

In conclusion, we've successfully built a crypto update web application using React.js, Tailwind CSS, and CoinGecko API. This project demonstrates the power and versatility of these technologies in creating dynamic and responsive web applications.

You can view the site in real-time here https://cryptoupdateapp.vercel.app/ or check the code https://github.com/greatestofal/CryptoUpdateApp