GitHub Finder app using React Hooks, Tailwind CSS, Daisy UI (Part 1)

In this article we are going to use React Hooks, Tailwind CSS, and Daisy UI to build a GitHub Finder app. Let’s get started!

Step 1: Create a new React app with npm

npx create-react-app github-finder --use-npm

Step 2: Install Tailwind dependencies

npm install -D tailwindcss postcss autoprefixer

Step 3: Create a Tailwind Config file

npx tailwindcss init -p

Step 4: Delete everything in your index.css file in your React app and paste the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Install DaisyUI

npm i daisyui

Step 6: Add the following code to the tailwind.config.js file

module.exports = {
    content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    theme: {
        extend: {}
    },
    variants: {
        extend: {}
    },
    plugins: [require('daisyui')]
};

Step 7: Start up your application using

npm start

If you have been coding along up to this point you should see the following:

Step 8: Delete all code in App.js and add the following:

function App() {
    return (
        <div className="bg-purple-500">
            <h1 className="text-xl">Hello World</h1>
            <button className="btn">Click</button>
        </div>
    );
}

export default App;

If your web app looks like the following, then Tailwind CSS and DaisyUI are working properly in your project:

Step 9: Delete all unnecessary files like logo.svg, reportWebVitals.js, setupTests.js, and App.test.js. Delete the corresponding import of those files in index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

Step 10: Install the following packages

npm i react-router-dom react-icons

Step 11: Create a Navbar component

Create a new folder called components inside the src dirctory and create a folder inside the components directory called layout. Inside of the layout directory create a new file called Navbar.jsx. Add the following code to that component

import { FaGithub } from 'react-icons/fa';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
function Navbar({ title }) {
    return (
        <nav className="navbar mb-12 shadow-lg bg-neutral text-neutral-content">
            <div className="flex-none px-2 mx-2">
                <FaGithub className="inline pr-2 text-3xl" />
                <Link to="/" className="text-lg font-bold align-middle">
                    {title}
                </Link>
            </div>
            <div className="flex-1 px-2 mx-2">
                <div className="flex justify-end">
                    <Link to="/" className="btn btn-ghost btn-sm rounded-btn">
                        Home
                    </Link>
                    <Link to="/" className="btn btn-ghost btn-sm rounded-btn">
                        About
                    </Link>
                </div>
            </div>
        </nav>
    );
}
Navbar.defaultProps = {
    title: 'Github Finder'
};
Navbar.propTypes = {
    title: PropTypes.string
};
export default Navbar;

Add the following code to App.js:

import { BrowserRouter as Router, Route } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
function App() {
 return (
  <Router>
   <div calssName="flex flex-col justify-between h-screen">
    <Navbar />
    <main>Content</main>
   </div>
  </Router>
 );
}
export default App;

If you are coding along your app should look like this:

Step 12: Create a Footer component

Create a file called Footer.jsx inside your components / layout directory with the following code:

function Footer() {
 const footerYear = new Date().getFullYear();
return (
  <footer className="footer p-10 bg-gray-700 text-primary-content footer-center">
   <div>
    <svg
     width="50"
     height="50"
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
     fillRule="evenodd"
     clipRule="evenodd"
     className="inline-block fill-current"
    >
     <path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
    </svg>
    <p>Copyright &copy; {footerYear} All rights reserved</p>
   </div>
  </footer>
 );
}
export default Footer;

Add the following code to App.js:

import { BrowserRouter as Router, Route } from 'react-router-dom';
import Footer from './components/layout/Footer';
import Navbar from './components/layout/Navbar';
function App() {
 return (
  <Router>
   <div className="flex flex-col justify-between h-screen">
    <Navbar />
    <main className="container mx-auto px-3 pb-12">Content</main>
    <Footer />
   </div>
  </Router>
 );
}
export default App;

If you are coding along your app should now look like this:

Step 13: Create Pages and Routes

Create a new folder in the src directory called pages and add files named About.jsx, Home.jsx, NotFound.jsx.

Add the following code to App.jsx:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Footer from './components/layout/Footer';
import Navbar from './components/layout/Navbar';
import NotFound from './pages/NotFound';
import About from './pages/About';
import Home from './pages/Home';
function App() {
 return (
  <Router>
   <div className="flex flex-col justify-between h-screen">
    <Navbar />
    <main className="container mx-auto px-3 pb-12">
     <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/notfound" element={<NotFound />} />
      <Route path="/*" element={<NotFound />} />
     </Routes>
    </main>
    <Footer />
   </div>
  </Router>
 );
}
export default App;

Add the following code to Home.jsx:

import React from 'react';
function Home() {
 return (
  <div>
   <h1 className="text-6xl">Welcome</h1>
  </div>
 );
}

Add the following code to About.jsx:

function About() {
 return (
  <>
   <h1 className="text-6xl mb-4">Github Finder</h1>
   <p className="mb-4 text-2xl font-light">
    A React app to search GitHub profiles and see profile details. This project is part of the
    <a href="https://www.udemy.com/course/modern-react-front-to-back/"> React Front To Back</a> Udemy course
    by
    <strong>
     <a href="https://traversymedia.com"> Brad Traversy</a>
    </strong>
    .
   </p>
   <p className="text-lg text-gray-400">
    Version <span className="text-white">1.0.0</span>
   </p>
   <p className="text-lg text-gray-400">
    Layout By:
    <a className="text-white" href="https://twitter.com/hassibmoddasser">
     Hassib Moddasser
    </a>
   </p>
  </>
 );
}

If you are coding along your app should look like this:

Add the following code to NotFound.jsx:

import { FaHome } from 'react-icons/fa';
import { Link } from 'react-router-dom';
function NotFound() {
 return (
  <div className="hero">
   <div className="text-center hero-content"></div>
   <div className="max-w-lg">
    <h1 className="text-8xl font-bold mb-8">Oops!</h1>
    <p className="text-5xl mb-8">404 - Page not found!</p>
    <Link to="/" className="btn btn-primary btn-lg">
     <FaHome className="mr-2" />
     Back To Home
    </Link>
   </div>
  </div>
 );
}
export default NotFound;

Try going to a URL that doesn’t exist for this app. If you are coding along your app should now look like this:

If you go back to the home page your app should look like this:

Stay tuned for Part II where we will continue building out this application!