PresentNow Frontend

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.

Features

• 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

Tech Stack

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

Prerequisites

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

Getting Started

Local Development

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.

Production Build

Build the application for production:

pnpm build

Preview the production build locally:

pnpm preview

Docker Deployment

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

Build Docker Image

docker build -t presentnow-frontend .

Run Docker Container

docker run -p 8080:80 presentnow-frontend

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

GitHub Container Registry

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

Available Scripts

• 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

Authentication

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.

Project Structure

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

Backend Integration

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

Development

Recommended IDE Setup

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

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

Configuration

See Vite Configuration Reference for build customization options.

Contributing

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.

License

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

Related Projects

• PresentNow Backend - Java/Quarkus REST API

Support

:)

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