Distributed Systems
TITLE: AstroNavigator - Galaxy Route Solver
(Find the optimal path back to Earth while avoiding black holes)
Report By
A.SRESHTA(160622733132)
B.SATHVIKA (160622733137)
P.RAMYA (160622733172)
Department of Computer Science and Engineering
Stanley College of Engineering & Technology for Women
(Autonomous & Approved by AICTE)
Chapel Road, Abids, Hyderabad, Telangana-5000001[2022-2026]
ABSTRACT
AstroNavigator – Galaxy Route Solver is a space-themed, graph-based simulation project
that challenges users to navigate from a starting node (spaceship) to Earth while avoiding black
holes hidden in the star map. The objective is to find the shortest and safest route across a
galaxy of interconnected nodes, where each connection has a distance (weight) and black holes
act as fatal traps. This project blends algorithmic problem-solving with an immersive visual
interface, making it both educational and engaging. It is especially useful for demonstrating
concepts like pathfinding, graph theory, and system layering in software development.
The core logic of the system is built on a three-tier architecture, comprising the Presentation
Tier, Application Tier, and Data Tier. The Presentation Tier is a dynamic web interface created
using HTML, CSS, and JavaScript, allowing users to visually interact with a galaxy map, select
paths, and view optimal routes. The Application Tier is implemented using Java’s embedded
HTTP server, handling RESTful endpoints for communication between the frontend and
backend. It processes user requests and invokes backend methods via RMI. The Data Tier
consists of a Java RMI service responsible for generating the star graph, identifying black
holes, and using Dijkstra's algorithm to compute the optimal path while avoiding dangerous
nodes. These layers work together seamlessly to deliver a modular and interactive experience.
Users interact with the system through an intuitive interface that visually represents nodes as
stars, the spaceship, black holes, and Earth. By clicking through connected nodes, users attempt
to reach the goal safely. The application calculates and displays the user's path length, compares
it to the optimal route, and validates whether the submitted path avoids all black holes. Visual
elements such as animated paths, glowing node types, and starfield effects enhance the
experience and provide immediate visual feedback.
Overall, AstroNavigator showcases the power of combining frontend design, algorithmic logic,
and system integration through a layered architecture. The project effectively demonstrates
how complex backend computations, such as shortest pathfinding in a weighted graph with
constraints, can be made accessible and engaging through a web interface. Its modular structure
allows for scalability, reusability, and adaptability, making it suitable for learning
environments, demonstrations, or further gamified development.
INTRODUCTION
Distributed Systems
A Distributed System is a type of computer system where multiple independent computers
(called nodes or servers) work together to perform tasks. These systems are connected through
a network but appear to the user as a single unified system.
In simple terms, a distributed system divides the workload among different computers, and
they communicate and coordinate with each other to complete tasks efficiently.
Each computer in the system has its own memory and processor, but they share resources and
data through the network. This allows the system to handle large amounts of data, improve
speed, and continue working even if one part fails.
Key Features of Distributed Systems:
1. Resource Sharing – Different nodes share hardware, software, and data.
2. Scalability – The system can grow by adding more nodes.
3. Fault Tolerance – Even if one computer fails, the system keeps working.
4. Concurrency – Many users can access and use the system at the same time.
5. Transparency – The system hides the complexity and looks like a single system to the user.
Fig 1: Working of Distributed System
3-Tier Architecture
3-tier architecture is a widely used software design model that organizes an application into
three separate layers:
1. Presentation Layer
2. Application Layer (Logic Layer)
3. Data Layer (Database Layer)
Each layer is responsible for specific tasks and operates independently, which improves clarity,
efficiency, and ease of maintenance in software development.
Layers of 3-Tier Architecture
1. Presentation Layer :
Also called the client layer. This is the interface that users interact with. It collects user input
and displays output after processing. Technologies used: HTML, CSS, JavaScript, Vue.js,
React, etc.
2. Application Layer:
Also known as the business logic layer. It handles the core functionality of the system.
Processes data from the presentation layer and communicates with the data layer. Technologies
used: PHP, Laravel, Node.js, Java, Python, etc.
3. Data Layer:
Also known as the database layer. It stores, retrieves, and manages data. It only interacts with
the application layer. Technologies used: MySQL, PostgreSQL, MariaDB, MongoDB, etc.
Why 3-Tier Architecture is Used
1. Separation of Concerns: Each layer focuses on one function—UI, logic, or data.
2. Scalability: Layers can be scaled individually as needed.
3. Maintainability: Easier to manage and debug due to modular structure.
4. Security: Direct access to the database is restricted, improving data security.
5. Reusability: Components of one layer can be reused in other applications.
6. Parallel Development: Different teams can work on different layers at the same time.
Advantages of 3-Tier Architecture
⚫ Clean and structured code organization.
⚫ Easier testing and debugging.
⚫ Better performance and system reliability.
⚫ Flexibility in upgrading individual layers.
⚫ Improved collaboration in development teams.
Fig 2 : 3-Tier Architecture
Objectives of the Mini Project
1. To design and develop a web-based pathfinding simulation system that allows users to
navigate a dynamically generated galaxy map and find the optimal route to Earth while
avoiding black holes.
2. To implement a modular backend service using Java RMI that supports:
o Graph generation and edge-weight assignment
o Random placement of black holes
o Dijkstra’s algorithm for shortest path computation
o Path validation and feedback mechanism
3. To use HTML, CSS, and Vanilla JavaScript to build an interactive and animated
frontend that visualizes nodes, edges, black holes, and optimal paths on a galaxy-
themed interface.
4. To leverage the Java HTTP server (com.sun.net.httpserver) to expose RESTful
endpoints that handle star graph retrieval, path submission, and result validation
through the application logic layer.
5. To create dynamic path visualizations with SVG elements, highlighting user-selected
paths and system-generated optimal routes with distinct colors and animations.
6. To establish clean separation of concerns via a 3-tier architecture:
o Presentation Layer (HTML, CSS, JS for frontend interaction and visualization)
o Application Layer (Java HTTP server for handling logic and user requests)
o Data Layer (Java RMI-based backend managing graph and pathfinding logic)
7. To simulate space-navigation constraints by ensuring that black holes are randomly
placed but never overlap with the spaceship (start) or Earth (goal) nodes, ensuring a fair
and solvable path.
8. To allow real-time interactions where users can click to build a path, visualize distances,
validate their choices, and receive immediate feedback through messages and metrics
like path length and correctness.
9. To enhance user experience with cosmic aesthetics including animated starfields,
glowing nodes, and responsive UI layouts that adapt to various screen sizes and
resolutions.
10. To maintain code modularity and clarity through well-separated components for web
routing, data processing, graph generation, and UI control, ensuring maintainability and
testability.
11. To enable future extensions such as user scoring systems, time-based challenges, black
hole movement/teleportation, or AI opponents navigating the galaxy.
12. To implement error handling and user messaging to notify players of invalid moves,
black hole collisions, or submission errors, improving robustness and usability.
13. To conduct testing and debugging of frontend and backend interactions to ensure
smooth data flow, accurate path validation, and correct algorithm execution across
multiple scenarios.
14. To support multiple use cases like educational visualization of Dijkstra’s algorithm,
basic RMI-based client-server interaction demonstration, and interactive game logic in
a web environment.
15. To document the full development process including architecture design, component
interactions, testing logs, and deployment steps to support future development or
academic review.
PROJECT DESIGN
Architecture Design
The AstroNavigator – Galaxy Route Solver project is designed using a modular architecture
that simulates a space-based pathfinding system. The application enables users to interact with
a dynamically generated galaxy map to determine the shortest route from a spaceship to Earth,
while avoiding obstacles like black holes. Built using a three-tier architecture, the system
separates responsibilities across the Presentation Tier, Application Tier, and Data Tier. This
separation not only promotes clean code and maintainability but also ensures a smooth user
experience through interactive visuals and real-time updates during gameplay. Each tier
functions independently while interacting with the others to create a cohesive, responsive
environment.
The frontend of the application serves as the Presentation Tier and is developed using HTML5,
CSS3, Tailwind CSS, and JavaScript. The user interface includes animated visual elements
such as stars, black holes, Earth, and the spaceship. Users interact with the galaxy by clicking
on star nodes to build a path, which is then validated or solved using backend logic. Real-time
feedback is displayed on the interface, including distance calculations and path summaries.
SVG lines are dynamically rendered to represent connections between nodes, while buttons
allow users to generate new galaxy layouts or trigger the pathfinding algorithm. These features
make the UI not only visually appealing but also highly functional and intuitive.
The Application Tier encapsulates all the business logic and gameplay mechanics using client-
side JavaScript. This layer manages galaxy creation, node positioning, black hole assignment,
and inter-node connectivity. Most importantly, it implements Dijkstra’s algorithm to compute
the shortest viable path from the spaceship to Earth, effectively bypassing black holes which
are treated as high-cost or impassable nodes. It also includes features like black hole
teleportation, real-time validation of user-created paths, and dynamic path drawing. This logic
layer ensures that user decisions are processed accurately and efficiently, forming the core
intelligence behind the game.
The Data Tier is based on in-memory JavaScript data structures. Nodes and edges are
represented as objects and arrays, storing information like coordinates, node types, and
connection distances. This in-browser graph model supports real-time updates and fast
computation without the need for external databases. While currently limited to session-based
data, this architecture is flexible enough to be expanded later with persistent storage like
IndexedDB or server-side databases if needed. This tier acts as the foundational layer for all
computations and visual renderings, enabling a responsive and logically consistent
experience throughout the application lifecycle.
Fig 3: Architecture
1. Generate Galaxy
o The system creates a random galaxy map with nodes (stars), including a
Spaceship (Start Node) and Earth (Destination Node). It also randomly
places Black Holes (danger zones).
2. Spaceship Starts Journey
o The player is located at the spaceship node. The UI waits for player interaction
to begin selecting a path.
3. Player Selects Path
o The player clicks on nodes to build a custom path toward Earth. The system
visually draws the path and calculates its total distance.
4. Check for Black Holes (Decision node)
o If the selected path intersects a black hole, the path is invalid and the message
shows “Mission Failed: Entered Black Hole.”
o If the path avoids all black holes, it proceeds to validation.
5. Reach Earth
o If the path successfully reaches the Earth node without hitting any black holes,
the system proceeds to validate the path.
6. Validate Path
o The system uses Dijkstra’s algorithm to compare the player path with the
optimal path.
7. Show Results
o It displays the length of the user’s path, the optimal path, and feedback on
success or failure.
Technologies Used
The frontend of the AstroNavigator project is primarily developed using HTML5, CSS3, and
JavaScript, which provide the structural foundation, styling, and interactivity of the user
interface. HTML defines the layout of the web application, while CSS3 is used to design
visually appealing elements, including gradients, animations, shadows, and responsive layouts.
To speed up and maintain a consistent aesthetic, the project uses Tailwind CSS, a utility-first
CSS framework that allows rapid development of modern and mobile-friendly UI components.
JavaScript is responsible for rendering dynamic interactions such as click events, DOM
manipulation, and managing the logic for drawing paths, updating node statuses, and animating
stars in the background.
On the graphical side, the application utilizes the Canvas API in conjunction with JavaScript
to create the starfield background that animates and moves, giving users the immersive illusion
of navigating a galaxy. Furthermore, SVG elements are employed to render inter-node
connections, paths, and the optimal routes. These visual components are layered with precise
z-index control to maintain clarity between the star map and user interface elements. The
interface also dynamically adjusts to various screen sizes using responsive design techniques,
ensuring a seamless experience across desktops and mobile devices.
The core business logic is written in JavaScript, where functions manage user interactions,
galaxy generation, and pathfinding logic. A significant component of this is the implementation
of Dijkstra’s algorithm, which calculates the shortest path from the spaceship to Earth,
avoiding black holes. The algorithm is designed to interpret the galaxy as a weighted graph,
where each star node is connected to neighbors by edges representing distance. The optimal
path is determined by traversing these nodes while excluding any that represent black holes.
The player’s custom path is compared against the optimal one for validation, and alerts or
messages are displayed based on real-time logic processing handled by JavaScript functions.
The application architecture follows a single-page application (SPA) approach without any
backend server integration, meaning all logic and rendering are handled entirely within the
browser. Although this version does not store persistent data, it simulates a real-time system
by dynamically generating and modifying nodes and paths based on user interactions. Future
enhancements could include backend integration using Node.js, Express, and MongoDB for
data persistence, leaderboard tracking, or saved maps. Moreover, if converted into a larger-
scale educational or gaming app, frameworks such as Vue.js or React can be adopted for
component-based structure and scalability.
In summary, AstroNavigator combines core web technologies like HTML5, CSS3, JavaScript,
and Tailwind CSS with algorithmic logic and canvas-based visuals to deliver a dynamic and
interactive pathfinding game. The project architecture demonstrates effective use of client-side
technologies and emphasizes modularity, visual clarity, and real-time decision making,
providing a foundation for both learning and expansion into more complex web applications.
Description of Each Tier
Presentation Layer
The Presentation Layer in the AstroNavigator – Galaxy Route Solver acts as the user-facing
interface that allows players to interact with the galactic map and engage in the space
exploration experience. This layer is designed using HTML5 and styled with Tailwind CSS,
ensuring a modern, responsive, and visually immersive environment. JavaScript plays a crucial
role in managing UI interactions, such as generating galaxy maps, drawing connections
between nodes, plotting user paths, and animating background elements like moving stars. The
interface is intuitive, displaying nodes for the spaceship, Earth, black holes, and stars, each
represented with different colors and animations to enhance clarity. Real-time updates on
current positions, distances, and path status are provided through UI panels, offering users
instant feedback as they navigate. The use of dynamic SVG elements and canvas animations
further contributes to the visual richness, creating a seamless user experience that simulates a
futuristic space mission.
Application Layer
The Application Layer serves as the logical core of the AstroNavigator application, responsible
for handling gameplay mechanics, enforcing rules, and managing algorithmic decision-
making. Written entirely in JavaScript, this tier processes all user actions, such as node
selections, path validations, and black hole interactions. The most critical functionality in this
layer is the implementation of Dijkstra’s algorithm, which efficiently calculates the shortest
and safest path from the spaceship to Earth while avoiding black holes. The algorithm treats
the galaxy map as a graph with weighted edges and evaluates all valid paths, excluding nodes
identified as black holes by assigning them infinite cost. Additional business logic ensures that
only valid adjacent nodes can be selected, prevents looped paths, and allows for teleportation
effects when clicking on black holes. This layer dynamically updates UI elements like path
length, distance to Earth, and optimal route cost in real time based on player input and game
state, maintaining game integrity and user engagement.
Data Layer
While the AstroNavigator project does not use a traditional backend database, its data
management is handled entirely within the browser's memory through JavaScript variables and
data structures. The Data Layer is simulated through arrays and objects that store node
information, connections, user paths, and calculated routes. Nodes contain coordinates, types
(e.g., star, spaceship, Earth, black hole), and IDs, while edges store interstellar distances and
connectivity. This simulated data structure enables graph traversal and pathfinding without
requiring server calls, ensuring low latency and smooth gameplay. Future extensions could
integrate local storage or server-side storage using Node.js and MongoDB to persist high
scores, map states, or user profiles. For the current architecture, all CRUD operations (such as
creating nodes, updating positions, or removing paths) are performed directly in the browser's
runtime environment, making this tier lightweight, fast, and self-contained.
Integration Across Tiers
The integration of the Presentation, Application, and Data layers is seamless and client-side,
ensuring all components work together cohesively. When a user interacts with the UI — for
example, selecting nodes to plot a course — the Presentation Layer captures the event and
forwards it to the Application Layer, which validates and processes the action using pathfinding
logic. The resulting data (like the computed path length or optimal route) is stored temporarily
in memory by the Data Layer and visually reflected back in the Presentation Layer through
real-time updates. This clean separation of concerns enhances modularity, simplifies
debugging, and allows for future scalability. The unified communication between tiers ensures
that any change in one layer immediately reflects across others, providing a smooth and
interactive experience for users as they navigate through the stars and solve their galactic
mission.
IMPLEMENTATION
Key Features
The implementation of the AstroNavigator – Galaxy Route Solver project begins with the
construction of the galactic map using HTML, CSS (Tailwind), and JavaScript. The map is
modeled as a graph, where each node represents a celestial object such as stars, black holes,
the spaceship's current location, and Earth (the final destination). These nodes are visually
rendered as circles using scalable vector graphics (SVG), each with unique colors and labels to
distinguish their type. The connections between nodes (edges) are represented as lines and are
assigned weights based on hypothetical space distances. This setup allows users to visually
interpret the galaxy as a network of interconnected space routes.
The main logic driving the gameplay experience resides in the JavaScript codebase. When a
user starts the simulation, they are presented with the full galactic map. Upon clicking the “Find
Path” button, Dijkstra's algorithm is triggered. This algorithm calculates the shortest path from
the spaceship node to the Earth node while avoiding any nodes classified as black holes. The
algorithm assigns infinite cost to black hole nodes, effectively excluding them from all valid
path calculations. Once the shortest path is determined, it is visually highlighted on the screen
with color changes and directional cues, providing the user with a real-time solution to the
navigation puzzle. Additionally, the total number of steps and total distance to Earth is
calculated and displayed as feedback to the user.
Interactive features such as real-time node selection, error alerts for invalid paths, and dynamic
animations are managed using JavaScript event listeners and DOM manipulation. The canvas
updates automatically without page reloads thanks to the use of reactive updates and well-
structured modular JavaScript functions. Functions are organized to handle specific tasks like
initializing the graph, identifying neighbors, avoiding obstacles (black holes), resetting the
board, and recalculating paths upon user interaction. Helper functions also manage UI updates,
such as displaying the selected route and toggling the color of visited nodes. This structured
logic flow ensures the game is intuitive, responsive, and engaging.
No backend server or database is used in the initial phase of the project; all data is managed
client-side through JavaScript objects and arrays. Nodes and their relationships are defined in
memory, allowing for rapid computation and rendering without latency. However, the
architecture is designed in a way that supports future expansion. For instance, features like
saving high scores, customizing maps, or generating dynamic galaxies can be introduced later
using a backend built with Node.js and MongoDB. In its current form, the entire project is
lightweight, fully browser-based, and designed to run efficiently across devices, making it an
accessible and enjoyable educational tool to demonstrate graph theory, pathfinding algorithms,
and obstacle avoidance.
Fig 4: Home page (Generate new galaxy)
Fig 5 : Finding the optimal path
Fig 6: Validating the path
Backend Logic
Although the AstroNavigator – Galaxy Route Solver is implemented entirely in a frontend
environment using HTML, CSS, and JavaScript, it effectively simulates traditional backend
logic within the browser. The primary logic layer mimics the functions of a backend by
handling all data processing, state management, validation, and algorithm execution in the
client-side JavaScript code. The heart of the system is the implementation of Dijkstra’s
algorithm, which acts as the backend’s pathfinding engine. When a galaxy is generated, each
node (star, black hole, Earth, spaceship) is stored in an in-memory data structure, with each
edge between nodes holding a distance value. Upon the user's request to find a route, the system
dynamically constructs a graph and computes the shortest safe path from the spaceship to Earth,
avoiding black holes by treating them as impassable (infinite cost) nodes.
This logical layer also handles complex conditional flows that mirror backend services. For
example, the application ensures that users cannot select a path that bypasses galaxy rules —
such as skipping connections or traveling through black holes. It enforces validation rules for
path selection, checks node connectivity, prevents invalid transitions, and gives feedback
messages. The logic also supports dynamic updates to the galaxy, such as repositioning black
holes or redrawing edges after interaction. These backend-equivalent features are achieved
through JavaScript functions that perform decision-making, data validation, and real-time
computations similar to how backend APIs would respond in a traditional three-tier
architecture.
Additionally, the internal state of the game — such as the player's current route, galaxy
configuration, and optimal path — is stored and updated using variables and event-driven
functions. This logic layer handles all operations, including regenerating the map, computing
path lengths, and validating the user-selected route against the algorithmically determined
optimal path. While this is all managed on the frontend, the separation of concerns is preserved,
with the algorithm and game state logic effectively acting as a self-contained backend logic
module within the application.
To extend this backend further in future iterations, the current architecture allows seamless
integration with real backend technologies such as Node.js, Express, and a database like
MongoDB or Firebase. These could be used to persist player scores, store galaxy
configurations, or even allow multiplayer path-solving challenges. But in its current design,
AstroNavigator offers a rich and interactive simulation of backend logic entirely through client-
side scripting, providing an efficient and educational example of how complex processing and
business logic can exist without a dedicated server.
Database Design
In the AstroNavigator – Galaxy Route Solver project, a traditional persistent database system
is not used, as the entire application runs in the browser using HTML, CSS, and JavaScript.
However, the project simulates a dynamic in-memory data model that functions similarly to a
real database. This simulated "database" is created through structured JavaScript objects and
arrays that store all essential data during the game session. When a new galaxy is generated,
nodes representing stars, black holes, the spaceship, and Earth are created and stored as objects
in an array. Each node holds properties such as a unique ID, coordinates (x, y), and type (e.g.,
star, black hole, earth, spaceship). The edges or connections between nodes are stored in a
separate array of objects, each representing a path with distance values calculated based on
Euclidean distance. These two arrays work in conjunction to model the graph structure of the
galaxy — functioning similarly to relational tables in a database.
The galaxy’s state — including the list of black holes, the current player path, and the shortest
algorithmically computed route — is also managed as part of the in-memory data model. This
enables fast access and manipulation of game data without reloading the page or requiring
server communication. While no SQL or database schema is explicitly used, the system’s logic
imitates many aspects of real-world database interactions, such as Create, Read, Update, and
Delete (CRUD) operations on game elements. For instance, when a black hole is clicked and
repositioned, its corresponding "record" (i.e., object in the array) is updated, and the visual
representation in the galaxy map is re-rendered accordingly.
If extended to a full-stack system in the future, a database like MongoDB (for flexibility with
JSON-like documents) or MySQL (for structured, relational data) could be used to persist
galaxy maps, track player solutions, log time-based gameplay metrics, or enable multi-user
leaderboards. Such an implementation would involve storing nodes and edges as records in
separate collections or tables, maintaining relationships between them through identifiers. For
example, a "nodes" table would contain columns for ID, type, and position, while an "edges"
table would store references between node IDs along with distance values.
In summary, although AstroNavigator currently uses a simulated in-browser data structure
instead of a formal backend database, the approach is modular and can be easily adapted to
integrate a real-time, persistent database in future enhancements. This flexible and structured
use of JavaScript for data modeling demonstrates the potential of managing state and
simulating database interactions entirely on the client side.
FUTURE SCOPE
1. Multiplayer Mode Integration: Introduce a competitive or cooperative multiplayer
feature where multiple users can navigate their own ships across the galaxy, comparing
paths or collaborating to find optimal routes.
2. AI-Powered Path Prediction: Implement artificial intelligence or machine learning to
predict smarter paths based on player behavior and dynamically changing map
conditions (e.g., moving black holes or variable distances).
3. Enhanced Black Hole Mechanics: Add more complex behavior to black holes such
as movement across the map, gravitational pull zones, or teleportation effects to
increase challenge and engagement.
4. Galaxy Customization Tools: Allow users to design and share custom galaxy maps
with adjustable node count, edge weight, and hazard density to promote community
engagement and varied gameplay.
5. Augmented Reality (AR) and VR Support: Extend the experience into AR or virtual
reality environments to give players a more immersive spatial understanding of the
galaxy navigation problem.
6. Level Progression and Challenges: Introduce game levels or missions with increasing
difficulty, objectives (e.g., rescue stranded ships, collect resources), and rewards to
make the experience goal-driven and replayable.
7. Advanced Pathfinding Algorithms: Expand beyond Dijkstra’s algorithm by including
A*, Bellman-Ford, or genetic algorithms to support more complex environments or
optimize additional factors like fuel cost or time.
8. Mobile App Deployment: Develop mobile-friendly versions of the game using
responsive design or native wrappers (e.g., using Capacitor or Flutter) to reach a wider
user base.
9. Space Weather Simulation: Add random elements like asteroid fields, solar flares, or
space storms that dynamically affect available routes and encourage strategic rerouting.
10. Analytics Dashboard for Educators: Provide analytics and path visualizations for
educational institutions using the simulation as a teaching tool for graph theory, shortest
path algorithms, or space science.
CONCLUSION
The AstroNavigator – Galaxy Route Solver project is a unique simulation-based web
application that blends interactive gameplay with computational logic. At its core, the system
challenges users to find the shortest and safest route from a spaceship’s starting point back to
Earth, navigating a randomly generated galaxy filled with stars and hazardous black holes. By
using Dijkstra’s algorithm for optimal pathfinding, the application demonstrates how classical
algorithms can be applied in a fun and engaging way. Users learn to make strategic decisions
by understanding spatial relationships and consequences, such as avoiding nodes that represent
black holes.
The project utilizes a well-structured multi-tier architecture: the Presentation Layer offers an
immersive and responsive interface using HTML, CSS, and JavaScript; the Application Layer
processes the logic behind path validation, galaxy generation, and user input; and the Data
Layer—though minimal—handles node management in memory. This separation of concerns
allows for a scalable and maintainable codebase that can support future enhancements. Features
like real-time line drawing for user paths, solution comparison, and dynamic visual feedback
enhance user engagement while reinforcing core programming and problem-solving concepts.
In summary, AstroNavigator achieves its objective of combining educational content with
intuitive design and interactivity. It is a testament to how algorithmic learning can be made
accessible and enjoyable through gamification. The project lays a strong foundation for future
extensions such as AI-controlled navigators, advanced galaxy configurations, or even real-
world graph-based applications. It offers not just a solution-finding tool, but an experience that
deepens the user’s understanding of algorithms, design patterns, and system integration in a
visually rich environment.
