Stream, record, and download IPTV content — all from your own server. Built with Next.js and React, with live monitoring and no database needed
Guttihub Stream started as a focused side project with two clear goals:
1) Learn React and Next.js in a deeper, real-world way, and 2) build something I’d actually want to use — a personal streaming and recording app.
Fast-forward to today, and both goals are checked off in bold marker. ✅ What I’ve built is a full-featured, self-hosted IPTV platform that handles everything from inline and popup playback to scheduled recordings, real-time download monitoring, and one-to-many streaming.
I already knew my way around modern web dev — this project wasn’t about learning HTML tags. It was about mastering React components, Next.js routing and rendering strategies, and building something solid from the ground up that could run long-term. And it does.
Guttihub Stream has become a powerful tool I now use daily. And the best part? It’s not theoretical. It’s deployed. It’s stable. It’s mine.
Today, the app supports:
- 🔴 Recording live streams (with live status updates)
- 📅 Scheduling recordings in the future
- 📥 Downloading movies to the server and exposing them in the app like a streaming service
- 👥 Broadcasting a single stream to multiple viewers (goodbye concurrency limits!)
- 🧭 Smart filters for format, category, year, title, group, and tvGuideId
- 🎛️ Beautiful dark-mode UI with a popup or inline video player (no VLC required, thank you very much 😎)
- 🔐 Google OAuth2 login with role-based access (Admin / Moderator / Streamer / Viewer)
- 📡 A LiveMonitorPanel that shows all downloads and recordings in real time
So yeah — this is more than a tech experiment. It's become a real streaming and recording platform that I control, and use, and built from the ground up. This is my 41st project, and honestly... it might be the one I’m most proud of.
Follow the source code or clone the chaos here:
🔗 GitHub Repository:
github.com/guttih/guttihub
Highlights
- 🔥 Inline & popup video playback — no VLC needed!
- 📽️ One-to-many stream sharing — IPTV, but make it personal
- 🧠 Learned React + Next.js like a boss
- 📡 Real-time monitoring of all jobs — live feedback!
- 🎯 Feature-complete and in daily use
- ☁️ Deployed, HTTPS secured, and live
- 💡 And oh yeah, I had a blast building it
This app is done, deployed, and streaming like a dream. Couldn’t be happier with how it turned out.
Here's a preview of the current project list UI:
Feature Ideas
This is a living list of ideas and potential features I may add in the future. Some are already in progress,
others are just concepts for now. As the project evolves, items will be updated to reflect what’s been
implemented.
- Integrated video player
- Search and filter streams
- Search by title
- Search by group
- Search by tvGuideId
- Filter by file extension
all,.mp4, .mkv
, .avi or .ts
- Filter by type
all,channels, movies or series
- Parsing M3U playlists
- Parse M3U8 playlists
- Parse M3U8 files with #EXTM3U header. Lines Like these:
- Structure and send only json object from server to client
- Stop sending the whole text file to client, just send json
- structure json with nested entries, pageIndex and pageCount, and possible
an lastUpdated because we are cashing m3u files from the IPTV servers
- Export currently filtered list as M3U list allowing us to open it in VideoLan (VLC) or
other media players
- Add Max download entry count to appConfig
- Add and show export button when list count is less or equal to maxEntryExportCount
- Create a new M3U Generator function or class to convert json list to a M3U list string
- Make on app video player more user friendly
- Make InlinePlayer component optionally have inline or popup when user presses play on a
card
- When InlinePlayer component is in popup mode
- Make it draggable around the page, even while playing
- Make it resizable
- How to handle deploying the app, especially when there is no database. I need to ensure old
data is not lost during re-deployment..
- For now just created a scripts/deploy.sh which copies the services.json to the correct
place on the server and uses scp to copy to server and after that an manual restart is required
- Make the app run in a secure environment. used Let's encrypt to create tv.guttih.com
- Make the deployment a npm task in package.json, and make things automatic
- Create a in-app proxy for image urls (tvLogo) to handle Mixed
content blocking by chrome due to (HTTPS page loading HTTP image)
- Create a in-app proxy for streams urls (http) to handle Mixed
content blocking by chrome due to (HTTPS page loading HTTP stream)
- Make the deployment process more general
- Document how to deploy to ubuntu. How to add the app/server
to a kernel service or a docker container
- Make the Pagination server-side, Too much stuff is beeing handed to the client, making first
request slow
- Add regex and case sensitive options to each search field
- Added a loading spinner to the app when loading the list
- We can now filter titles by year(s), created a multi-year-select component for that
- Do not show categories or file formats in select boxes if they are not present in the current
list.
- From title, group, and/or tvGuideId, search for a description on free API servers like
The Movie Database or
OMDb API
and show it in a popup when the user hovers over on the title.
- Create a description proxy for each service I use
- Figure out how to parse clutter away from titles to be able to add to search
- Different description servers
- Create request and response types (contracts) for each service
- Each service has maximum requests per second, so I need to handle that
in the app, possibly lazy load the description when the user browses the list which will make me
detect if
the item is visible or below the visible area of the screen, and then load the description
when the user scrolls to it... or use a different general method just a thought.
- Do I need a database?
- ? Figure out the answer, and select one if yes. I'm thinking
Postgres, MySQL, SQLite, but not MongoDB because I've used it a lot in other projects and like it,
but I
also like traditional SQL. :)
- Download stream(s) to one of predetermined locations on the server
- Download a single title
- Download multiple titles, like series
- Record 🔴 live streams to server by selected item
- Admins can now set duration and start a recording now
- Stop button on a status page showing record progress added
- Start now, and set duration
- Record status page added
- Show recording progress
- Add stop recording button
- Schedule a recording -> Start at a specific time and set duration
- Add disable playback or refreshing playlist while recording, if needed because most
streaming IPTV services have a limit on the number of simultaneous connections
- The actual recording could be done, using ffmpeg which
can be called by a bash script I would create to select the stream url, duration, and recording
location
- Play ▶️ recorded streams directly in the app
- This requires a new UX page
- Playlist creation and management
- User favorites
- Display favorite streams in a separate list
- Allow users to add/remove favorites
- Favorites by category
- Allow users to create multiple playlists
- By browsing different items in the list and picking them by clicking an icon on
them, which will allow them to be added to the playlist
- How to handle UX for that?
- Do we have a continuously addable playlist, called something like Playlist Draft?
- Allow users to move this Playlist Draft into a named playlist
- Allow users to select a a existing named playlist to be set as the Playlist
Draft
- Consistent styling and layout improvements
- Use themed classes or variables for colors and fonts, say start with dark/normal mode
- Improve spacing and alignment
- Add hover effects for buttons and links
- Could start with a Dark/light mode toggle
- Add a custom theme
- Split the UI into separate sections, (not sure if I need this anymore)
- Movies, no need I think
- Series, no need I think
- Channels, no need I think
- User authentication and login, done with Google OAuth2
- Allow users to log in with Google, not doing that
- Whitelist allowed google users
- Let new users sign up with Google? Nah, my poor little server would probably faint under the weight of jhonnyboy's endless data requests. Let's not give my server a heart attack. 🫣
- Store user preferences and favorites in a database
- Customizable list sorting
- Allow sorting by: title, group, tvGuideId, or format
- Support for primary and secondary sorting — e.g., sort by
tvGuideId and then by
group within each tvGuideId
- Set up Storybook for component previews and documentation