PERSONAL PROJECT · CASE STUDY

RadioApp

RadioApp is my original live web radio project. It brings together a public player, browser-based DJ studio, community chat, reactions, song requests, moderation, and administration in one responsive app that can also be installed as a PWA.

My Project Live Radio Installable PWA Real-time Platform Self-hosted

LIVE Enter the frequency

01 / LIVE PLAYER

Live Broadcast Player

The central player shows whether the station is live, who is on air, and how many listeners are connected. Playback starts with a single tap.

02 / NOW PLAYING

Now Playing

Current-track information updates in real time, so listeners can see the artist, title, and the state of the active broadcast.

03 / RESPONSIVE UI

Mobile Experience

The layout is refined for phones, tablets, and desktops. Controls, chat, and broadcast cards adapt into a comfortable single-column interface on smaller screens.

04 / INSTALLABLE PWA

Installable Web App

RadioApp can be added to the home screen without an app store. The PWA provides its own icon, standalone display, and a quick way back to the station.

05 / AUDIO SOURCE

Audio Source Selection

The DJ can share a microphone or system audio. The app checks permissions, lists available devices, and surfaces problems before a broadcast begins.

06 / LIVE CONTROL

Broadcast Controls

Starting and ending a show, volume, connection status, and broadcast metrics are available from one panel without switching between screens.

07 / LIVE METADATA

Live Track Metadata

The DJ can enter track details manually, while optional recognition helps automatically publish current music information to listeners.

08 / ACCESS CONTROL

Roles and Secure Sessions

Broadcasting features are limited to authorised accounts. Sessions, roles, and administrative actions are validated on the server.

09 / LIVE CHAT

Real-time Chat

Messages appear instantly for every connected user. Presence and status information help show what is happening in the live room.

10 / REACTIONS

Listener Reactions

Quick reactions let the audience respond to the music without interrupting the conversation. Their availability can be controlled in broadcast settings.

11 / SONG REQUESTS

Song Requests

A listener can send a song suggestion directly through chat. The DJ sees pending requests and can accept or reject them, with the status updating across every device.

12 / MODERATION

Moderation and Settings

Administrators can manage messages, users, reactions, limits, and room behaviour. Settings are stored centrally and synchronised with clients.

13 / APPLICATION

Backend and Interface

ASP.NET Core handles application logic, accounts, authorisation, APIs, and rendered views, while JavaScript powers user interactions and updates without page reloads.

14 / REAL TIME

SignalR and LiveKit

SignalR synchronises chat, status, settings, and metadata, while LiveKit/WebRTC provides low-latency audio transport from the DJ to listeners.

15 / DATA

PostgreSQL and Redis

PostgreSQL stores durable application data, while Redis supports fast state and messaging. Separating these roles makes the service easier to develop and maintain.

16 / DEPLOYMENT

Docker and VPS Deployment

The app, database, Redis, and media server run as separate Docker Compose services. A reverse proxy and HTTPS expose secure endpoints for both the website and live communication.

ASP.NET Core SignalR LiveKit WebRTC PostgreSQL Redis Docker Compose PWA HTTPS

PROJECT CASE STUDY

Dont Fret

Open App

Dont Fret is a full e-commerce web application project for a music store. It combines a public shop, product catalogue, shopping basket, customer account area, orders, returns, messages, invoices, and separate admin and staff panels for daily store operations.

School Project E-commerce Store Customer Account Admin Panel Staff Dashboard Orders and Returns

01 / HOME PAGE

Home Page

The homepage works as the main entry point to the store. Customers can see the search bar, category navigation, delivery and payment information, featured products, deals, and best sellers, then move into the catalogue or open a specific product.

02 / FEATURED PRODUCTS

Featured Products

The featured products section promotes selected catalogue items. Customers can quickly view highlighted products, check basic product information, and continue to the product details or shopping flow.

03 / ALL PRODUCTS

All Products

The catalogue page shows the full product list. Customers can use category, brand, price, rating, sorting, and page-size filters to find the right instrument or accessory more quickly.

04 / GUITARS

Guitars Category

The guitars page narrows the catalogue to guitar products. Users can browse instruments, compare prices, and open selected guitar items without mixing them with other product types.

05 / AMPLIFIERS

Amplifiers Category

The amplifiers page displays products for customers looking for amplification equipment. It works as a filtered catalogue view with the same style and shopping logic as the rest of the store.

06 / ACCESSORIES

Accessories Category

The accessories page groups supporting items such as strings, cables, tuners, stands, and capos. It helps customers quickly find add-on products for their main instruments.

07 / BEST PRICES

Best Prices

The best prices page brings together promotional and discounted products. Customers can quickly review deals, reduced items, and value-focused stock.

08 / ABOUT

About Dont Fret

The About page explains the store, its product focus, mission, key strengths, legal information, and trade customer rules. Users can understand the brand and how business customer support works.

09 / CONTACT

Contact Page

The contact page contains business details and a message form. Customers can send an enquiry to the store and find key contact information such as address, phone, and email.

10 / LOGIN

Login Page

The login screen allows existing users to access their account. From here, users can move to registration or password recovery if they do not have an account or forgot their login details.

11 / REGISTER

Register Page

The registration page allows users to create a standard customer account. The form collects account details, while the system separates normal registration from trade accounts created by staff or admins.

12 / PASSWORD RESET

Forgot Password

The password reset page lets users enter their email address and start account recovery. This allows customers to regain access without contacting administration directly.

13 / SHOPPING BASKET

Cart and Checkout Summary

The basket shows products added to the order, quantities, VAT, subtotal, delivery, and final total. Customers can review the purchase before checkout and confirm the order is correct.

14 / PROFILE

My Profile

The customer profile allows users to manage personal and business details. Users can update name, email, phone, company, VAT number, and billing or delivery addresses.

15 / ORDER HISTORY

My Orders

The orders page shows the customer purchase history. Users can see order numbers, dates, statuses, totals, and actions for opening a specific order.

16 / ORDER DETAILS

Order Details

The order details page shows the full breakdown of one purchase: status, delivery, addresses, purchased items, payment, and options related to returns or further support.

17 / RETURNS

Create Return Request

The return form allows customers to report a product issue. Users provide the return reason, item condition, and contact details, then the request is sent to store staff.

18 / MAILBOX

Mailbox

The mailbox shows conversations between the customer and the store. Users can view support threads and open a specific conversation about an order, account, or enquiry.

19 / MAIL THREAD

Conversation View

The conversation view shows the message history inside one thread. Customers can read staff replies and send another message without leaving their account area.

20 / ADMIN DASHBOARD

Admin Dashboard

The admin dashboard is the main management hub of the application. Admins get quick access to reports, products, orders, invoices, returns, users, messages, and logs.

21 / REPORTS

Reports Overview

The reports overview displays key business data: revenue, order count, pending invoices, low stock, best sellers, and core sales indicators.

22 / DETAILED REPORTS

Detailed Reports

Detailed reports expand the dashboard data. Admins can analyse stock by supplier, invoice summaries, customer order reports, and stock level breakdowns.

23 / PRODUCTS

Manage Products

The product list lets admins control the store catalogue. The view shows code, barcode, category, price, stock, active status, and actions for editing or further management.

24 / CREATE PRODUCT

Create Product

The create product form is used to add new catalogue items. Admins can set supplier, price, discount, stock, reorder level, description, and product image.

25 / EDIT PRODUCT

Edit Product

The edit product page allows an existing catalogue item to be updated. Admins can adjust data, barcode, price, stock, description, active status, and visual assets.

26 / ORDERS

Manage Orders

The orders page gives admins a full view of transactions. They can check customer, date, status, total, filter results, and move into editing a specific order.

27 / ORDER STATUS

Change Order Status

The order status page allows admins to update fulfilment progress. They can review order items, change status, and add or edit the shipment tracking number.

28 / INVOICES

Manage Invoices

The invoices page shows issued documents with dates, due dates, payment method, total, and status. Admins can edit an invoice or prepare it for printing.

29 / INVOICE STATUS

Change Invoice Status

The invoice status page is used to update accounting information. Admins can mark payment progress and keep invoice records accurate.

30 / RETURNS

Returns Management

Returns management shows customer requests with dates, products, reasons, item conditions, and statuses. Admins can monitor all active return cases.

31 / REVIEW RETURN

Review Return Request

The return review page shows the case details and supports a decision. Admins can approve the return, reject it, or mark it as refunded.

32 / USERS

Manage Users

The users panel lets admins control accounts in the system. The view includes roles, statuses, trade accounts, filters, and actions for editing a specific user.

33 / EDIT USER

Edit User

The edit user page allows admins to change account status, role, address details, and trade customer settings. Admins can align user access and customer data with store needs.

34 / SUPPORT MESSAGES

Contact Messages

Contact messages group customer enquiries sent through the form or mailbox. Admins can search a thread, open the conversation, reply, or delete an unnecessary record.

35 / SUPPORT THREAD

Support Conversation View

The support conversation view shows the full message exchange with a customer. Admins can read the case context and send a reply directly from the panel.

36 / AUDIT LOGS

Audit Logs

Audit logs record important system actions such as changes to orders, stock, invoices, products, messages, SMS activity, and profiles. This helps track the history of operations.

37 / STAFF DASHBOARD

Staff Dashboard

The staff dashboard is the starting point for employees. It provides quick access to daily tasks such as orders, customers, dispatch, stock, invoices, returns, and support.

38 / MANAGER OVERVIEW

Manager Overview

The manager overview shows key operational numbers, including orders, pending work, low stock, returns, support conversations, and trade customer activity.

39 / ALERTS

Staff Alerts

Staff alerts highlight items that need attention: pending orders, low stock, overdue invoices, returns, support messages, and stock approvals.

40 / CUSTOMER ACCOUNTS

Customer Search

Customer search helps staff quickly find a user account. Staff can use this view while handling an order, invoice, support case, or customer enquiry.

41 / CUSTOMER DETAILS

Customer Details

Customer details combine profile data, order history, and invoices in one place. Staff can support the customer more effectively without moving through many separate screens.

42 / STAFF ORDERS

Orders

The staff orders page allows employees to monitor active transactions, filter them by status, and open individual records for updates or customer support.

43 / UPDATE ORDER

Change Order Status

This view gives staff a simple way to update order progress and shipping information. Employees can change the status without using the full admin panel.

44 / IN-STORE ORDERS

In-Store Orders

In-store orders support physical shop sales. Staff can scan barcodes, select a customer, add products, and save the transaction directly in the system.

45 / CREATE ORDER

Create Order for Customer

The create order form allows staff to manually place an order on behalf of a customer. It includes shipping, billing, and fulfilment information.

46 / TRADE CUSTOMER

Create Trade Customer

Creating a trade customer allows staff to register a business account. The form collects company data, contact details, address, VAT, and credit limit required for trade support.

47 / SUPPORT

Support Conversations

The support conversations view lets staff browse customer cases. Employees can search a thread, open it, reply to the customer, or delete a finished conversation.

48 / THREAD VIEW

Support Thread View

The thread view shows the full customer conversation and a reply field. Staff can continue contact in one history so the case stays organised.

49 / DISPATCH

Dispatch Queue

The dispatch queue shows orders waiting to be packed or shipped. Staff can check status, tracking number, and open a specific order for updates.

50 / DISPATCH ORDER

Dispatch Order Update

Dispatch order update lets staff change the shipping stage, add or edit tracking, and review the products included in the order.

51 / PRODUCTS

Manage Products

Staff can access the product list for operational store work. They can check stock, product data, item activity, and move into editing when needed.

52 / EDIT PRODUCT

Edit Product with Barcode Preview

Staff product editing includes a barcode preview so employees can verify product identity, stock data, and key information used in the shop.

53 / LOW STOCK

Low Stock / Stock Checks

The low stock page identifies products that have reached or dropped below reorder level. Staff can quickly find items that need replenishment.

54 / INVOICES

Invoices

The staff invoices page shows issued documents in a structured table. Employees can check payment status and support customers with order-related questions.

55 / RETURNS

Returns

The returns page shows customer requests available to staff. Employees can open a case, check the reason, item condition, and current handling status.

56 / REVIEW RETURN

Review Return Request

Return review lets staff make an operational decision. The return can be approved, rejected, or marked as refunded based on the case outcome.

57 / REVIEWS

Reviews

The reviews section shows customer product feedback. Staff can check product name, user, rating, comment, and date to monitor feedback quality.

58 / FINANCE QUEUE

Finance Queue

The finance queue is designed for payment and invoice-matching work. Staff can view invoices waiting for handling or confirmation.

59 / STOCK APPROVALS

Pending Stock Approvals

Pending stock approvals help control stock changes that require approval. Staff or managers can review requests and make a decision.