Welcome to the Next.js Quiz Platform! This interactive application allows users to create, manage, and share quizzes with customizable questions and answers.
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.
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
- 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
- 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
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
- Node.js 18 or later
- npm, yarn, or pnpm
- Supabase account
