This was my first time building a React prototype with v0. Very few iterations required and quite amazing overall considering it was done with a free account.
(click button to watch donuts)
The DonutCam is a live feed application that would allow me to monitor the donut rack at my favorite hole-the-wall shop from anywhere in the world…for no particular reason.
A few technical requirements to actually make it work…
Recommended Hosting Setup for City/State-Wide Access
- Cloud-Based Hosting
- Platform Options: Use a scalable cloud hosting provider like Vercel, AWS, or DigitalOcean. Each has options well-suited for hosting React applications.
- How It Works: Deploy the application to one of these platforms, making it accessible through a public URL. This ensures you can access the app on devices from anywhere.
- Video Streaming
- IP Camera with Cloud Streaming: Set up an IP camera that can stream directly to a cloud server. Popular choices include Hikvision or Ubiquiti UniFi cameras, which support protocols like RTSP or RTMP to connect to a cloud video streaming service.
- Cloud Video Streaming Service: Use a service like AWS IVS (Interactive Video Service), YouTube Live (if using an unlisted/private stream), or Mux. These services can receive your IP camera feed and embed the live video directly into the app.
- Application Components
- Frontend: The React application can be hosted on Vercel or similar providers, with embedded live video from the streaming service.
- Backend (if needed): A lightweight backend on AWS Lambda, DigitalOcean, or a similar provider can handle user interactions, viewer counts, or chat if you decide to expand.
Estimated Budget for Hosting
| Component | Item | Estimated Monthly Cost |
|---|---|---|
| Cloud Hosting | Vercel / AWS EC2 / DigitalOcean | $5–$20 |
| Streaming Service | AWS IVS / Mux / YouTube Live | $0–$20 |
| IP Camera | Hikvision / Ubiquiti UniFi | $35–$150 (one-time) |
Summary
- Deploy the app on Vercel or a similar provider for public access.
- Stream live video from an IP camera to a cloud service, embedding this stream into the React app.
- Link the app’s URL so you can access it directly on your phone or laptop.