Technical Overview

Introduction

Team Radio is an open source application for sharing and listening music in realtime like a live radio.

Now we just support Youtube video. All members of team can watch a video at the same time.

The frontend is using ReactJS v16, Redux, Bootstrap v4, Webpack v4.

UI

UI is based on template CoreUI-React.

Authentication

• OAuth2 (Facebook, Google)
• OAuth (back-end)

Realtime technology

• SSE (Server-Sent-Event): See in Services/SSE

Folder Structure

team-radio/
    README.md
    node_modules/
    package.json
    webpack.config.js
    env
        ...
    .env
    public
        img
            …
        index.html
        favicon.ico
    scss
        …
    src
        BaseComponents
        Components
            …Common Components
        Configuration
            DependencyInjection
            Redux
            ServiceWorker
        Containers
            FullLayout
        Models
            User
            Station
            Song
        Helpers
            …
        Services
            Http
                UserServices
                StationServices
                ...
            SSE
                StationChatSSEService
                StationPlaylistSSEService
                ...
        Modules
            User
                Components
                    Login
                    Register
                    ...
                Redux
                  Actions
                    ...
                  Constants
                    ...
                  Types
                    ...
                  Reducers
                    ...
            Station
                Components
                    ...
                Redux
                  Actions
                    ...
                  Constants
                    ...
                  Types
                    ...
                  Reducers
                    ...
        Pages
            ForgotPassword
            Help
            Home
            Login
            Profile
            Register
            ResetPassword
            Station
            ...
        index.tsx
        routes.ts

For the project to build, these files must exist with exact filenames:

• public/index.html is the page template;
• src/index.tsx is the TypeScript entry point.

You can delete or rename the other files.

In folder Modules, features will be split by 2 big features: User and Station. All feature code will be in Modules.

In folder Pages, each page is just the combination of many modules. It defines position and custom style for module. So it's easy to change structure of a page, you just need to put a module into the right position.