A modern, interactive Secret Santa gift exchange application built with Vue 3 and Vite
- About
- Features
- Demo
- Screenshots
- Getting Started
- Docker Deployment
- Usage
- Development
- Tech Stack
- Project Structure
- Contributing
- License
- Contact
Santa Draw is a web-based Secret Santa organizer that makes it easy to set up and manage gift exchanges for any group size. Whether it's for your office party, family gathering, or friend group, Santa Draw handles the random assignments while ensuring everyone gets a perfect match.
- 🎲 Random Assignment - Automated and fair Secret Santa matching
- 👥 Group Management - Create and manage multiple Secret Santa groups
- 🔒 Privacy Focused - Secure gift assignments that stay secret
- 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile
- 🎨 Modern UI - Clean and intuitive user interface
- ⚡ Fast Performance - Built with Vite for lightning-fast load times
- 🌐 Multi-language Support - (if applicable)
- 📧 Email Notifications - (if applicable)
Before you begin, ensure you have the following installed:
- Node.js (v16.0 or higher)
- npm (v8.0 or higher) or yarn (v1.22 or higher)
# Check your Node.js version
node --version
# Check your npm version
npm --version- Clone the repository
git clone https://github.com/yourusername/santa_draw.git
cd santa_draw- Install dependencies
npm install- Configure environment variables (if needed)
# Copy the example env file
cp .env.example .env
# Edit .env with your settings
nano .env- Start the development server
npm run dev- Open your browser
Navigate to http://localhost:5173 (or the port shown in your terminal)
- Docker (20.10 or higher)
- Docker Compose (2.0 or higher)
- Configure environment variables
# Create .env file if it doesn't exist
cp .env.example .env
# Edit .env with your settings
nano .env- Build and run with Docker Compose
# Build and start the container
docker-compose up -d
# View logs
docker-compose logs -f
# Stop the container
docker-compose down- Access the application
The application will be available at http://localhost:3000
# Build the image
docker-compose build
# Start in background
docker-compose up -d
# Start in foreground (see logs)
docker-compose up
# Stop containers
docker-compose down
# View logs
docker-compose logs -f
# Restart container
docker-compose restart
# Rebuild without cache
docker-compose build --no-cacheMake sure to configure your .env file before running Docker:
# Example .env file
VITE_API_URL=https://api.example.com
# Add other environment variables as neededImportant: The .env file is already in .gitignore and will not be committed to the repository. Make sure to create and configure it before running Docker.
For production deployment, you can use the same Docker setup:
# Build for production
docker-compose build
# Run in production mode
docker-compose up -dThe Docker setup uses:
- Multi-stage build for optimized image size
- Node.js 20 Alpine for minimal image size
- serve package for production-ready static file serving
-
Create a New Draw
- Click on "New Draw" button
- Enter the event name and date
- Add participant names and email addresses
-
Generate Assignments
- Review your participant list
- Click "Generate Assignments"
- The system will randomly match participants
-
Share Results
- Each participant receives their assignment
- Results remain confidential
- Share the draw link with participants
# Run with custom port
npm run dev -- --port 3000
# Build for production
npm run build
# Preview production build
npm run preview# Install dependencies
npm install# Start development server with hot-reload
npm run dev
# Build for production
npm run build
# Preview production build locally
npm run preview
# Run tests (if configured)
npm run test
# Lint and fix files
npm run lintThis project follows the Vue.js style guide and uses ESLint for code quality.
# Check code style
npm run lint
# Auto-fix issues
npm run lint:fix- Vue 3 - Progressive JavaScript Framework
- Vite - Next Generation Frontend Tooling
- JavaScript/ES6+ - Modern JavaScript
- Vue DevTools - Browser DevTools extension
- ESLint - Code quality tool
- Prettier - Code formatter (if configured)
- VS Code with:
- Vue - Official (Volar)
- Disable Vetur if installed
Chromium-based browsers (Chrome, Edge, Brave):
Firefox:
santa_draw/
├── public/ # Static assets
├── src/
│ ├── assets/ # Images, styles, fonts
│ ├── components/ # Vue components
│ ├── views/ # Page components
│ ├── router/ # Vue Router configuration
│ ├── store/ # State management (if using Pinia/Vuex)
│ ├── utils/ # Utility functions
│ ├── App.vue # Root component
│ └── main.js # Application entry point
├── .gitignore
├── index.html # HTML entry point
├── package.json # Dependencies and scripts
├── vite.config.js # Vite configuration
└── README.md # This file
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Write clean, readable code
- Follow the existing code style
- Add comments for complex logic
- Test your changes thoroughly
- Update documentation as needed
Distributed under the MIT License. See LICENSE file for more information.
Linkedin - https://www.linkedin.com/in/hakan-budak-7ab3071b5/
Project Link: https://github.com/hakanbudak/santas_draw_frontend
- Vue.js - The Progressive JavaScript Framework
- Vite - Next Generation Frontend Tooling
- Font Awesome - Icon library (if used)
- All contributors who have helped this project grow!