Table of contents
- Application Workflow
- 🛠 Tech Stack (MERN)
- 🦾 Building Quizco
- 🍾 Deployment
- 🎁 Key Takeaways.
- 🔮 Future Scope
- Helpful Resources:
Introducing Quizco, It's a Quiz Builder and Assessment Tool for people/teachers to try and test out their set of questions for their audience. Not only you can create quizzes for your audience but also participate in quizzes provided by other creators.
This is my submission for Netlify x Hashnode Hackathon 🔥.
As everything went online in the past few years, be it education in schools or colleges. All the tests and exams in colleges were taken in google forms or in some similar manner. And I did not like that, so I wanted to make a solution to cater for that and that is how Quizco was born.
🛠 Tech Stack (MERN)
- Clerk (Authentication)
- React Query (API Requests)
- Formik & Yup (Form Validation & Submission)
- Clerk (Clerk SDK for Node)
- MongoDB (NoSQL Database)
🦾 Building Quizco
- Boiler Plate [Node, React]
- Setup: Eslint, Prettier
- MongoDB Data Modeling
- Setting up Middlewares
- Client-Side Routing
- Added CORS.
- Routes Structure
- Defining Controllers
- Did the above steps multiple times.
- Components, React Query setup, API endpoints, and Integrations.
- Handle Quiz Play Logic
- State Handling
- Finishing Touch -: Landing Page
Landing Page: Kept it short but informative.
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. In case, you are looking for a specific quiz you can filter them based on tags. Each quiz comes with tags to help you build a community around your niche. To view it all, use pagination to navigate through all the lists.
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 details of your quiz, add/update questions or deletion. It is also where you can keep track of your attempts at other creators' work. Keep creating and have fun.
You can also create a quiz and view your responses to attempted quizzes.
With a broader view to your disposal, add new questions and replace previous ones easily as per your understanding.
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.
After you submit a quiz you are shown all the answers.
As a user, you don't have to worry about your history in Quizco, we have got you. Attempt as many quizzes as you like, make as many you want. All of your attempts are saved with us. Good luck!
Statistics Page is where you'll be able to check and keep a track of your quizzes. From who to how we cover it all. And do not worry, if you need to change questions after hosting it live. We will be updating the report accordingly so that you are clear with your data. Moreover, Quizco lets you download the report in Excel, CSV, and PDF format as well.
View All Questions Screen:
As an overview, you the Quiz Creator will be able to see all of your questions and check individual reports for every single one of them. And the best part, download them for future references.
Question Statistics Screen:
Here you can see the frequency of responses from all first attempts of users for a question in a quiz.
Finally, here is a demo showing the entire app rundown.
Frontend: Netlify Backend: Heroku
🎁 Key Takeaways.
- MongoDB Aggregations.
- Improving upon 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.
🔮 Future Scope
- Implement Infinite Scroll (Quizzes).
- Flag a question (if it's wrong).
- Add More filters (top 5 quizzes, sort by questions count, attempts count, etc).
I invite you to be a creator and have fun. While you are at it, let us know your experiences and suggestions. Your audience awaits.