eWar – Interactive Website for Air Raid Alerts and War Statistics

eWar – Interactive Informational Website

eWar is a lightweight, interactive website designed to present important wartime information in a clear and accessible format. The platform combines an air raid alert map, military loss statistics, and a small casual game within a responsive single-page application.

Rather than attempting to cover every possible topic, the project focuses on a concise set of features and a straightforward user experience. It demonstrates how data visualization, external API integration, and interactive elements can be combined in a compact frontend application.

Project Overview

The project was created as an experiment in building a responsive React-based informational website around a socially significant topic. Its main objective was to make important data easy to access while keeping the interface simple, fast, and engaging.

eWar is implemented entirely on the frontend and does not require dedicated backend infrastructure. Application state, external data requests, interface components, and interactive functionality are handled directly within the client-side application.

Core Features

Air Raid Alert Map

One of the main features of the website is an interactive air raid alert map designed to display regions with active alerts. The map originally received data from an external provider and updated its visual state based on the information returned by the API.

The original data source is no longer available, so the live alert functionality is currently inactive. However, the implemented module demonstrates the integration of external geographic data, asynchronous requests, and dynamic interface updates within a React application.

Military Loss Statistics

The website includes a dedicated statistics section that presents key military loss data in a concise and easy-to-read format.

The interface was designed to make numerical information understandable at a glance rather than overwhelming users with large tables or complex dashboards. This approach demonstrates how structured API data can be transformed into a clear visual experience for a broad audience.

Interactive Mini-Game

To balance the serious informational content, the project also includes a small casual game. This feature introduces an element of gamification and gives users another way to interact with the website.

The mini-game demonstrates the implementation of custom frontend logic, user interactions, state changes, and immediate visual feedback within the same application.

Technical Implementation

The eWar website was developed as a client-side single-page application using modern frontend technologies:

• React – for building the user interface with reusable components and managing dynamic rendering.

• Redux – for centralized state management across the application.

• Axios – for handling asynchronous requests to external APIs and data providers.

• SCSS – for modular, reusable, and maintainable interface styling.

• JavaScript (ES6+) – for application logic, data processing, and interactive functionality.

The project is deployed through GitHub Pages, allowing the frontend application to remain publicly accessible without a separate server or backend environment.

Development Goals

The main goal of eWar was to explore the development of a lightweight informational single-page application that combines external data, interactive components, and responsive design.

The project provided practical experience in several areas:

• Structuring a React application using reusable components.

• Managing shared application data with Redux.

• Working with asynchronous API requests and external data sources.

• Transforming raw statistical data into an accessible user interface.

• Combining informational content with custom interactive functionality.

• Deploying a frontend application through GitHub Pages.

Potential Improvements

The project could be expanded further by introducing new data sources and additional functionality:

• Connecting the alert map to a new active data provider.

• Adding charts, historical comparisons, and more detailed statistical dashboards.

• Displaying timestamps and data update statuses more clearly.

• Introducing additional mini-games, quizzes, or other interactive elements.

• Adding multilingual support for a broader audience.

• Improving accessibility and optimizing the interface for different screen sizes.

Project Value

eWar demonstrates how a compact frontend application can combine socially relevant information, external API data, visual presentation, and interactive functionality within a single responsive interface.

Although the project is relatively small in scope, it showcases practical experience with React development, Redux state management, API integration, responsive styling, and static application deployment. It also highlights the importance of presenting complex or sensitive information in a clear and user-friendly way.

Results and Project Impact

Although eWar is relatively compact in scope, the project successfully demonstrates how modern frontend technologies can be used to build an informative, interactive, and socially relevant application.

The completed project achieved several important technical and practical outcomes:

• Dynamic state management using React and Redux to coordinate data and interface updates across multiple sections of the application.

• Integration with external APIs for receiving and displaying alert information and military statistics.

• Clear presentation of complex data through a simple interface designed to make important information easy to understand at a glance.

• Integration of informational and interactive features by combining socially significant content with a casual mini-game.

• A responsive and lightweight user experience that works across different screen sizes and does not require dedicated backend infrastructure.

• Simple public deployment through GitHub Pages, making the application accessible without maintaining a separate server environment.

The project also revealed an important architectural consideration: reliance on a single external data provider can affect the availability of key functionality. When the original alert data source became unavailable, the live map could no longer receive updates.

This experience highlighted the importance of implementing fallback data sources, clear error states, availability monitoring, and flexible integration layers when building applications that depend on third-party services.

Conclusion

The final result is a compact but complete React single-page application that combines external data, centralized state management, responsive design, and custom interactive functionality.

eWar demonstrates that even a small frontend project can address a socially important topic while providing practical experience with API integration, data visualization, application state, interface responsiveness, and deployment.

Beyond its original informational purpose, the project serves as a useful example of how technology, user experience, and socially relevant content can be brought together within a clear and accessible digital product.