Introducing Quizco: Quiz Builder + Assessment Tool

Introducing Quizco, a quiz builder and assessment tool for teachers and creators to create, try, and test question sets for their audience. Not only can you create quizzes for your audience, but you can also participate in quizzes provided by other creators.

This is my submission for Netlify x Hashnode Hackathon.

Inspiration

As everything went online in the past few years, whether it was education in schools or colleges, most tests and exams were taken in Google Forms or in a similar manner. I did not like that experience, so I wanted to build a solution for it, and that is how Quizco was born.

Tech Stack (MERN)

Frontend

React
Clerk (Authentication)
React Query (API Requests)
Formik & Yup (Form Validation & Submission)

Backend

Node
Clerk (Clerk SDK for Node)
MongoDB (NoSQL Database)
Express

Features

Quizzes Page

A page where you can find quizzes curated for you by the community. From here, you can also go ahead and create your own set of questions and share them with your peers. Each quiz comes with tags to help you build a community around your niche. Use pagination to navigate through all the lists.

Dashboard Page

As a Quizco creator, this is the place for you to keep track of your work. For every quiz, there are options to view statistics, update quiz details, add or update questions, or delete them. You can also keep track of your attempts on other creators' work.

Player Screen

Only first attempts to a quiz are recorded for a user. You can mark your response (you can even change your response before submitting the quiz) and traverse using pagination buttons or the question numbers in the sidebar.

Statistics Screen

The Statistics page is where you'll be able to check and keep track of your quizzes. Moreover, Quizco lets you download the report in Excel, CSV, and PDF formats as well.

Question Statistics Screen

Here you can see the frequency of responses from all first attempts of users for a question in a quiz.

Key Takeaways

MongoDB Aggregations.
Improving my TypeScript implementation.
Handling Complete Global State with only React Query.
Working with Clerk in MERN Stack.
Exporting Excel, PDF, CSV, and working with AG Grid.