Travel & Tourism Landing Page - React, Vite, TypeScript, TailwindCSS, Framer Motion Frontend Project

A modern, responsive travel and tourism landing page built with React, Vite, TypeScript, Tailwind CSS, and Framer Motion. This project is designed as both a learning resource and a practical template: it demonstrates reusable components, Context API, custom hooks, type-safe props, and animated UI. Use it to discover featured tours, explore the codebase, or extend it for your own travel/tourism site.

• Live Demo: https://travel-backroads.vercel.app/

Table of Contents

1. Project Overview
2. Features
3. Technology Stack
4. Project Structure
5. Setup & Installation
6. Environment Variables
7. How to Run & Use
8. Walkthrough & Functionality
9. Components & Reusability
10. Data, API & Backend
11. Routes & Navigation
12. Libraries & Dependencies
13. Keywords & Learning Outcomes
14. Deployment
15. Conclusion
16. License

---

Project Overview

Backroads is a single-page application (SPA) that simulates a travel and tour company landing page. It is built for beginner-to-intermediate learners to practice React patterns: functional components, hooks, Context API, TypeScript interfaces, and utility-first CSS with Tailwind. The app has no backend; all content is driven by local data in src/data.ts, making it easy to run locally and customize. The UI includes a hero with streaming keywords, an educational tips banner, about section, services grid, featured tour cards with Lucide icons and slogan badges, a “how this app is built” concepts section, and a footer with social links.

---

Features

• Responsive layout — Mobile-first design with Tailwind breakpoints (sm, md, lg, xl).
• Animated sections — Framer Motion for fade-in, slide-in from left/right/bottom, and staggered children.
• Hero typewriter — Cycling streaming keywords (Explore, Get Lost, Wander, etc.) with a blinking cursor.
• Educational banner — Auto-cycling learning tips (Components, Context API, Hooks, TypeScript) with type-in and type-out effect.
• Featured tours — Six tour cards with images, date badge, slogan badge (streaming text), location/cost/duration pills and Lucide icons (MapPin, Calendar, Banknote, Clock, Sparkles).
• Reusable building blocks — Title, PageLinks, PageLink, SocialLink, Service, Tour used in Navbar, Footer, and sections.
• Context API — AppContext provides learning tips and current tip index to EducationalBanner without prop drilling.
• Custom hooks — useCyclingStreamingWords, useTypewriterStream, useStreamingText, useInView for animations and streaming text.
• TypeScript — Typed props and data (TourItem, ServiceItem, PageLinkItem, etc.) in src/types/index.ts.
• Fixed navbar — Sticky nav with mobile hamburger menu and smooth scroll to sections.
• SEO metadata — Title, description, author, keywords, Open Graph and Twitter card meta tags in index.html.
• Lint & build — ESLint (TypeScript + React) and production build via Vite.

---

Technology Stack

Technology	Purpose
React 18	UI components and hooks
Vite 6	Build tool and dev server
TypeScript 5.6	Type-safe props and data
Tailwind CSS 3.4	Utility-first styling
Framer Motion 11	Declarative animations
Lucide React	Icons on tour cards (badges)
Font Awesome (CDN)	Nav/footer and service icons
ESLint + typescript-eslint	Linting and code quality

---

Project Structure

02-backroads-react/
├── index.html              # Entry HTML, SEO meta tags, font/icon links
├── package.json            # Scripts, dependencies
├── vite.config.ts          # Vite + React plugin
├── tsconfig.json           # TypeScript compiler options
├── tailwind.config.js      # Tailwind theme (colors, font)
├── postcss.config.js       # PostCSS (Tailwind, autoprefixer)
├── eslint.config.js        # ESLint flat config (TypeScript, React)
├── vercel.json             # SPA rewrites for Vercel deployment
├── public/
│   ├── vite.svg            # Favicon
│   └── images/             # main.jpeg, about.jpeg, logo.svg, tour-1..6.jpeg
├── src/
│   ├── main.tsx            # React root, mounts App
│   ├── App.tsx             # AppProvider + section order (Navbar → Hero → … → Footer)
│   ├── index.css           # Tailwind directives + base styles
│   ├── vite-env.d.ts       # Vite client types
│   ├── data.ts             # learningTips, pageLinks, socialLinks, services, tours
│   ├── types/
│   │   └── index.ts        # PageLinkItem, SocialLinkItem, ServiceItem, TourItem, LearningTip
│   ├── context/
│   │   └── AppContext.tsx  # AppProvider, useApp, tip state for EducationalBanner
│   ├── hooks/
│   │   ├── useCyclingStreamingWords.ts  # Hero: cycle words with type-in/out
│   │   ├── useTypewriterStream.ts       # EducationalBanner: type then reverse
│   │   ├── useStreamingText.ts          # Tour slogan badge streaming
│   │   └── useInView.ts                 # KeyConceptsSection: scroll visibility
│   └── components/
│       ├── Navbar.tsx      # Logo “Back Roads”, nav links, social icons, mobile toggle
│       ├── Hero.tsx        # Hero text + streaming keywords
│       ├── EducationalBanner.tsx  # Learning tips (Context) + typewriter
│       ├── About.tsx       # About section with image and copy
│       ├── Services.tsx    # Section + grid of Service
│       ├── Service.tsx      # Single service card (icon, title, text)
│       ├── Tours.tsx        # Section + grid of Tour
│       ├── Tour.tsx        # Tour card (image, date, slogan, info, badges)
│       ├── KeyConceptsSection.tsx  # “How this app is built” cards
│       ├── Footer.tsx      # Page links, social links, copyright
│       ├── Title.tsx       # Section heading (title + subTitle span)
│       ├── PageLinks.tsx   # List of PageLink from pageLinks
│       ├── PageLink.tsx    # Single nav/footer link
│       └── SocialLink.tsx  # Social icon link (anchor only; parent wraps in <li>)
└── backroads-html/         # Optional vanilla HTML/JS version

