Day 19 of #100DaysOfCode — Building a Tour App (Part 1)

Source: Dev.to

Why a Tour App?

I wanted something that would allow me to practice:

• API integrations
• Custom hooks
• Reusable UI components
• Routing between multiple pages
• Handling async data with useQuery
• State management with Zustand

Compared to my weather app, this project pushes me deeper into real‑world React architecture.

Project Structure (So Far)

Here’s the folder structure I’m using:

src/
 ├── components/
 ├── pages/
 ├── data/
 ├── hooks/
 └── App.jsx

components/

Holds all reusable UI elements like:

• Navbar
• Footer
• HeroSection
• Cards
• Reusable layout blocks

pages/

Contains full‑page components that React Router will render:

• Home
• About
• Contact
• Booking
• Destinations

data/

Includes demo/static JSON data that I can display while building out layouts—super helpful before fully integrating APIs.

hooks/

Custom hooks that use:

• useQuery
• axios

These hooks fetch API data and provide it to components that need it.

🌐 APIs I’m Using

For this Tour App, I’m working with two public APIs:

1. Unsplash API

Used for fetching beautiful destination images.

2. RestCountries API

Used for getting country names, flags, population, maps, languages, and more.

Together, these APIs help me structure realistic tour data.

🏁 What I Did Today

Today was all about laying down the essential building blocks of the app. I focused on creating all the pages, core components, sample data, and setting up my first custom hook for handling images.

📄 Pages Completed

• Home
• About
• Contact
• Booking

These pages are now scaffolded and ready to be filled with dynamic content once API integration is complete.

🧩 Components Built

• Navbar
• Hero Section
• Footer
• Booking Form

These components now give the app a consistent layout and a clean starting point for user interaction.

📁 Data Folder Setup

Inside the data folder, I added two files:

• tour.js – contains static tour information
• testimonials.js – holds demo testimonials

This helps keep the UI functional and visually complete while I work on fetching real data later.

Custom Hook: useImages

The hooks folder now contains a custom hook named useImages. This hook uses the Unsplash API to fetch images and display them inside the HeroSection. It works together with:

• axios – to make API requests
• useQuery – to handle caching, loading states, and errors

With this setup, the hero section now displays real images dynamically instead of static placeholders.

Summary of Today

• Completed all major pages
• Built the essential layout components
• Added demo data for tours and testimonials
• Created a custom hook to fetch real images from Unsplash
• Connected the hook to the hero section for dynamic visuals

This was a big structural day, and the project is officially starting to look like a real app.

Next up: Day 20 Part 2 🚀