[Q106] Quest Page UI

Brief

Code-quests is a platform that helps businesses publish projects (called Quests) and ask a community of developers and designers to compete to build the best, highest-quality implementation or design.

The goal of this Quest is to develop a frontend application with two separate pages that facilitate the quest experience for participants. The first page will serve as a Quest List page, displaying all available quests, while the second page will provide Quests Details for a selected quest. The second page should include options to register for a quest and submit entries. The application should offer the same functionality as the current CodeQuest website

The Quest List page will showcase a comprehensive list of quests available on the platform. Each quest should be presented with its title, a field, prizes, and technologies needed. Participants should be able to browse through the list and select a quest they are interested in and will navigate to the second screen displaying its details. Also, users can filter the list and search through them.

Upon selecting a quest from the Quest List page, users will be directed to the Quest Details page. This page will provide detailed information about the selected quest, including specific requirements, guidelines, and scoring criteria. The UI of the Quest Details page should dynamically render controls based on the technologies or skills that will be evaluated for that quest. The page should include both a "Register" button for participants to officially enter the quest and a "Submit" button for submitting their completed implementation or design. 

Requirements

1. Use TypeScript or modern JavaScript and React.

2. The theme to follow will be provided in the design document.

3. The whole application should include single HTML, JS, and CSS files or to be packed (webpack or other) into a single file.

Tasks

A detailed Design document will be shared with competitors after they register, the document will list the detailed use cases as follows:

1. Show a list of all quests.

2. Filtration and Search.

3. navigate to quest details.

4. Register and Submit button on the details page.

Acceptance Criteria

Please read the Scorecard to see how the winners will be selected, and how we evaluate the best code submission.

• Minimum acceptable score is 80 (80% of 100). First, Second, and Third place will be the highest score above 80.

• If two submissions earn the same score, the first submission will get the highest place.