DEV Community

Cover image for Day 19 of #100DaysOfCode — Building a Tour App (Part 1)
M Saad Ahmad
M Saad Ahmad

Posted on

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

#react #javascript #100daysofcode #webdev

Up until now, I’ve covered quite a few topics in React—Zustand, useQuery, React Router, and more. After building my previous weather app, I felt it was finally time to take a step forward and create something slightly more advanced.

So… I decided to build a Tour App.
It’s a project where I integrate multiple APIs to display tour-related information—images, country data, and detailed cards for destinations.

This project isn’t completed yet, so I’m splitting it into two parts, and today’s update covers the initial structure, setup, and thought process.

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

Here’s the folder structure I’m using:

src/
 ├── components/
 ├── pages/
 ├── data/
 ├── hooks/
 └── App.jsx
Enter fullscreen mode Exit fullscreen mode

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

I created the main pages that will later be connected with React Router:

  • Home
  • About
  • Contact
  • Booking

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

🧩 Components Built

I also built the reusable UI components that will appear across the entire tour app:

  • 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 me 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

So overall, today I:

  • 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 🚀

Top comments (0)