Wooster

AI-Powered Trip Planning

Leverage AI-generated trip recommendations, explore the world with an interactive 3D globe, and build detailed, personalized itineraries.

Backend Repository

The backend for this project powers AI recommendations, manages user data, and integrates with external APIs.

Explore the Wooster Backend API and Server

Table of Contents

• Overview
• Key Features
• Installation
• Development
• Scripts
• Contributing
• License

Overview

Wooster's frontend provides users with an interactive interface to explore destinations and plan trips. It includes an "Explore" page featuring a 3D globe where users can visualize destinations and trip details. The application fetches data from the Gemini backend via an Express.js API to generate trips and display detailed destination data.

Key Features

1. Explore Destinations:

   • A 3D interactive globe using three.js and globe.gl.
   • Leaflet integration for detailed maps and destination exploration.

2. Trip Planning:

   • AI-powered trip generation using Gemini.
   • Interactive forms and suggestions powered by React Hook Form and Zod for input validation.

3. Responsive Design:

   • Tailwind CSS for dynamic styling and responsive layout.

4. State Management:

   • Centralized state management using React's reducer pattern.

5. Destination Summaries:

   • Fetch and display detailed summaries for each destination based on AI-generated data.

6. User Trips:

   • View planned trips and explore detailed trip itineraries with a focus on user-friendly navigation.

7. AI art:

   • Dog art generated using Stable Diffusion.

Installation

To get started with the Wooster frontend, clone the repository and install the required dependencies:

git clone https://github.com/yourusername/wooster-frontend.git
cd wooster-frontend
npm install

Ensure that you also have the backend service (Gemini) set up for API interaction.

Development

To start the development server, run:

npm run dev

This will start a Vite-powered development environment with hot module reloading for seamless development.

Scripts

• npm run dev: Start the development server.
• npm run build: Build the project for production (TypeScript compilation followed by Vite build).
• npm run lint: Lint the code using ESLint.
• npm run lint:fix: Automatically fix linting issues.
• npm run format: Format the code using Prettier.
• npm run type-check: Run TypeScript type checking without emitting any files.
• npm run vitest: Run Vitest testing suite
• npm run vitest:full: Run the Vitest testing suite in verbose mode, showing all test names (including passing tests).
• npm run vitest:ui: Open the Vitest interactive testing UI.
• npm run test:coverage: Run the Vitest testing suite with coverage reporting.

Contributing

Contributions are welcome! If you'd like to improve the app, feel free to submit a pull request or file an issue. Please follow the established coding conventions and make sure all changes are thoroughly tested.

License

This project is licensed under the MIT License. See the LICENSE file for details.