https://github.com/cubbit/slideshow-demo
Cubbit DS3 slideshow demo
https://github.com/cubbit/slideshow-demo
Last synced: about 2 months ago
JSON representation
Cubbit DS3 slideshow demo
- Host: GitHub
- URL: https://github.com/cubbit/slideshow-demo
- Owner: cubbit
- License: mit
- Created: 2025-03-16T09:59:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-30T10:36:49.000Z (10 months ago)
- Last Synced: 2025-09-05T22:48:31.567Z (10 months ago)
- Language: TypeScript
- Homepage: https://cubbit.io
- Size: 10.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cubbit Slideshow Demo
A modern web application for uploading and displaying photos in a beautiful slideshow using Cubbit DS3 or any S3-compatible storage.
## 📸 Features
- **Simple Upload Interface**: Easily upload photos from any device
- **Dynamic Slideshow**: Automatically refreshing slideshow with smooth animations
- **S3 Integration**: Works with Cubbit DS3 or any S3-compatible storage
- **Administrative Settings**: Secure admin panel to configure storage settings
- **Responsive Design**: Works on desktop, tablet, and mobile devices
- **Kubernetes Deployment**: Ready-to-use Helm chart for easy deployment
- **Multi-Architecture Support**: Docker images available for both amd64 and arm64
## 📷 Screenshots
## 🚀 Getting Started
### Prerequisites
- Node.js 18+ (or 20+ for optimal performance)
- npm 9+
- S3-compatible storage (Cubbit DS3, AWS S3, MinIO, etc.)
### Development Setup
1. Clone the repository:
```bash
git clone
cd slideshow-demo
```
Install dependencies:
```bash
npm install
```
2. Create a `.env.local` file with your S3 credentials:
```
# Public settings (available on client)
NEXT_PUBLIC_S3_BUCKET_NAME=your-bucket-name
NEXT_PUBLIC_MAX_FILE_SIZE=10485760
NEXT_PUBLIC_SLIDESHOW_SPEED_S=40
NEXT_PUBLIC_MIN_COUNT_FOR_MARQUEE=6
NEXT_PUBLIC_S3_ENDPOINT=
# Private settings (server only)
S3_REGION=eu-central-1
S3_ACCESS_KEY_ID=your-access-key
S3_SECRET_ACCESS_KEY=your-secret-key
MULTIPART_THRESHOLD=5242880
# Authentication for settings page
AUTH_USERNAME=admin
AUTH_PASSWORD=secure-password
JWT_SECRET=your-random-jwt-secret
```
3. Start the development server:
```bash
npm run dev
```
4. Open in your browser.
## 🐳 Docker Deployment
### Building Docker Images
#### Standard Build
```bash
docker build -t cubbit/slideshow-demo:latest .
```
#### Multi-Architecture Build
The repository includes a script for building multi-architecture images (amd64/arm64):
```bash
# Build image with default settings (Node.js 18, tag: latest)
npm run docker:build
# Build with specific Node.js version and tag
npm run docker:build -- -v 1.2.0 -n 20
# Build and push to registry
npm run docker:build -- -v 1.2.0 -p
```
For more advanced build options, see the [Multi-Architecture Build Guide](docs/MULTIARCH-BUILD-GUIDE.md).
## ☸️ Kubernetes Deployment with Helm
The application can be deployed to Kubernetes using the included Helm chart.
### Quick Start
```bash
# Create your values file
cp helm/values.yaml my-values.yaml
# Edit my-values.yaml with your S3 credentials and settings
nano my-values.yaml
# Install the chart
helm install slideshow ./helm -f my-values.yaml
```
### Advanced Configuration
For complete installation and configuration details, see [Installation Guide](docs/HOW-TO-INSTALL.md).
## ⚙️ Configuration Options
The application can be configured via environment variables or through the settings UI.
Key Configuration Parameters
| Parameter | Description | Default |
| :-------------------: | :-------------------------------------------: | :-------------: |
| S3_BUCKET_NAME | Name of the S3 bucket | slideshow |
| MAX_FILE_SIZE | Maximum upload file size (bytes) | 10485760 (10MB) |
| SLIDESHOW_SPEED_S | Duration of slideshow animation (seconds) | 40 |
| MIN_COUNT_FOR_MARQUEE | Minimum photos before enabling marquee effect | 6 |
| S3_REGION | S3 region | eu-central-1 |
| S3_ENDPOINT | S3 endpoint URL | Required |
| S3_ACCESS_KEY_ID | S3 access key | Required |
| S3_SECRET_ACCESS_KEY | S3 secret key | Required |
## Settings UI
Once deployed, you can access the settings page at `/settings` using the credentials defined in your configuration.
## 🔒 Security Considerations
- Change default admin credentials before deployment
- Use HTTPS in production with a valid TLS certificate
- Consider rate limiting and firewall rules for public instances
- Review Kubernetes security best practices if deploying to production clusters
## 🧑💻 Development
### Core Technologies
- **Next.js**: React framework with server-side rendering
- **TypeScript**: Type-safe JavaScript
- **Tailwind CSS**: Utility-first CSS framework
- **AWS SDK**: For S3 integration
- **Docker/Kubernetes**: For containerization and orchestration
### Project Structure
- `/app`: Next.js application code
- `/public`: Static assets
- `/helm`: Kubernetes Helm chart
- `/app/components`: React components
- `/app/api`: API routes
### Running Tests
```bash
npm test
```
## 📜 License
This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
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