Clamor - Community & Chat Application

This is the source code repository for the Clamor project. Clamor is a voice, video and text communication platform where users can sign up for free and join a number of groups. Within each group, users can make new friends by participating in channel conversations, calls and video hang-outs.

The project is broken into two parts; frontend/ and backend/. Each project has an individual npm project and dependencies. The frontend is an Angular 18 SPA, with the backend being a ExpressJS webserver.

Git has been used during the development of this project for version control & data backups. As this project has a solo developer, a strict branching strategy such as feature branching is not required. The branching strategy on the project is to create a new branch when a major change is required that might not be merged to main.

Project Link: https://github.com/maze7/clamor

3813ict/
├── docs/
├── frontend/
│   ├── .angular/
│   ├── .vscode/
│   ├── node_modules/           # Library root for dependencies
│   ├── public/                 # Public assets and files
│   ├── src/                    # Source code for the frontend
│   ├── .editorconfig           # Editor configuration
│   ├── .gitignore              # Git ignore file
│   ├── angular.json            # Angular project configuration
│   ├── package.json            # NPM package configuration
│   ├── package-lock.json       # NPM lock file
│   ├── README.md               # Frontend-specific README
│   ├── tailwind.config.js      # Tailwind CSS configuration
│   ├── tsconfig.app.json       # TypeScript configuration for the app
│   ├── tsconfig.json           # Global TypeScript configuration
│   └── tsconfig.spec.json      # TypeScript configuration for tests

├── server/
│   ├── data/                   # Static data for the backend
│   │   ├── groups.json         # JSON data for groups
│   │   └── users.json          # JSON data for users
│   ├── node_modules/           # Library root for dependencies
│   ├── src/                    # Source code for the backend
│   │   ├── middleware/         # Middleware logic
│   │   ├── models/             # Database models
│   │   ├── routes/             # API routes
│   │   └── util/               # Utility functions
│   ├── .env                    # Environment configuration file
│   ├── .gitignore              # Git ignore file
│   ├── package.json            # NPM package configuration
│   ├── package-lock.json       # NPM lock file
│   └── server.js               # Entry point for the backend server

• Frontend: Uses Angular, Tailwind CSS
• Backend: Node.js, Express, MongoDB

1. Navigate to the frontend folder:

   cd frontend

2. Install dependencies:

   npm install

3. Start the Angular development server:

   ng serve

1. Navigate to the server folder:

   cd server

2. Install dependencies:

   npm install

3. Start the backend server:

   node server.js

The components directory contains reusable UI elements and specific application sections that define the interface and behavior of the application.

• add-user-modal: Component for the modal interface to add a new user.
• channel-nav: Navigation component for switching between different channels.
• chat: Component handling the chat functionality, including messages and interactions.
• call: Component for handling video calls with other users.
• create-user: Component for creating a new user.
• group-settings: Component to configure group settings, including managing members and admins.
• nav: Component for the main navigation of the application.
• new-channel-modal: Modal component for creating new channels within a group.
• new-group-modal: Modal component for creating new groups.
• people: Component to manage or display the people/users involved in the current session or chat.

Guards are used to control navigation and access based on authentication or roles.

• admin.guard.ts: Guard that restricts access to specific routes for users with an admin role.
• auth.guard.ts: Guard that checks if the user is authenticated before granting access to certain routes.

Interceptors are used to modify or monitor HTTP requests and responses.

• auth.interceptor.ts: Intercepts HTTP requests to attach authentication tokens (e.g., JWT) for secured communication with the backend API.

Models define the data structures used throughout the application.

• auth.model.ts: Represents authentication-related data, such as user information and tokens.
• channel.model.ts: Represents a channel, including properties like ID, name, and members.
• group.model.ts: Represents a group entity, including properties like name, acronym, owner, members, and channels.
• user.model.ts: Represents a user entity with properties like username, email, roles, and status (banned or flagged).
• message.model.ts: Represents a single chat message, with properties like user, message, images and date.

The pages directory contains components responsible for specific views or routes of the application.

• admin: Page for managing users and groups with administrative privileges.
• chat: Page for viewing and interacting in chat channels.
• call: Page for handling video calls with other users.
• dashboard: The main dashboard page of the application.
• group: Page for displaying group-specific information and managing group settings.
• login: Page for user authentication (login form).
• profile: Page for viewing and editing user profile details.
• register: Page for user registration.

Services handle the business logic and communication with the backend API.

• auth.service.ts: Handles authentication-related operations such as login, logout, token management, and user registration.
• group.service.ts: Manages group-related operations like creating groups, fetching groups, and updating group data.
• user.service.ts: Handles user-related operations such as fetching user data, updating user information, and managing user roles.
• websocket.service.ts: Handles socket management for real-time communication with the server.

The app.routes.ts file defines the routing structure of the application, mapping URL paths to specific components or pages, such as login, chat, and group views.

The User interface represents an individual user within the system.

• Fields:
  • _id? (optional string): Unique identifier for the user, typically from the database.
  • username (string): The user's username, used for identification in the application.
  • email (string): The user's email address.
  • id (string): Another identifier for the user, possibly for frontend purposes.
  • avatar? (optional string): URL to the user's avatar image.
  • roles (string[]): An array of roles assigned to the user (e.g., ["admin", "member"]).
  • banned (boolean): Indicates whether the user is banned from certain actions.
  • flagged (boolean): Indicates whether the user has been flagged for attention by administrators.

The Group interface represents a group of users in the application.

• Fields:
  • _id? (optional string): Unique identifier for the group.
  • name (string): The name of the group.
  • acronym (string): Shortened version of the group's name.
  • owner (User): The user who owns the group.
  • members (User[]): An array of users who are members of the group.
  • admins (User[]): An array of users who are administrators of the group.
  • pendingAdmins (User[]): An array of users awaiting approval to become administrators.
  • pendingMembers (User[]): An array of users awaiting approval to become members.
  • banned (User[]): An array of users who have been banned from the group.
  • channels (Channel[]): An array of channels associated with the group.

The Channel interface represents a communication channel within a group.

• Fields:
  • _id (string): Unique identifier for the channel.
  • name (string): The name of the channel.
  • members (User[]): An array of users who are members of the channel.

The Message interface represents a chat message within a Channel.

• Fields:
  • _id (string): Unique identifier for the message.
  • user (User): The user that sent the message (populated struct).
  • message (string): The chat message that was sent.
  • channel (string): The identifier of the channel the message was sent to.
  • group (string): The identifier of the group the message was sent to.
  • createdAt (Date): The date / time the message was sent.
  • images (string[]): An optional array of image urls for uploaded images.

• File size limit: 5MB.
• Supported formats: PNG, JPG, JPEG, and WEBP.
• Error Handling:
  • 400: Returned when no file is uploaded, file size exceeds the limit, or the file format is invalid.
  • 500: Returned in case of server-related errors.

• The frontend uses Tailwind CSS & DaisyUI for styling, and the backend API is structured using Express.
• Data files such as groups.json and users.json in the data folder serve as a temporary 'database' for frontend functionality.

Callan Acton (s5283721)

Project Link: https://github.com/maze7/clamor

(back to top)