A modern small demo application built with Vaadin 25 and Spring Boot, demonstrating advanced UI concepts, dynamic scheming dark/light mode, and full internationalization within a Star Wars-themed context.
Check out the live application here: https://starwars.gladtek.com/
Note: This demo is hosted on Render's free tier. If the application has been inactive for a while, it may take a minute to wake up. Please be patient! ⏳
- JDK 21
- Maven 3.x
mvn clean spring-boot:runOpen http://localhost:8080 in your browser.
- Split Screen Entry: A unique landing page requiring users to choose their path: "Light Side" or "Dark Side".
- User Identity: In this demo, a user is defined not by a login, but uniquely by their choice of side (Dark/Light).
- Deep Linking: Smart redirection ensures that if you access a specific link (e.g.,
/planets) before logging in, you are automatically taken there after selecting your side. - Persistent Navigation: A responsive side drawer navigation menu available throughout the application.
- Dashboard: A responsive dashboard overview with key performance indicators (KPIs).
- Planets:
- Interactive data grid displaying Star Wars planets.
- Master-Detail View: Select a planet to see full details in a split-view layout.
- Real-time Reactivity: Leverages Vaadin Signals for live population updates across the dashboard and planet screens.
- Localized Data: Planet names, climates, and terrains are fully translated.
- Components Showcase: A comprehensive gallery of customized Vaadin components:
- Inputs: Text fields, date pickers (with localized "Today"/"Cancel" buttons), time pickers.
- Cards: Standard cards and advanced variants with media images, badges, and footer actions.
- Display: Grids, Tabs, Accordions, and Dialogs.
- Experimental: Showcases upcoming Vaadin features like Badges, Sliders, and RangeSliders (enabled via feature flags).
- Multi-language Support: Full support for English, French, German, and Arabic.
- RTL Support: Automatic Right-to-Left (RTL) layout adjustment when switching to Arabic.
- Localized Components: All UI elements, including complex components like the
DatePicker(months, weekdays, buttons), are dynamically localized.
- Side-based Styling: The application's visual density and color palette adapt based on the user's initial "Light" or "Dark" side selection.
- Dynamic Trend Indicators: Population numbers dynamically shift to Green (increase) or Red (decrease) in real-time.
- 404 Page: A custom, localized "Page Not Found" experience that guides users back to safety.
- Framework: Vaadin Flow 25.1.1
- Backend: Spring Boot 4.0.5 (Java 21)
- Build Tool: Maven
- Layout Architecture:
MainLayout: ImplementsAppLayoutfor the global shell, handling navigation and global theme/locale state.SplitScreenView: The entry point managing the initial user decision.
- Session Management:
UserSession(@VaadinSessionScope): Manages user state (Selected Side, Active Theme, Intended Route) across the session lifecycle.
- Security & Routing:
- Anonymous Access: Views are annotated with
@AnonymousAllowed(demo mode). - Route Guards:
MainLayoutimplementsBeforeEnterObserverto intercept unauthenticated users (no side selected) and redirect them to the entry page, effectively protecting inner views while preserving deep links viaUserSession.intendedRoute. NotFoundView: ImplementsHasErrorParameter<NotFoundException>to catch and display 404 errors.
- Anonymous Access: Views are annotated with
- Signal State Management:
- Full-Stack Reactivity: Implements the new Vaadin Signals paradigm for efficient, real-time state synchronization between the server and client.
- Shared Signals: Utilizes
SharedValueSignalinPlanetServiceto ensure stable, session-isolated state sharing across multiple concurrent users.
- Simulation Engine:
- A Spring-managed
@Scheduledtask inPlanetServicesimulates planetary population growth every 5 seconds, pushing updates to the UI via signals.
- A Spring-managed
DatePickerI18nUtil: A specialized utility that generatesDatePicker.DatePickerI18nconfigurations dynamically from the activeLocale, handling specific formats (e.g.,ar-TNfor Arabic) and loading translation resources.LanguageHelper: Centralized logic for determining layout direction (Direction.RIGHT_TO_LEFTvsLEFT_TO_RIGHT) based on the language.ComponentsView: A modular "Kitchen Sink" view demonstrating component customization. It is refactored into distinct sections for better maintainability:InputSection: Text fields, DatePickers, etc.ButtonSection: Button variants, responsive icon button rows, custom spacers, and styles replacing Lumo variables.SelectionSection: ComboBoxes, Selects, Radios.DisplaySection: Grids, Tabs, Accordions.CardSection: Standard and advanced Cards.DialogSection: Dialogs and Notifications.ExperimentalSection: Demonstrates experimental components (Slider, RangeSlider) and new Badge variants.
- Monitoring & Analytics:
- Rybbit Analytics: Integrated support for monitoring user engagement and performance vitals, configurable via environment variables in production.
- Resources stored in
src/main/resources/vaadin-i18n/. - Standard properties files:
translations.properties(fallback),_en,_fr,_de,_ar. - Keys follow a structured naming convention (e.g.,
components.datepicker.today,error.404.title).
The project includes a sample Dockerfile:
- Multi-Stage Build: Uses a robust
mavenimage for building and a lightweightalpineJRE for running. - Layer Caching:
pom.xmlis copied and dependencies downloaded before 8294 source code, allowing Docker to cache the heavy dependency layer. - Buildkit Caching: Leverages
--mount=type=cacheto speed up Maven builds.
- Github Actions: Automated pipeline driven by a local
version.jsonfile. - Version Control: The
version.jsoncontrols the image tag and whether to push to the registry, giving granular control over release management. - Secrets: To enable deployment, set up
DOCKER_USERNAMEandDOCKER_PASSWORDin your GitHub Repository Secrets.