Create routes for pages in Vanilla.js app

[blackgirlbytes]

Create routes for pages in Vanilla app

🔗 Dependencies

This issue is dependent on the completion of #82. Please ensure that issue is resolved before starting work on this task.

🚀 Goal

Implement Vanilla Router in our Vanilla.js application and set up the following routes, each rendering a specific word:

• / (Home page) - renders the word "Home"
• /about - renders the word "About"
• /settings - renders the word "Settings"

This will create the navigation structure for our Decentralized Web App (DWA) starter in Vanilla.

🤔 Background

We're expanding our DWA starter collection to include Vanilla.js. This task focuses on setting up the routing system, which is crucial for creating a multi-page application structure in our Vanilla.js DWA starter.

This is part of our larger project to create a Vanilla.js DWA starter. See our main issue here for the full context and list of all related tasks.

🔑 Tasks and Acceptance Criteria

• Install and set up Vanilla Router in the project
• Create placeholder components for Home, About, and Settings pages
• Implement the following routes:
  • / for the Home page, rendering the word "Home"
  • /about for the About page, rendering the word "About"
  • /settings for the Settings page, rendering the word "Settings"
• Create a navigation menu that allows users to switch between these routes
• Ensure that the correct component is rendered for each route, displaying the specified word
• Implement proper error handling for undefined routes (404 page)
• Ensure the routing system works without any console errors
• Create an automated Playwright test that verifies the routing functionality
  • Test should navigate to each route and confirm the correct word is displayed
  • Test should also verify that the 404 page is shown for undefined routes

🌟 Resources

• Vanilla JS Documentation
• Web5 Documentation
• Progressive Web Apps
• Playwright Testing

Getting Started

1. Comment ".take" on this issue to get assigned
2. Fork the repository and create a new branch for this task
3. Follow the tasks outlined above
4. Submit a pull request with your changes
5. Respond to any feedback during the review process

Questions?

If you have any questions or need clarification, please comment on this issue or join our Discord community.

Happy coding! 🎉

[29deepanshutyagi]

.take

[github-actions]

Thanks for taking this issue! Let us know if you have any questions!

[blackgirlbytes]

Hi @29deepanshutyagi, I seen you pick this up three days ago. Let us know if you're still interested in this issue or if we should reassign it! Thank you!

[29deepanshutyagi]

Yeah, working on it

[29deepanshutyagi]

Will soon raise a pr