Code Quest was one of my group projects at Dev Academy. Our goal was to create a quiz application to deepen our knowledge of both backend and frontend development while delivering a user-friendly experience for junior developers to learn through play.

These are the technics we have used in our project:

• SQLite3 was used to store the quiz questions and answers. The database schema included tables for questions and their corresponding answers.
• Knex was used to interact with the SQLite3 database. It helped in writing and executing SQL queries to manage the quiz data.
• React & Typescriptwas used to create the interactive user interface for the quiz application. Components were developed to display questions, manage user interactions, and update the UI based on user actions.
• CSS was used for the styling.

We designed the backend database to store quiz questions, with each entry containing one correct answer and three incorrect answers. We ensured that the correct answer was always the first element in the array to simplify handling it on the frontend. We also implemented a shuffle function to randomize the order of the options before displaying them on the screen.

I enjoyed this project because it was both fun and challenging. Working on features like displaying correct answers with a green background and incorrect answers with a red background, and managing these states in React, was particularly insightful.

As part of the group, my contributions included:

• FrontEnd: Collaborated in developing the frontend using React and CSS, ensuring a smooth user experience and an intuitive interface.
• Idea Implementation: Contributed to the idea of structuring the quiz. To avoid predictability, I implemented a shuffle function to randomize the options before displaying them.

After graduation, I decided to update the app by implementing new features:

• Score Counter Feature: Added a new scoring feature that awards +5 points for correct answers and deducts 2 points for incorrect answers, enhancing the quiz experience.
• Landing Page and Routing: Developed a conditional landing page that asks for the user's name and prints the name on the test page.
• Tailwind CSS: Installed and utilized Tailwind CSS to completely redesign and modernize the app’s styling.
• Celebration Function: Created a celebration function to add a fun element upon completion of the quiz, making the user experience more enjoyable.

• Question Management: Adding functionality to allow users to add new questions, as well as edit or delete existing questions, to enhance content flexibility and customization.
• User Authentication: Implementing user authentication to enable personalized experiences and secure access to question management features.
• Question Categories: Introducing categories or tags for questions to organize them into different themes or difficulty levels, improving the quiz's usability and variety.
• Celebration Function: Created a celebration function to add a fun element upon completion of the quiz, making the user experience more enjoyable.

These contributions reflect my ability to work effectively within a team and independently, showcasing my skills in frontend development and my commitment to continuous improvement.