---

Setup & Installation

1. Clone the repository

   git clone https://github.com/arnobt78/Backroads--React-Landing-Page.git
   cd Backroads--React-Landing-Page
   

2. Install dependencies

   npm install
   

3. Start the development server

   npm run dev
   

   The app runs at http://localhost:5173 (Vite default).

4. Build for production

   npm run build
   

   Output is in the dist/ folder.

5. Preview production build locally

   npm run preview
   

6. Run lint

   npm run lint
   

---

Environment Variables

You do not need any environment variables to run this project. It works out of the box with no .env file.

If you later add optional features (e.g. analytics, contact form backend), you can introduce a .env file and use Vite’s import.meta.env:

• Create .env in the project root (and add .env to .gitignore if it contains secrets).
• Example optional variables:
  • VITE_APP_TITLE — Override app title.
  • VITE_API_URL — Optional API base URL for future backend.
• In code: import.meta.env.VITE_APP_TITLE. Only variables prefixed with VITE_ are exposed to the client.
• For Vercel: set the same variables in the project’s Environment Variables in the dashboard.

---

How to Run & Use

• Development: npm run dev → open http://localhost:5173. Use the navbar to scroll to Home, About, Services, Tours; the hero shows streaming keywords; the educational banner cycles tips; tour cards show slogans and Lucide icon badges.
• Production: npm run build then npm run preview to test the built app locally.
• Learning: Open src/App.tsx to see the section order; src/data.ts for content; src/components/*.tsx for UI; src/context/AppContext.tsx and src/hooks/*.ts for state and effects.

---

Walkthrough & Functionality

• Navbar: Fixed at top; “Back” + “Roads” text logo; nav links (home, about, services, tours) and social icons; on small screens a hamburger toggles the link list. Smooth scroll targets section IDs.
• Hero: Full-height block with background image (desktop) or solid color (mobile). Headline “backroads app” and a paragraph ending with “Let’s ” plus a streaming keyword (Explore, Get Lost, Wander, etc.) that types in, holds, then types out and cycles. CTA “explore tours” scrolls to #tours.
• Educational banner: Shows a rotating learning tip (title + description) with a typewriter effect (type in → hold → type out) and auto-advances to the next tip. Data and current index come from AppContext.
• About: Two-column layout (image + text) with short copy about handcrafted tours and expert guides. Image from public/images/about.jpeg.
• Services: Grid of three service cards (saving money, endless hiking, amazing comfort) with Font Awesome icons and short descriptions from data.ts.
• Tours: Grid of six tour cards. Each card: image, date badge (Calendar icon), optional slogan badge (streaming text + Sparkles), title, description, and pills for location (MapPin), cost (Banknote), duration (Clock). Data and images from data.ts and public/images/tour-*.jpeg.
• Key concepts: “How this app is built” — four cards (Reusable components, Context API, Custom hooks, Framer Motion) with short explanations. Uses useInView for scroll-triggered fade-in.
• Footer: Same nav links and social icons as the navbar, plus copyright. SocialLink is an <a>; Navbar/Footer wrap it in <li> for valid list markup.

---

Components & Reusability

• Title — Accepts title and subTitle; use for any section heading. Example: <Title title="featured" subTitle="tours" />.
• PageLinks + PageLink — Renders pageLinks with a given parentClass and itemClass. Used in Navbar (with toggle) and Footer. Reuse in any nav or footer by passing classes.
• SocialLink — Renders a single social link (href, icon). Parent must wrap in <li>. Use in Navbar and Footer.
• Service — One service card: icon, title, text. Used inside Services; you can reuse the same shape for other service grids.
• Tour — One tou