A global calendar platform dedicated to DJs that enables artists to showcase their availability and upcoming events while allowing fans and event organizers to discover and contact DJs for booking performances.
- Techno Ambassador
Techno Ambassador is a global calendar platform dedicated to DJs that connects three main user groups: DJs managing their calendars, fans seeking information about their favorite artists' performances, and event organizers looking for DJs for their events.
- DJ Profile Management: Complete profiles with biography, music styles, social media links, and optional photos
- Calendar System: Simple event list with one-year planning horizon and event history preservation
- Advanced Search & Filtering: Find DJs by location, music style, availability, and name
- Mobile-First Design: Full functionality across web and mobile devices
- Direct Contact: Social media integration for booking inquiries
- SEO-Friendly: Clean URL structure (e.g., /dj/dj-name)
The platform addresses the lack of a centralized tool for DJs to showcase their availability and upcoming performances. It solves several key issues:
For DJs:
- Lack of platform to showcase their schedule and availability
- Difficulties in reaching potential clients and fans
- Need to manage multiple communication channels
- Lack of tools for professional presentation of their calendar
For Fans & Event Organizers:
- Finding information about DJ availability for specific dates
- Discovering new artists in their area
- Checking performance schedules of favorite DJs
- Contacting artists for potential bookings
- DJs (Artists): Managing their performance calendars and showcasing availability
- Fans: Seeking information about their favorite artists' performances
- Event Organizers: Looking for DJs for their events and checking availability
- Astro 5 - For creating fast, efficient pages with minimal JavaScript
- Vue 3 - For interactive components
- TypeScript 5 - For static typing and improved developer experience
- Tailwind 4 - For efficient styling
- PrimeVue - For accessible UI components
- Supabase - Comprehensive backend solution providing:
- PostgreSQL database
- Built-in user authentication
- SDK support for multiple languages
- GitHub Actions - For CI/CD pipelines
- Cloudflare Pages - For hosting the project
🌐 Live Application: https://techno-ambassador.pages.dev/
Experience Techno Ambassador in action! The live demo showcases all core features including DJ discovery, event browsing, and user authentication. You can create an account, explore DJs, and test the full functionality of the platform.
- Node.js v22 (use nvm to install the correct version)
- Git
-
Clone the repository
git clone https://github.com/yourusername/techno-ambassador.git cd techno-ambassador -
Install dependencies
npm install
-
Set up environment variables (create a
.envfile based on.env.example) -
Start the development server
npm run dev
npm run dev- Start the development servernpm run dev:remote- Start the development server in remote mode(Supabase database is running on remote server)npm run build- Build the project for productionnpm run preview- Preview the production build locallynpm run astro- Run Astro CLI commandsnpm run lint- Run ESLint and automatically fix issuesnpm run lint:check- Run ESLint without fixing issuesnpm run format- Format code with Prettiernpm run format:check- Check if code formatting meets Prettier standards
The project implements a comprehensive testing strategy with multiple layers to ensure code quality and functionality.
- Vitest - Fast unit testing framework with Vue Test Utils integration
- Playwright - End-to-end testing for cross-browser compatibility
- Vue Test Utils - Official testing utilities for Vue components
- MSW (Mock Service Worker) - API mocking for reliable tests
- Faker.js - Test data generation
# Unit Tests
npm run test # Run tests in watch mode
npm run test:watch # Run tests in watch mode (explicit)
npm run test:ui # Open Vitest UI for interactive testing
npm run test:coverage # Run tests with coverage report
# End-to-End Tests
npm run test:e2e # Run E2E tests headlessly
npm run test:e2e:ui # Run E2E tests with Playwright UI
npm run test:e2e:headed # Run E2E tests with visible browser
npm run test:e2e:debug # Debug E2E tests step by step
# Playwright Project-Specific Tests
npm run test:e2e -- --project=chromium-authenticated # Run authenticated tests only
npm run test:e2e -- --project=chromium-unauthenticated # Run auth/registration tests only
npm run test:e2e -- --project=setup # Run setup tests only
npm run test:e2e:ui -- --project=chromium-authenticated # Run authenticated tests in UI mode
# All Tests
npm run test:all # Run all tests with coverage + E2Esrc/test/ # Unit test configuration
├── setup.ts # Global test setup and mocks
├── utils.ts # Test utilities and helpers
└── vitest.d.ts # TypeScript declarations
e2e/ # End-to-end tests
├── pages/ # Page Object Model files
├── global-setup.ts # E2E global setup
├── global-teardown.ts # E2E global cleanup
├── auth.setup.ts # Authentication setup for tests
└── *.spec.ts # E2E test files
src/**/*.{test,spec}.{ts,vue} # Unit test files
Test Coverage Requirements:
- 60% minimum coverage for branches, functions, lines, and statements
- Visual regression testing with Playwright screenshots
- Component interaction testing with Vue Test Utils
- API integration testing with MSW mocks
- DJ Registration & Profile Management: Create and edit profiles with mandatory biography and music styles
- Calendar Management: Add, edit, and delete future events with up to one-year planning horizon
- Search & Discovery: Browse all DJs with filtering by location, music style, availability, and name search
- Public DJ Profiles: Accessible calendars with performance history and upcoming events
- Social Media Integration: Contact DJs through Instagram/Facebook links
- Mobile Responsive Design: Full functionality across all devices
- Authentication System: Secure login/registration with email and password
- Social features (comments, likes, sharing)
- Event organizer accounts
- Automatic event addition from external sources
- Interactive planning calendar (only simple date selection)
- User verification process
- Conflict resolution for overlapping events
- Marking unavailable days
- Editing or deleting past events
- Internal messaging system
- Payment or booking system
- Integration with external calendars
- No real-time conflict resolution
- DJs responsible for managing overlapping events
- Simple, form-based event creation method
- Contact exclusively through social media
- No external login services (Google, GitHub)
The project is currently in development. Initial focus is on implementing core features related to DJ profile management, calendar system, and search functionality.
- 90% of DJ users have filled calendars in the current month (at least one event)
- 95% of profiles have complete biography and music styles
- 80% of profiles have added social media contacts
Project Structure:
./src- Source code./src/layouts- Astro layouts./src/pages- Astro pages./src/pages/api- API endpoints./src/features/feature-1- Feature client-side components (Astro static, Vue dynamic)./src/shared/components- Reusable client-side components (Astro static, Vue dynamic)./src/assets- Static internal assets./public- Public assets