Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kassiamabily/stack-quiz
The Stack Quiz App test Your Knowledge. Challenge yourself with interactive quizzes on various topics
https://github.com/kassiamabily/stack-quiz
education front-end frontend github interactive knowledge learning next-intl nextjs quiz stack tailwindcss test
Last synced: about 1 month ago
JSON representation
The Stack Quiz App test Your Knowledge. Challenge yourself with interactive quizzes on various topics
- Host: GitHub
- URL: https://github.com/kassiamabily/stack-quiz
- Owner: KassiaMabily
- Created: 2024-12-14T17:52:57.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-29T20:42:01.000Z (about 1 month ago)
- Last Synced: 2024-12-29T21:21:03.466Z (about 1 month ago)
- Topics: education, front-end, frontend, github, interactive, knowledge, learning, next-intl, nextjs, quiz, stack, tailwindcss, test
- Language: TypeScript
- Homepage: https://stack-quiz.vercel.app
- Size: 750 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Stack Quiz - Test Your Knowledge
_This preview shows the main interface of Stack Quiz, featuring a modern design with dark and light themes._
## 📑 Table of Contents
- [Overview](#-overview)
- [Features](#-features)
- [Technologies Used](#-technologies-used)
- [Run Project](#-run-project)
- [Live Demo](#-live-demo)
- [Author](#-author)
- [Attribution](#attribution)
## 💻 Overview
Stack Quiz is an interactive quiz application designed to test and improve your knowledge in various technology-related subjects. Built using modern frontend technologies, this project provides an engaging and responsive experience across all devices.
This is a solution to the [Frontend quiz app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/frontend-quiz-app-BE7xkzXQnU). Frontend Mentor challenges help you enhance your coding skills by working on real-world projects.
## ✅ Features
Stack Quiz offers a variety of features to enhance user engagement and accessibility:
- 📝 Select a quiz subject.
- 🎯 Choose the correct answer from multiple-choice options.
- 🚫 Receive error messages for incomplete submissions.
- ✔ Get instant feedback on your answers.
- 👉 Navigate seamlessly to the next question.
- 🎉 View your final score upon quiz completion.
- 🔁 Restart the quiz to select another topic.
- 📱 Enjoy a fully responsive design across all devices.
- 👀 Experience smooth hover and focus states.
- 🎮 Use the app entirely via keyboard navigation.
- 🌙 Toggle between light and dark themes.
## 🛠 Technologies Used
- **Framework**: Next.js (Canary)
- **ORM**: Prisma
- **Database**: PostgreSQL
- **Styling**: Tailwind CSS
- **State Management**: Context API
- **Deployment**: Vercel
## 🌐 Live Demo
Check out the live version of the app here: [Stack Quiz Demo](https://stack-quiz.vercel.app)
## 👉 Run Project
### Prerequisites
Ensure you have the following installed on your system:
- Node.js (LTS version recommended)
- pnpm
#### Setup and Run
1. Clone the Repository
```bash
$ git clone https://github.com/KassiaMabily/stack-quiz
$ cd stack-quiz
```
2. Environment Variables
```bash
$ cp .env.example .env
```
3. Install Dependencies
```bash
$ pnpm install
```
4. Run the App
```bash
$ pnpm dev
```
## 👥 Author
Kassia Fraga - Dezembro/2024
[](https://www.instagram.com/kassia.mabily/)
[](https://www.linkedin.com/in/kassia-fraga/)
## Attribution
- [Frontend Mentor](https://www.frontendmentor.io/challenges)
- [Icons made by meaicon](https://www.flaticon.com/authors/meaicon)