Create a SPA Router for Client-Side Navigation

[thejackshelton-kunaico]

Create a SPA Router for Client-Side Navigation in a fake JS framework

Description

Implement a Single Page Application (SPA) router that handles client-side navigation for a new (fake) JavaScript framework. The router should enable navigation between different views without page refreshes while supporting browser history and URL changes.

Feel free to use cursor IDE to implement the changes, as long as you work through and understand the system.

@PatrickJS-kunaico will be. reviewing all the code next week.

Expected finish time:

2-3 days (as you can use AI for each step)

Examples of features you can add:

Core Functionality

• Create a router that manages route registration and navigation
• Support for client-side navigation between routes without page refreshes
• Add support for browser history (back/forward navigation)
• Handle initial route on page load
• Implement a 404/not found handler for unmatched routes

Route Features

• Support for parameterized routes (e.g., /users/:id)
• Route guards/middleware for authentication or other checks
• Support for nested routes
• Hash-based routing option (#/route) for legacy browser support

API Design

• Method to register routes with path patterns and handler functions
• Public navigation method that updates both the URL and content
• Event system for route change events (before/after)

Acceptance Criteria

• Simple unit test for each major feature
• Router must work without requiring page refreshes
• Browser history must work correctly (back/forward buttons)
• URL must update when routes change

Technical Details

• Create a simple demo page showcasing the router functionality

Pseudocode file structure

• router.js - The main router implementation
• tests.js - Unit tests for router functionality
• index.html - Demo page showing router in action
• README.md - Documentation on how to use the router

Testing Requirements

• A simple unit test for each feature

Git Requirements

• Use meaningful commit messages
• Ensure all commits are visible for code review

Additional Notes

• This router will be reviewed in next week's code review session
• Be prepared to explain the implementation details and design decisions