Custom CRM

€3,500.00

A modern, full-featured React landing page system for creators and small businesses. Includes a SoundCloud-style track list with waveform previews, PayPal payments, Firestore contact form, Firebase backend, and a Chromecast-ready video player. Built with scalability and automation in mind — fully deployable to Firebase with CI/CD setup via GitHub Actions.

Share

Details

Overview

This project is a complete landing page and media platform built with React and Firebase, perfect for digital creators, musicians, or small businesses who want to showcase and sell their work online. It combines elegant design, automated deployment, and rich media features like waveform-based track visualization and Chromecast-ready video playback.

🎧 Core Features 🔊 Track Management

SoundCloud-inspired audio player list.

Displays waveform background images generated automatically during upload.

Helper tool for admins to create and upload waveform images alongside audio tracks.

Firebase Storage integration for hosting and serving media files.

💸 Payment Integration

PayPal checkout integration (@paypal/react-paypal-js).

Supports sandbox and production environments.

Easily customizable product or subscription purchase flows.

📨 Contact & Communication

Contact form connected to Firestore.

Saves each inquiry with name, email, and message.

Optional CAPTCHA verification before sending.

Ready for email notifications on new submissions via SMTP or Firebase Functions.

🎥 Video Player

Built-in React video player with Chromecast support.

Clean UI that adapts to your page theme.

Perfect for promo videos, tutorials, or visual content.

☁️ Firebase Integration

Firestore for structured data (inquiries, track metadata).

Firebase Storage for audio and waveform images.

Firebase Hosting for fast, secure global deployment.

Configurable via .env for easy setup.

⚙️ Automation & Deployment

CI/CD pipeline via GitHub Actions.

Automatically builds and deploys your site on push or pull request.

Environment variables injected from GitHub secrets for security.

Step-by-step deployment documentation included.

🌐 SEO & Mobile Optimization

Responsive design for all screen sizes.

Optimized structure for Google indexing and mobile experience.

Optionally extendable with meta tags, sitemap, and analytics.

🧠 Tech Stack

Frontend: React, TypeScript, Vite, TailwindCSS

Backend & Hosting: Firebase (Firestore, Storage, Hosting)

Payments: PayPal API (@paypal/react-paypal-js)

Automation: GitHub Actions CI/CD

Optional Add-ons: Email notifications, reCAPTCHA, custom analytics

💼 Use Cases

Musicians & producers showcasing and selling tracks

Digital creators offering videos, courses, or media content

Freelancers & small businesses needing a modern branded landing page

Startup product landing with integrated payments and inquiry forms

💰 Included

Full source code (React + Firebase)

Admin waveform generation helper

Firebase setup guide

GitHub Actions deployment workflow

Example .env structure

Ongoing stack negotiation and support available