Skip to content

SoftySkills/quiz_app

Repository files navigation

⚛️ Next.js Quiz Platform 📝 🚀

Welcome to the Next.js Quiz Platform! This interactive application allows users to create, manage, and share quizzes with customizable questions and answers.

Quiz Platform Banner

🔍 Overview

This quiz platform is built with Next.js and Supabase, offering a complete solution for creating and taking quizzes. Users can sign up, create quizzes with various question types, publish them for others to take, and view results.

The platform features a clean, responsive UI built with Ant Design and Tailwind CSS, with a focus on usability and performance.

📚 What You'll Learn

By exploring this codebase, you'll learn how to:

  • Build a full-stack application with Next.js and Supabase
  • Implement authentication and authorization
  • Create dynamic forms with validation
  • Manage complex state with React Query
  • Implement drag-and-drop functionality with DND Kit
  • Create responsive layouts with Ant Design and Tailwind CSS
  • Deploy a Next.js application with database integration

🛠️ Tech Stack

  • Next.js: React framework for server-rendered applications
  • TypeScript: For type safety and better developer experience
  • Supabase: Backend-as-a-Service for authentication and database
  • React Query: For server state management
  • Ant Design: UI component library
  • Tailwind CSS: Utility-first CSS framework
  • DND Kit: Drag and drop toolkit for React
  • React Hook Form: Form validation library

💻 Features

  • User Authentication: Sign up, login, and user profile management
  • Quiz Creation: Create quizzes with title, description, and cover image
  • Question Management: Add, edit, and reorder questions with drag-and-drop
  • Multiple Question Types: Support for two-choice, four-choice, and text input questions
  • Quiz Publishing: Publish quizzes to make them available to others
  • Quiz Taking: Interactive interface for taking quizzes
  • Results Review: Detailed feedback on quiz performance
  • Responsive Design: Works on desktop and mobile devices

🧠 Project Structure

quiz-platform/
├── app/                  # App Router directory
│   ├── login/            # Login page
│   ├── quizzes/          # Quiz-related pages
│   │   ├── [id]/         # Individual quiz pages
│   │   │   ├── published/# Published quiz view
│   │   │   ├── preview/  # Quiz preview
│   │   ├── new/          # New quiz creation
│   ├── layout.tsx        # Root layout
│   └── page.tsx          # Home page
├── api/                  # API functions
│   ├── hooks/            # React Query hooks
│   ├── supabase/         # Supabase API functions
├── components/           # Reusable components
│   ├── quiz/             # Quiz-related components
├── lib/                  # Utility functions and shared logic
│   ├── auth.tsx          # Authentication provider
│   ├── supabase.ts       # Supabase client
│   ├── types.ts          # TypeScript types
├── public/               # Static assets
├── next.config.js        # Next.js configuration
├── package.json          # Project dependencies
└── tailwind.config.js    # Tailwind configuration

📦 Installation

Prerequisites

  • Node.js 18 or later
  • npm, yarn, or pnpm
  • Supabase account

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors