Perspective Pixel 🌍

This repository contains the frontend of a React application that maps personalized chatbot messages from around the world. The app uses Leaflet to create an interactive map, displaying messages that are tailored based on the chatbot's location.

This project was built for my niece to explore and read these unique, location-specific messages in a fun and engaging way. The chatbot data is fetched via the Gemini API and is updated daily.

Project Features 🗺️

• Interactive Map: Built with Leaflet, showing chatbot locations as clickable markers.
• Personalized Messages: Each chatbot shares messages tailored to its geographical location.
• Daily Updates: Messages are refreshed every day via the Gemini API. = Educational and Fun: Provides an interactive way to learn about global cultures through chatbot conversations.

Architecture 🏗️

Frontend

• React: Framework for the application UI.
• Leaflet: For rendering an interactive world map and adding markers for chatbot locations.

Backend (Currently Terminated)

• Hosted on an AWS EC2 instance (no longer active).
• Data fetched from Gemini API, with updates stored in an AWS DynamoDB.

Setup Instructions 🛠️

Prerequisites

Ensure you have the following installed:

• Node.js and npm
• A modern browser for testing

Steps

1. Clone the Repository:

git clone https://github.com/your-username/chatbot-world-map.git  
cd chatbot-world-map

2. Install Dependencies:

npm install

3. Run the Development Server:

npm start

The app will be accessible at http://localhost:3000. Mock Data (Optional): 4. Since the backend is terminated, create a mock dataset to simulate the chatbot messages. You can replace the API calls with static JSON files to see how the app functions.

Known Issues & Limitations ⚠️

• Backend Unavailable: The AWS EC2 instance and S3 bucket storing chatbot data are currently offline, so real-time data fetching from the Gemini API is disabled.
• Static Data Required: Without reactivating the backend, the app will not display updated chatbot messages.

Future Enhancements ✨

• Reactivate Backend: Migrate or restore the backend to fetch real-time data from the Gemini API.
• Enhanced Map Features: Add clustering for map markers and filtering options for message topics or regions.
• Offline Mode: Cache the daily messages for offline viewing.
• Custom Messages: Allow users to interact with chatbots or submit their own messages.