Study Sets - BeachHacks 8.0

A Next.js application for quiz generation and subject management using AI.

Authors

Lucas Amberg and Tylor Franca

Results

Winner!

Study Sets took home 1st place in the Beginner Track and 2nd place in the DAIN AI track.

Thank you so much for all organizers for setting up and carrying out this event, we really appreciate all the effort, mentorship, and support from the organizers and other competitors.

You can view our submission on Devpost here!

Description

This application allows users to generate quizzes from different study material across various categories and subjects, leveraging AI to create content and categorize educational topics.

Technologies and Libraries Used

Core Framework and Runtime

• Next.js - React framework with server-side rendering and static site generation
• React - JavaScript library for building user interfaces

Database and Authentication

• Supabase - Open source Firebase alternative providing database and authentication services

AI and Machine Learning

• OpenAI - AI model integration for quiz generation and subject categorization

UI Components and Styling

• Radix UI - Headless UI component primitives
  • Including: Accordion, Alert Dialog, Aspect Ratio, Avatar, Checkbox, Collapsible, Context Menu, Dialog, Dropdown Menu, Hover Card, Label, Menubar, Navigation Menu, Popover, Progress, Radio Group, Scroll Area, Select, Separator, Slider, Slot, Switch, Tabs, Toggle, Toggle Group, Tooltip
• Tailwind CSS - Utility-first CSS framework
  • With tailwind-merge and tailwindcss-animate
• Lucide React - Icon library
• Framer Motion - Animation library
• Sonner - Toast notifications
• Next Themes - Theme management
• cmdk - Command menu component
• PrimeReact - UI component library with PrimeIcons
• Vaul - Drawer component
• Embla Carousel - Carousel component
• React Confetti - Confetti animation
• React Day Picker - Date picker component
• React Resizable Panels - Resizable panels

Form Handling and Validation

• React Hook Form - Form handling
• Zod - TypeScript-first schema validation
• Hookform Resolvers - Validation resolvers for React Hook Form
• input-otp - One-time password input component

Data Processing and Visualization

• PDF.js - PDF rendering
• React PDF - PDF viewer component
• libreoffice-convert - Document conversion
• date-fns - Date manipulation
• Recharts - Charting library
• UUID - UUID generation
• heic2any - HEIC image conversion
• Canvas - Node.js canvas implementation

File Handling

• React Dropzone - File upload component

HTTP Requests

• Axios - Promise-based HTTP client

Developer Tools

• TypeScript - JavaScript with syntax for types
• ESLint - JavaScript linter
• Prettier - Code formatter

Installation

# Install dependencies
npm install

# Run the development server
npm run dev

Environment Variables

This project requires the following environment variables:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
OPENAI_API_KEY=your_openai_api_key

License

This project is private and not intended for redistribution.