https://github.com/akunna1/ig-automatic-quiz-grader
A tool that automatically grades my Instagram quizzes, saving time and providing instant results.
https://github.com/akunna1/ig-automatic-quiz-grader
nextjs tailwindcss usestate-hook vercel-deployment
Last synced: 2 months ago
JSON representation
A tool that automatically grades my Instagram quizzes, saving time and providing instant results.
- Host: GitHub
- URL: https://github.com/akunna1/ig-automatic-quiz-grader
- Owner: akunna1
- Created: 2025-07-23T18:44:37.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2025-07-23T20:17:42.000Z (3 months ago)
- Last Synced: 2025-07-23T22:04:12.718Z (3 months ago)
- Topics: nextjs, tailwindcss, usestate-hook, vercel-deployment
- Language: TypeScript
- Homepage: https://ig-automatic-quiz-grader.vercel.app/
- Size: 36.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Instagram Quiz Grader 🎉
A colorful and interactive automatic quiz grader built with React and Next.js for tracking my Instagram quiz scores. Designed with a playful Cocomelon-inspired theme to keep it fun and engaging while being fully functional and responsive.
---
## Features
* Editable usernames for each player
* Increment and decrement buttons for **Red** and **Blue** scores
* Real-time calculation and display of the score difference (Blue - Red)
* Reset button to reset individual player scores to zero
* Responsive design for mobile, tablet, and desktop
* Bright, pastel Cocomelon-inspired colors with smooth hover effects
* Accessible buttons with aria-labels for better usability
---
## Tech Stack
* **Next.js** (React framework)
* **React** with hooks (`useState`)
* **Tailwind CSS** for styling and responsive layout
* Might add a database in the future 🤔
---
## Getting Started
1. **Clone the repository**
```bash
git clone https://github.com/akunna1/IG-Automatic-Quiz-Grader.git
cd ig-grader
```
2. **Install dependencies**
```bash
npm install
# or
yarn
```
3. **Run the development server**
```bash
npm run dev
# or
yarn dev
```
4. **Open in browser**
Navigate to `http://localhost:3000` to view the scoreboard.
---
## Usage
* Click on any username to edit it inline.
* Use the red and blue `+` and `−` buttons to update scores.
* The difference column updates automatically.
* Click **Reset** to clear a player’s scores.
---
## Customization
* Update `initialPlayers` array in the component to add or remove players.
* Modify Tailwind classes in the component for custom styling or theme changes.
---
## Contributing
Feel free to open issues or pull requests to improve the scoreboard!