An interactive map designed to help residents and tourists find public drinking water fountains (known as "wodopoje") throughout the city of Łódź, Poland. This project focuses on promoting hydration and sustainability by making fresh water easily accessible.
Main Map View
|
Water Fountain Details
|
Filters Panel Open
|
|
|
|
- Interactive Map: Displays the precise location of all public water fountains using Leaflet.js map.
- Adding Water Fountains To Favorites: Lets users add chosen water fountains to the favorites list.
- Filtering Water Fountains: Gives users the power to filter water fountains based on many conditions.
- Responsive Design: A modern and clean UI built with a mobile-first approach using Tailwind CSS.
- High Performance: Lightning-fast loading and interactions, powered by React and the Vite build tool.
This section clearly outlines the modern technologies you've mastered.
- Frontend: React.js
- Styling: Tailwind CSS
- Build Tool / Dev Environment: Vite
- Testing: Vitest, React Testing Library
- Mapping: Leaflet
- Linting/Formatting: ESLint, Prettier
- Clone the repository:
git clone https://github.com/JuncProgramming/napij-sie-w-lodzi.git
- Navigate to the project directory:
cd napij-sie-w-lodzi - Install dependencies:
npm install
- Start the development server:
npm run dev
- Open http://localhost:5173 (or the port specified by Vite) in your browser.
To run the test suite:
npm run test- Practical React Implementation: This project solidified my understanding of React functional components and hooks (like
useState,useEffect) for managing application state and interacting with a map API. - Utility-First CSS: I gained significant experience building responsive and custom user interfaces from scratch using Tailwind CSS, which dramatically sped up the UI development process.
- Modern Frontend Tooling: I learned to configure a modern development environment using Vite for a React-based project, including its seamless integration with the Vitest testing framework.
- Component Testing: I developed skills in writing unit tests for React components using Vitest and the React Testing Library, ensuring the UI is reliable and functions as expected.