Roots n Routes - Travel Platform

This project is in development. This first section directs you to what works so far

• User authentication flow with test user set up here - Gets you to the signed in landing page where only accommodation works
• Accommodation flow (partially works, but needs more styling work)
• Current work being implemented- Vendor flow and city pages

Overview

This project is a web application called "Roots n Routes," designed as a comprehensive travel platform, likely focusing on destinations and experiences in Africa (suggested by names like "Naija Experience" and "Roots Blog"). It allows users to explore, plan, and potentially book various aspects of their travel.

Tech Stack

• Framework: Next.js 15 (using the App Router)
• Language: TypeScript
• UI Library: React 19
• Styling: Tailwind CSS
• Components: shadcn/ui (built on Radix UI primitives)
• State Management: React Context (specifically for Authentication)
• Icons: Lucide React

Architecture Overview

The application utilizes the Next.js App Router for file-based routing and server/client component rendering.

• Routing: Handled by directories within the app/ folder. Each folder represents a route segment, and page.tsx files define the UI for that segment. Dynamic routes use bracket notation (e.g., [city]).
• Layouts: The root layout (app/layout.tsx) sets up the basic HTML structure, global styles, and context providers (like AuthProvider). Nested layouts can be defined within route segments.
• Components: Reusable UI elements are located in components/.
  • components/ui/: Contains base components generated by shadcn/ui, providing accessible and customizable primitives.
  • components/: Contains custom components built specifically for this application, often composing ui components.
• Styling: Primarily uses Tailwind CSS utility classes for rapid UI development. Global styles are defined in app/globals.css. The cn utility from lib/utils.ts helps merge Tailwind classes conditionally.
• State Management: Global authentication state is managed via React Context in contexts/auth-context.tsx. Local component state is handled using React hooks (useState, useEffect, etc.).
• Utilities & Data: Helper functions reside in lib/utils.ts. Static data, like navigation items, is currently stored in lib/navigationData.ts.
• Static Assets: Images and icons are stored in public/images/.

Core Features

The application is structured around several key travel-related features:

• Exploration: Destinations (/destinations), Accommodation (/accommodation), Flights (/flights), Experiences (/experiences), Deals (/deals).
• User Management: Authentication (/auth/login), User Profile (/profile), Viewed Recently, Messages (/messages), Wallet (/wallet).
• Content & Community: Blog (/blog), Community Forum (/community), Help Center (/help), FAQs (/faqs).
• Partner Opportunities: Vendor Portal (implied), Event Ticket Selling (/tickets).

(Note: Some features are represented by routes/components but may require further implementation).

Getting Started

1. Prerequisites: Node.js, pnpm
2. Clone Repository: git clone <repository-url>
3. Navigate to Directory: cd <repository-directory>
4. Install Dependencies: pnpm install
5. Run Development Server: pnpm run dev
6. Open http://localhost:3000 in your browser.

Contributing

Please follow the workflow outlined in our Contributing Guide.

For details on how to implement features within this codebase (component structure, styling, data handling), please refer to the Feature Implementation Guide.

Task tracking and feature planning are managed using GitHub Issues and Projects.