Welcome to Van Trip Explorer – a modern front-end portfolio project that showcases a rich web app for planning and exploring van trips. This project demonstrates a wide variety of contemporary web technologies, tools, and libraries. Below you'll find an overview of the stack and key features implemented.

• Interactive map-based trip planning via Leaflet & React Leaflet.
• Route calculation with Nominatim API.
• Responsive design powered by Bootstrap & React Bootstrap.
• Data management using Firebase.
• Modern navigation via React Router.
• Type-safe codebase for fewer bugs and scalable development.

• TypeScript: Structured, statically-typed JavaScript for scalable code.
• Vite: Ultra-fast front-end build tooling, hot-reload, and optimized bundling.

• React: Modern, component-based UI library for building interactive SPAs.
• React DOM: Virtual DOM and rendering support.
• React Router: Declarative routing and navigation for React apps.
• React Bootstrap: Bootstrap components brought to React for sleek and responsive UI.
• Bootstrap: Styling framework for rapid, mobile-first UI development.
• clsx: Utility library for efficiently combining class names.
• Leaflet: Powerful open-source library for mobile-friendly interactive maps.
• React Leaflet: React components for integrating Leaflet maps with React.
• Firebase: Backend-as-a-service for authentication, data storage, and more.

• Biome: High code quality and linting for up to date, clean, maintainable code.
• @vitejs/plugin-react: Optimized React integration for Vite.
• @types/...: Type declarations for better Intellisense and type-checking.

• src/ – All source code and React components.
• public/ – Static assets.
• index.html – HTML entry point.
• Config files for TypeScript, ESLint, and Vite.

Install dependencies:

npm install

Run the app in development mode:

npm run dev

Build for production:

npm run build

Lint for code quality:

npm run lint

This project showcases:

• Interactive map
• Modern React and hooks patterns
• Responsive UI using Bootstrap
• Integration with third-party APIs and backends (Firebase)
• TypeScript best practices

Feel free to explore the code, customize, and build upon this foundation for your own front-end adventures!