Главный экран приложения
BaliGreenMap - это веб-приложение, предназначенное для очищения окружающей среды острова Бали, а также улучшения собственного опыта пребывания на острове. В основе приложения лежит интерактивная карта, которая позволяет зарегистрированным пользователям добавлять пины на карту (и, разумеется, смотреть пины других пользователей). Каждый пин сопровождается постом с фотографией, заголовком и описанием, где пользователи могут рассказать о сильно замусоренных местах. С помощью BaliGreenMap люди, заботящиеся об окружающей среде, могут делиться информацией о локациях, которые нуждаются в уборке. А другие пользователи смогут выбирать менее загрязненные маршруты и места.
В январе и феврале 2023 года я был на Бали. Январь и февраль - месяцы, расположенные строго в центре местного сезона дождей. Помимо пасмурного неба и резкой смены погоды, я столкнулся с неочевидным для меня, но очень неприятным последствием сезона дождей. Идищие каждый день ливни смывали с холмистого острова прямо в океан кучи мусора: пластиковые бутылки, сигаретные пачки, полиэтиленовые пакеты и многое другое... Насладиться купанием стало практически невозможно. Весь берег был весь усыпан мусором. Затем я поехал вглубь острова, в Убуд и в горы. Мусора тоже было немало. Этот опыт послужил толчком к созданию BaliGreenMap - попытки внести свой вклад в поддержание чистоты на любимом острове.
Публикуйте и читайте посты: Пользователи могут создавать посты, привязанные к конкретной локации на карте.
Регистрируйтесь так, как вам удобно: Доступна регистрация по электронной почте или через Google-аккаунт.
Многоязычная поддержка: Сайт доступен на трех языках - русском, английском и индонезийском.
Комментируйте, лайкайте и делитесь (скоро): Комментарии, лайки и возможность поделиться постом улучшат взаимодействие между пользователями.
Добавление поста
Пост на карте
Главная страница для незалогиненных пользователей
Процесс регистрации или входа
Язык программирования: Все приложение написано на TypeScript для обеспечения безопасности типов и лучшего опыта разработки.
Фреймворк: Использованы Next.js с рендерингом на стороне сервера (SSR) и React.
Стили: Использован Tailwind CSS для создания современного и адаптивного дизайна, а также ускорения разработки.
Компонент карты: Использован Google Maps API для React.
Аутентификация и хранение данных: Используется Firestore для аутентификации пользователей, управления базами данных и хранения фотографий.
Локализация: Использован i18n для Next.js.
Скоро появятся комментарии, лайки, шеринг и даже возможность организовывать "субботники".
Ваши отзывы и предложения всегда приветствуются. По любым дальнейшим вопросам или предложениям о сотрудничестве не стесняйтесь писать мне.
Main page with map
BaliGreenMap is a web application dedicated to enhancing the cleanliness and environmental welfare of the Island of Bali. At the core of the application is an interactive map that allows registered users to add pins. Each pin is accompanied by a post featuring a photo, title, and description of areas with significant littering. Through this platform, environmentally conscious users can notify others about locations that need cleaning. While other users are able to take alternative routes and spots with less littering.
During a vacation to Bali in January and February — the months characterized by the rainy season — I witnessed an unsettling scene. Torrential rains washed away heaps of trash like plastic bottles, cigarette packs, and plastic bags from the island straight into the ocean. The once-pristine waters were marred with litter, making it nearly impossible to enjoy a swim. The shore was also covered with garbage. This experience instigated the inception of BaliGreenMap, an effort to contribute to the cleanliness of the beloved island.
Interactive Google Maps Component: Centered on the Island of Bali, it's the heart of the application.
Pin & Post: Users can pin locations and attach a post with photographs and descriptions of the littered areas.
User Registration: Options for email-password-based registration or seamless sign-in via Google.
Multilingual Support: The site is accessible in three languages - Russian, English, and Indonesian.
Engagement: Planned features to allow users to like, comment on posts and share them to enhance user interaction.
Adding a post
A post on map
Main page for non logged-in users
Process of registration or sign in
Programming: The entire application is written in TypeScript to ensure type safety and better development experience.
Framework: Built using Next.js with Server Side Rendering (SSR) and React.
Styling: Utilized Tailwind CSS for modern and responsive design and boost of development speed.
Map Component: Incorporated Google Maps for React for the central mapping feature.
Authentication & Storage: Leveraged Firestore for authentication, database management, and photo storage.
Localization: Implemented i18n for Next.js to offer the platform in multiple languages.
Soon there will be comments, likes, sharing and even the opportunity to organize cleaning events.
Your feedback, suggestions, or contributions are always welcome. Let's join hands to keep Bali green and clean!
For any further queries or collaborations, feel free to reach out!