PresentNow is an open-source web application that helps people collaboratively organize and manage gift-giving for occasions like birthdays. This repository contains the Vue.js frontend that provides an intuitive interface for creating wish lists, suggesting presents, and coordinating gift purchases while preserving the element of surprise.

• Wish List Management: Create and share wish lists for any occasion
• Present Suggestions: Browse and suggest presents for friends and family
• Collaborative Gifting: Reserve presents to avoid duplicates among friends
• Privacy-First: Recipients can't see who is buying which present—the surprise remains intact!
• Modern UI: Built with Vue 3 and Vuetify for a clean, responsive interface
• Secure Authentication: Integrated OpenID Connect (OIDC) authentication with role-based access control
• Production Ready: Containerized deployment with optimized nginx configuration

• Framework: Vue 3 with Composition API
• Build Tool: Vite
• UI Library: Vuetify 3
• Language: TypeScript
• Authentication: oidc-client-ts
• Routing: Vue Router 4
• Package Manager: pnpm
• Containerization: Docker with multi-stage builds
• Web Server: nginx (production)

• Node.js 18+ installed
• pnpm installed (npm install -g pnpm)
• PresentNow Backend running (for API access)

1. Clone the repository:

   git clone https://github.com/workaround-org/presentnow-frontend.git
   cd presentnow-frontend

2. Install dependencies:

   pnpm install

3. Start the development server:

   pnpm dev

4. Open your browser and navigate to http://localhost:5173

The application will connect to the backend API to fetch configuration and handle authentication.

Build the application for production:

pnpm build

Preview the production build locally:

pnpm preview

This project includes a Dockerfile for containerized deployment with optimized nginx configuration.

docker build -t presentnow-frontend .

docker run -p 8080:80 presentnow-frontend

The application will be available at http://localhost:8080.

The Docker image is automatically built and pushed to GitHub Container Registry on every push to the main branch.

Pull and run the latest image:

docker run -p 8080:80 ghcr.io/workaround-org/presentnow-frontend:latest

• pnpm dev - Start development server with hot reload
• pnpm build - Build for production with TypeScript type checking
• pnpm preview - Preview production build locally
• pnpm type-check - Run TypeScript type checking without building

PresentNow uses OpenID Connect (OIDC) for secure authentication. The application automatically fetches authentication configuration from the backend and supports:

• Single Sign-On (SSO)
• Silent token renewal
• Role-based access control (admin roles)
• Secure logout

For detailed authentication setup and configuration, see OIDC_SETUP.md.

presentnow-frontend/
├── src/
│   ├── api/           # API client and backend communication
│   ├── auth/          # Authentication service and OIDC integration
│   ├── components/    # Reusable Vue components
│   ├── composables/   # Vue composables (e.g., useAuth)
│   ├── router/        # Vue Router configuration
│   ├── assets/        # Static assets (images, styles)
│   ├── App.vue        # Root component
│   └── main.ts        # Application entry point
├── public/            # Public static files
├── Dockerfile         # Multi-stage Docker build
├── nginx.conf         # Production nginx configuration
└── vite.config.ts     # Vite configuration

This frontend is designed to work with the PresentNow Backend, a REST API built with Java and Quarkus. The backend provides:

• User and present management
• Authentication configuration
• Present suggestion and reservation system
• Privacy controls for gift coordination

• VSCode
• Volar (Vue Language Features)
• TypeScript Vue Plugin (Volar)

Note: Disable Vetur if you have it installed, as it conflicts with Volar.

See Vite Configuration Reference for build customization options.

Contributions are welcome! Whether you're fixing bugs, improving documentation, or proposing new features, your help is appreciated.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please ensure your code follows the existing style and includes appropriate tests if applicable.

This project is free and open-source software (FOSS). See LICENSE for details.

• PresentNow Backend - Java/Quarkus REST API

:)

If you encounter any issues or have questions, please open an issue on GitHub.