Quests I created for Wilco Quest Builder Hackathon
Tags: wilco, webdev, beginners
Published: 2023-02-11 13:40:15

I participated in Wilco Quest Builder Hackathon in month of January. I created two quests in 5 days which were based on Frontend and debugging. Before I give a brief about my quests let me tell you about Wilco

## About Wilco

Wilco is a flight simulator for developers. As a beginner or even as a seasoned developer, it's easy to feel like you're not getting enough hands-on experience while learning to code or working on projects. You may not have an opportunity to dive into an existing codebase and make changes, whether it's adding a new feature, debugging issues in production, writing tests, deploying the code, and much more.

Wilco is a platform designed to give you that hands-on experience by presenting you with a series of quests.

## My first quest - Navigating the Unknown

![navigating the unknown cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0feqfhr9nploqmi19wlu.jpg)

Navigating the unknown is a journey that requires a keen eye for detail and a thoughtful approach. In this challenge, the user needs to investigate the issue that customers are seeing a blank screen when they navigate to /product route. After debugging they need to identify that the issue is in the routing configuration and add a 404 page to solve the issue.

This quest is divided in three steps
1. Uncovering The Mystery - User will identify the root cause of the issue. This will involve debugging the code and conducting thorough research to pinpoint the exact location of the problem.
2. Create A safety net - In this step user will implement a 404 page to catch any broken links or missing pages.
3. Rescue Route - User will add a link to home page in the 404 page.

{% embed https://www.youtube.com/watch?v=0oaULl7VDQk %}

You can try the quest [here](https://app.wilco.gg/catalog/quest/navigating-the-unknown)

## My second quest - Route to Victory
This quest is focused on securing private pages of Anythink using react-router-dom. The main task user will need to perform is to create a Private route component and use it to restrict access to the authenticated pages like the editor or settings page.


![Route to victory cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0l0a081odkvm0yd07vxa.png)

User will learn to add protected routing to safeguard your pages with ease. Using this quest you will be a routing expert in no time.

This quest is divided in three steps
1. Find the flaw: Identify the issue in routing that allows user to access the private page without authentication.
2. Guard the gates: Create a Private route component to restrict access to private pages for unauthenticated users.
3. Lock the gates: Use the Private route component to restrict access to private pages for unauthenticated users.

{% embed https://www.youtube.com/watch?v=RiFneJQz9P0 %}

You can try this quest [here](https://app.wilco.gg/catalog/quest/route-to-victory)


The process of creating a quest was challenging, but also incredibly rewarding. Throughout the experience, I learned the importance of planning and the process of dividing a complex problem into smaller, manageable steps. I also learned how an engaging narrative and choose the right skills that were required for the quest. 
I wrote a blog on creating quest which you can read [here](https://shwetakale.hashnode.dev/from-solving-to-creating)

I won first place in the Hackathon and a prize of $3000. I want to thank wilco team for organizing the Hackathon and I am looking forward to make new projects and keep improving my skills.

![prize cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wk9e3lhbo9svknuzxfrw.jpg)