Frontend Quiz Application

A modern, accessible quiz application built with Nuxt 3 that tests your knowledge on frontend development topics including HTML, CSS, JavaScript, and Accessibility.

🔗 Live Demo

Check out the live application: Frontend Quiz App

✨ Features

• Multiple Quiz Categories: HTML, CSS, JavaScript, and Accessibility
• Interactive Quiz Interface: Answer questions and receive immediate feedback
• Score Tracking: Track your performance across quizzes
• Responsive Design: Works seamlessly on mobile, tablet, and desktop devices
• Dark/Light Mode: Toggle between theme preferences
• Full Accessibility Support: WCAG compliant with proper keyboard navigation, ARIA attributes, and screen reader support
• Server API: Backend API for serving quiz questions and checking answers
• State Management: Using Pinia for robust state management

🛠️ Technologies Used

• Nuxt 3 - Vue.js framework for server-side rendering and static site generation
• Vue 3 - Progressive JavaScript framework with Composition API
• TypeScript - For type safety and improved developer experience
• Tailwind CSS - Utility-first CSS framework for custom, responsive design
• Pinia - State management solution for Vue 3
• Vercel - For deployment and hosting

📋 Prerequisites

• Node.js (v18 or later recommended)
• Git

🚀 Getting Started

Clone the Repository

git clone https://github.com/thanasispro/quiz-app.git
cd quiz-app

Install Dependencies

# Using npm
npm install

# Using pnpm
pnpm install

# Using yarn
yarn install

# Using bun
bun install

Run Development Server

Start the development server on http://localhost:3000:

# Using npm
npm run dev

# Using pnpm
pnpm dev

# Using yarn
yarn dev

# Using bun
bun run dev

Build for Production

# Using npm
npm run build

# Using pnpm
pnpm build

# Using yarn
yarn build

# Using bun
bun run build

Preview Production Build

# Using npm
npm run preview

# Using pnpm
pnpm preview

# Using yarn
yarn preview

# Using bun
bun run preview

🧩 Project Structure

• assets/ - Static assets including images and fonts
• components/ - Reusable Vue components
• composables/ - Shared composition functions
• layouts/ - Page layouts
• pages/ - Application pages and routes
• server/ - Server API routes and data
• store/ - Pinia state management stores
• types/ - TypeScript type definitions

🖥️ Application Screenshots

🔒 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

Thanasis Protopapas

• GitHub: @thanasispro
• Portfolio: [Add your portfolio link here]
• LinkedIn: [Add your LinkedIn profile link here]

🙏 Acknowledgments

• Nuxt.js - For the amazing framework
• Tailwind CSS - For the utility-first CSS framework
• Vue.js - For the progressive JavaScript framework
• Vercel - For hosting and deployment

---

Made with ❤️ by Thanasis Protopapas