A modern, enterprise-grade image slideshow management system built with Next.js 15 and Supabase. Create, manage, and display professional image slideshows with real-time updates, theme customization, and advanced UI optimization.
- Enterprise Authentication: Supabase-powered secure authentication with protected routes
- Responsive Dashboard: Professional interface with adaptive design for all devices
- Advanced Image Management: Drag & drop upload with comprehensive file validation
- Dynamic Slideshow: Auto-cycling full-screen display with smooth transitions
- Real-time Preview: Instant image preview with optimized loading states
- Intelligent Reordering: Drag-to-reorder functionality with optimistic updates
- Seasonal Image Control: Pause/unpause images to temporarily hide them from slideshow while keeping them in management list
- Light/Dark Theme Toggle: Professional theme switching with localStorage persistence
- Optimistic Updates: Instant UI feedback for all user operations
- Multi-user Conflict Prevention: Advanced locking system prevents concurrent editing conflicts
- Performance Optimization: Memoized components and efficient rendering patterns
- Queue-based Operations: Sequential server actions prevent race conditions
- Polished Interface: Professional design with smooth animations and hover effects
- Modern Architecture: Next.js 15 with React 19 and App Router pattern
- Type-Safe Development: Full TypeScript compatibility and type safety
- Accessibility Compliance: WCAG 2.1 compliant with proper ARIA implementation
- Mobile-First Design: Responsive layouts optimized for all screen sizes
- Production Ready: Enterprise-grade performance optimizations and error handling
- Node.js 18.0.0 or higher
- A Supabase project with storage bucket configured
- Modern browser with ES2020 support
-
Clone the Repository
git clone https://github.com/yourusername/next-frames.git cd next-frames -
Install Dependencies
npm install
-
Environment Configuration
Create a
.env.localfile in the root directory:NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
-
Database Schema Setup
Execute the following SQL in your Supabase SQL editor:
CREATE TABLE images ( id uuid DEFAULT gen_random_uuid() PRIMARY KEY, name text NOT NULL, url text NOT NULL, storage_id text NOT NULL, order_position integer NOT NULL, is_paused boolean DEFAULT false NOT NULL, created_at timestamptz DEFAULT now() ); -- Create indexes for optimal performance CREATE INDEX idx_images_order_position ON images(order_position); CREATE INDEX idx_images_created_at ON images(created_at); CREATE INDEX idx_images_is_paused ON images(is_paused);
For existing installations: Add the pause functionality to existing databases:
-- Add is_paused column to existing installations ALTER TABLE images ADD COLUMN is_paused boolean DEFAULT false NOT NULL; CREATE INDEX idx_images_is_paused ON images(is_paused);
-
Storage Configuration
Create a storage bucket named
imagesin your Supabase dashboard:- Set bucket to public access
- Configure upload limits as needed
- Enable file type restrictions (JPG, PNG, GIF, SVG)
-
Launch Development Environment
npm run dev
Navigate to http://localhost:3000 to access the application.
- Upload Management: Multi-file drag & drop upload with real-time progress
- Image Reordering: Intuitive up/down controls for slideshow sequencing
- Preview System: Full-size image preview with loading optimization
- Pause Control: Pause/unpause individual images to exclude them from slideshow temporarily
- Deletion Control: Safe image removal with confirmation prompts
- Theme Customization: Light/dark mode toggle with system preference detection
- Real-time Synchronization: Instant updates across all connected sessions
- Automated Cycling: Configurable image transitions (default: 10 seconds)
- Full-screen Presentation: Optimized for digital signage and presentations
- Smooth Animations: Hardware-accelerated CSS transitions
- Dynamic Updates: Automatic content refresh every 5 minutes
- Responsive Scaling: Adaptive image sizing for various display ratios
next-frames/
├── app/
│ ├── actions/ # Server Actions for database operations
│ ├── context/ # React Context providers (Images, Theme)
│ ├── dashboard/ # Protected dashboard interface
│ ├── login/ # Authentication interface
│ └── slideshow/ # Public slideshow display
├── components/ # Modular React components
├── utils/ # Utility functions and Supabase configuration
└── middleware.js # Route protection and authentication
- Server Actions: Modern data fetching with automatic revalidation
- Context Architecture: Centralized state management with optimistic updates
- Component Composition: Reusable, memoized components for optimal performance
- Theme System: Centralized theme management with localStorage persistence
npm run dev # Start development server (localhost:3000)
npm run build # Generate production build with optimizations
npm run start # Start production server
npm run lint # Execute ESLint code quality checks- Framework: Next.js 15.3.3 with App Router architecture
- Frontend: React 19.0.0, TailwindCSS 3.4.1
- Backend Services: Supabase (Authentication, Database, Storage)
- State Management: React Context with optimistic update patterns
- Performance: React.memo, useMemo, useCallback optimization strategies
- UI Components: React Icons, Headless UI
- Notifications: React Toastify with custom styling
- Maximum file size: 5MB per individual image
- Maximum batch size: 50MB per upload session
- Supported formats: JPEG, PNG, GIF, SVG
- Processing: Automatic optimization and validation
- Slideshow transitions: 10 seconds between images
- Content refresh: 5-minute intervals for new content detection
- User activity monitoring: 5-second heartbeat for conflict prevention
- Session management: 15-second timeout for inactive sessions
- Storage: Browser localStorage with fallback to system preferences
- Modes: Professional light and dark themes
- Persistence: Cross-session theme retention
- Transitions: Smooth 200ms duration animations
- Connect your GitHub repository to Vercel
- Configure environment variables in Vercel dashboard
- Enable automatic deployments on push
- Monitor performance with Vercel Analytics
FROM node:18-alpine AS base
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production && npm cache clean --force
FROM base AS build
COPY . .
RUN npm run build
FROM base AS runtime
COPY --from=build /app/.next ./.next
COPY --from=build /app/public ./public
EXPOSE 3000
CMD ["npm", "start"]# Required
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
# Optional
NEXT_PUBLIC_APP_ENV=production
NEXT_PUBLIC_ANALYTICS_ID=your_analytics_id- Fork the repository and create a feature branch
- Implement changes with appropriate test coverage
- Follow established code style and conventions
- Document new features and API changes
- Submit a pull request with detailed description
- Use TypeScript for type safety
- Follow React best practices and hooks guidelines
- Implement proper error handling and loading states
- Write comprehensive commit messages
- Test functionality across different browsers
- Cross-browser sessions: Multi-device conflict detection limited to localStorage scope
- Large file handling: Images exceeding 5MB require manual optimization
- Concurrent operations: Heavy simultaneous usage may require rate limiting
- Mobile upload: Some mobile browsers have file selection limitations
- Implemented comprehensive light/dark theme system
- Added theme toggle with localStorage persistence
- Enhanced UI consistency across all components
- Improved accessibility with better contrast ratios
- Updated navigation and button visibility for dark mode
- Added pause/unpause functionality for seasonal image management
- Implemented visual indicators for paused images in dashboard
- Updated slideshow to exclude paused images automatically
- Introduced optimistic UI updates for improved responsiveness
- Implemented multi-user conflict prevention system
- Enhanced interface with professional loading states
- Optimized performance with React memoization strategies
- Improved image handling with Next.js Image component
- Core slideshow management functionality
- Supabase authentication and storage integration
- Basic dashboard and presentation interfaces
This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License. Commercial usage requires explicit permission.
- Technical Documentation: Comprehensive development guidelines available in project documentation
- Issue Tracking: Report bugs via GitHub Issues
- Feature Requests: Submit enhancement proposals through GitHub Discussions
- Security: Report security vulnerabilities privately via GitHub Security
Professional slideshow management solution powered by modern web technologies
Next.js 15 • React 19 • Supabase • TailwindCSS
Next.js 15 • React 19 • Supabase • TailwindCSS