Pin It | Custom Quiz Web-App

Description

Pin It is a web application designed to assist users in their studies. It provides a platform for creating quizzes, testing oneself, and tracking progress. With its comprehensive CRUD system and optimized features, Pin It makes excelling in classes easier than ever before. Whether you're a student looking to reinforce your knowledge or a teacher wanting to create interactive quizzes, Pin It has got you covered.

Project Build

• Firebase
• Vite
• React
• TypeScript
• Chakra

Installed Dependencies

To run the project, make sure you have the following dependencies installed:

• npm create vite@latest
• npm install vite
• npm install firebase
• npm install react-router-dom
• npm install @hookform/resolvers yup
• npm install valtio
• npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
• npm install @react-spring/parallax
• npm install -g firebase-tools

Key Features

• Create custom quizzes
• Test yourself with interactive quizzes
• Track and monitor progress
• Comprehensive CRUD system for quizzes
• Optimized features for an enhanced user experience

History

• 05/20/2023:

  • Implemented Start Quiz using multiform custom hook.
  • Finished implementing Multiform Quiz session.
  • Added background music to the Homepage, Quiz Creation Page, and Quiz Session Page.
  • Quiz results are now shown after every quiz session.
  • Started drafting UI to view quizzes. Working out logic to delete specific quizzes.
  • Contemplating whether or not to allow edits to quizzes.
  • Implemented deletion of quizzes and added several modals.
  • Starting deployment via Firebase with open-source code...

• 05/19/2023:

  • Set up Firebase and linked it to the project.
  • Implemented Registration and Login Popups.
  • Implemented user authentication.
  • Setup Chakra provider to visually handle errors and improve the user experience.
  • Implemented Home Page Styling.
  • Added filtering for selecting a certain quiz.
  • Added the ability to create new quizzes along with flashcards.
  • Added framer-motion elements to enhance the user experience.
  • Installed React Parallax library for parallax backdrop.

• 05/18/2023:

  • Bootstrapped the project with React Vite and set up Firebase.
  • Completed landing page and customization.
  • Outlined the user interaction flow.

License

This project is licensed under the MIT License.

---

Pin It | © 2023, Josh Ratificar. All rights reserved.