frontend-reference
frontend-reference copied to clipboard
feat: add Music licensing challenge example with Nextjs
What's this PR do?
This PR introduces a music licensing UI for managing movies, scenes, tracks, and song license statuses.
It leverages Next.js 15 (App Router), Apollo Client for GraphQL queries/mutations/subscriptions, TailwindCSS 4 for styling, and BiomeJS for linting/formatting.
Summary of changes in this PR:
- Adds a responsive UI for browsing movies, scenes, and tracks.
- Allows editing and viewing of song license statuses.
- Implements real-time updates for license status changes using GraphQL subscriptions.
- Integrates authentication (login/register) flows.
- Uses custom hooks for live data (e.g.,
useSongWithLiveStatus). - Applies consistent styling with TailwindCSS 4.
- Ensures code quality with BiomeJS linting and formatting.
@ulises-jeremias @rpmolina
Summary by CodeRabbit
- New Features
- Introduced a full-featured Music Licensing App example with authentication, movies, scenes, tracks, and song license management.
- Added real-time license status updates, search functionality, and responsive navigation with protected routes.
- Implemented user login, logout, and registration pages with error handling and session management.
- Integrated GraphQL queries, mutations, and subscriptions for dynamic data interaction.
- Included interactive UI components such as dropdowns, buttons, and detailed movie/scene/song views.
- Documentation
- Added comprehensive README with setup instructions, tech stack details, and contribution guidelines.
- Provided example environment variable file for easy configuration.
- Style
- Enabled Tailwind CSS for consistent and modern UI styling.
- Chores
- Added configuration files for TypeScript, Biome, PostCSS, and project dependencies.
- Set up Husky hooks for linting, formatting, and type-checking before commits and pushes.