🎅 Santa Draw

A modern, interactive Secret Santa gift exchange application built with Vue 3 and Vite

📋 Table of Contents

• About
• Features
• Demo
• Screenshots
• Getting Started
  • Prerequisites
  • Installation
• Docker Deployment
• Usage
• Development
• Tech Stack
• Project Structure
• Contributing
• License
• Contact

🎯 About

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.

✨ Features

• 🎲 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)

🏁 Getting Started

Prerequisites

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

Installation

1. Clone the repository

git clone https://github.com/yourusername/santa_draw.git
cd santa_draw

2. Install dependencies

npm install

3. Configure environment variables (if needed)

# Copy the example env file
cp .env.example .env

# Edit .env with your settings
nano .env

4. Start the development server

npm run dev

5. Open your browser

Navigate to http://localhost:5173 (or the port shown in your terminal)

🐳 Docker Deployment

Prerequisites

• Docker (20.10 or higher)
• Docker Compose (2.0 or higher)

Quick Start with Docker

1. Configure environment variables

# Create .env file if it doesn't exist
cp .env.example .env

# Edit .env with your settings
nano .env

2. 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

3. Access the application

The application will be available at http://localhost:3000

Docker Commands

# 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-cache

Environment Variables

Make sure to configure your .env file before running Docker:

# Example .env file
VITE_API_URL=https://api.example.com
# Add other environment variables as needed

Important: 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.

Production Deployment

For production deployment, you can use the same Docker setup:

# Build for production
docker-compose build

# Run in production mode
docker-compose up -d

The 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

💻 Usage

Quick Start Guide

1. Create a New Draw

   • Click on "New Draw" button
   • Enter the event name and date
   • Add participant names and email addresses

2. Generate Assignments

   • Review your participant list
   • Click "Generate Assignments"
   • The system will randomly match participants

3. Share Results

   • Each participant receives their assignment
   • Results remain confidential
   • Share the draw link with participants

Advanced Usage

# Run with custom port
npm run dev -- --port 3000

# Build for production
npm run build

# Preview production build
npm run preview

🛠️ Development

Project Setup

# Install dependencies
npm install

Development Commands

# 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 lint

Code Style

This 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

🔧 Tech Stack

Frontend

• Vue 3 - Progressive JavaScript Framework
• Vite - Next Generation Frontend Tooling
• JavaScript/ES6+ - Modern JavaScript

Development Tools

• Vue DevTools - Browser DevTools extension
• ESLint - Code quality tool
• Prettier - Code formatter (if configured)

Recommended IDE Setup

• VS Code with:
  • Vue - Official (Volar)
  • Disable Vetur if installed

Browser Extensions

Chromium-based browsers (Chrome, Edge, Brave):

• Vue.js devtools
• Custom Object Formatters

Firefox:

• Vue.js devtools
• Custom Object Formatters

📁 Project Structure

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

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Development Guidelines

• Write clean, readable code
• Follow the existing code style
• Add comments for complex logic
• Test your changes thoroughly
• Update documentation as needed

📝 License

Distributed under the MIT License. See LICENSE file for more information.

📧 Contact

Linkedin - https://www.linkedin.com/in/hakan-budak-7ab3071b5/

Project Link: https://github.com/hakanbudak/santas_draw_frontend

🙏 Acknowledgments

• 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!