{"id":20259063,"url":"https://github.com/rosaerick/conflictzone-app","last_synced_at":"2026-04-24T12:07:06.048Z","repository":{"id":245466184,"uuid":"742004593","full_name":"RosaErick/conflictzone-app","owner":"RosaErick","description":"frontend of an application to fetch, process, and visualize data from the Fogo Cruzado Database, a platform tracking occurrences of violence. It aims to present tables, heatmaps and charts visualization representing the geographic distribution of these occurrences.","archived":false,"fork":false,"pushed_at":"2024-09-03T02:03:49.000Z","size":607,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-16T23:04:51.361Z","etag":null,"topics":["data-visualization","fogo-cruzado","nextjs","nextjs14","typescript"],"latest_commit_sha":null,"homepage":"https://nextjs-boilerplate-rosaerick.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RosaErick.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-11T15:06:32.000Z","updated_at":"2024-09-03T02:03:52.000Z","dependencies_parsed_at":"2025-01-14T04:11:04.236Z","dependency_job_id":"6e44a292-20de-4b54-ae77-38e6e9f13db5","html_url":"https://github.com/RosaErick/conflictzone-app","commit_stats":null,"previous_names":["rosaerick/conflictzone-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RosaErick/conflictzone-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RosaErick%2Fconflictzone-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RosaErick%2Fconflictzone-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RosaErick%2Fconflictzone-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RosaErick%2Fconflictzone-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RosaErick","download_url":"https://codeload.github.com/RosaErick/conflictzone-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RosaErick%2Fconflictzone-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32222532,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T10:26:35.452Z","status":"ssl_error","status_checked_at":"2026-04-24T10:25:27.643Z","response_time":64,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-visualization","fogo-cruzado","nextjs","nextjs14","typescript"],"created_at":"2024-11-14T11:13:01.941Z","updated_at":"2026-04-24T12:07:06.030Z","avatar_url":"https://github.com/RosaErick.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Fogo Cruzado Data Visualization App\n\n### Overview\n\nThis application is designed to fetch, process, and visualize data from the Fogo\nCruzado API, a platform tracking occurrences of violence. It aims to present a\nheatmap visualization representing the geographic distribution of these\noccurrences.\n\n### Key Features\n\nAPI Data Fetching and Processing: Integration with the Fogo Cruzado API to\nretrieve occurrence data, focusing on events with police action and agent\npresence. Data is processed and stored using Django models.\n\nHeatmap Visualization: A heatmap visualization is implemented in the frontend\nusing the Google Maps API. The heatmap represents the intensity and location of\nviolence occurrences.\n\n### Technologies Used\n\nBackend: Django (Python)\n\nFrontend: Next.js (JavaScript/TypeScript)\n\nMapping API: Google Maps API with @react-google-maps/api\n\n### Setup and Installation\n\n#### Backend Setup\n\nInstall Django and required dependencies.\n\nConfigure the Django service to connect with the Fogo Cruzado API.\n\nSet up environment variables for API credentials.\n\n#### Frontend Setup\n\nSet up the Next app.\n\nInstall @react-google-maps/api.\n\nConfigure the Google Maps API key in the environment variables.\n\n#### Running the Application\n\nStart the Django server to process and serve the API data.\n\nRun the Next app to visualize the data on a heatmap.\n\n### Challenges and Solutions\n\nJSON Field Handling: Overcame challenges in serializing and deserializing JSON\nfields (contextInfo and victims) in the Django model.\n\nHeatmap Rendering: Addressed issues related to library compatibility and\nserver-side rendering constraints in the Remix framework.\n\nEnvironment Configuration: Ensured correct handling of environment variables,\nparticularly for the Google Maps API key.\n\n## Current State of the Application\n\n### Backend:\n\nWe have set up a Django application that serves as the backend.\nThe backend is responsible for communicating with the Fogo Cruzado API, fetching occurrence data, and processing it.\nThe processed data is then provided via a custom endpoint (/fogo_cruzado/occurrences/), which returns a JSON array of occurrence objects.\n\n### Frontend:\n\nA Next.js application has been created as the frontend.\nThe frontend includes a heatmap component that utilizes the Google Maps JavaScript API to render a heatmap layer.\nThe heatmap data is fetched from the backend Django application using the custom endpoint.\nThe data fetched is transformed into a format suitable for the Google Maps visualization library and passed to the Heatmap component for rendering.\n\n\n## Documentation\n\n### Heatmap Component (Heatmap.tsx):\n\nRenders a Google Maps instance with a heatmap layer.\nAccepts data prop, which is an array of occurrences with latitude, longitude, and optional weight.\nUtilizes the useJsApiLoader hook to asynchronously load the Google Maps JavaScript API.\nOnce the API is loaded and the map instance is ready, the heatmap layer is created with the provided data.\nThe useEffect hook is used to watch for changes in the map instance and the data, updating the heatmap layer accordingly.\nData Fetching and Page Component (Page.tsx):\nAsynchronously fetches occurrence data from the backend when the component mounts using useEffect and useState.\nThe getData function handles the fetching logic, transforming the response into the expected format and handling any errors.\nThe fetched data is stored in state and passed to the Heatmap component as a prop.\n\n## Next Steps\nMoving forward, here are some potential enhancements and functionalities that could be added to the project:\n\n### Filtering and Search Functionality:\n\nImplement functionality to filter occurrences based on various criteria such as date range, type of incident, etc.\nAdd a search bar to allow users to find specific locations or occurrences.\nData Refresh and Real-time Updates:\n\nSet up a mechanism to periodically refresh the data, ensuring the heatmap displays up-to-date information.\nExplore possibilities for integrating real-time updates if the Fogo Cruzado API supports it.\n\n\n### User Interaction:\n\nAllow users to click on heatmap points to view detailed information about each occurrence.\nIntegrate a sidebar or modal to display occurrence details when an area of the heatmap is selected.\nUser Preferences and Settings:\n\nImplement user settings to customize the heatmap display, such as adjusting the intensity or color scheme.\nSave user preferences in local storage or a user profile if authentication is added.\nResponsiveness and Mobile Compatibility:\n\nEnsure the application is fully responsive and provides a good user experience on mobile devices.\nConsider adding touch gestures for navigation and interaction on touch-enabled devices.\nPerformance Optimization:\n\nOptimize the loading and rendering of the heatmap for large datasets to improve performance.\nImplement lazy loading or pagination for fetching data in manageable chunks.\n\n\n### Accessibility:\n\nEnsure that the application is accessible, providing alternative text for screen readers and ensuring keyboard navigability.\n\n### Future Enhancements\n\ncoming soon... \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frosaerick%2Fconflictzone-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frosaerick%2Fconflictzone-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frosaerick%2Fconflictzone-app/lists"}