CHAT_ROOM

An interactive chat application built using FastAPI for the backend and Next.js for the frontend.

Table of Contents

• Overview
• Features
• Repository Structure
• Modules
• Getting Started
  • Installation
  • Usage
  • Tests
• Project Roadmap
• Contributing
• License
• Acknowledgments

---

Overview

chat_room is an interactive chat application designed to facilitate real-time communication between users. The backend is powered by FastAPI, providing a robust and high-performance API. The frontend is built using Next.js, offering a responsive and dynamic user interface.

---

Features

• Real-time Messaging: Enables users to send and receive messages instantly.
• Room Management: Create and join chat rooms.
• Message Persistence: Store and retrieve messages from a database.
• Responsive Design: Accessible on both desktop and mobile devices.

---

Repository Structure

└── chat_room/
    ├── Dockerfile
    ├── LICENSE
    ├── README.md
    ├── app
    │   ├── __init__.py
    │   ├── alembic
    │   ├── alembic.ini
    │   ├── database
    │   │   ├── __init__.py
    │   │   └── postgres.py
    │   ├── main.py
    │   ├── models
    │   │   ├── __init__.py
    │   │   ├── message.py
    │   │   ├── room_member.py
    │   │   ├── room.py
    │   │   └── user.py
    │   ├── requirments.txt
    │   ├── routes
    │   │   ├── __init__.py
    │   │   ├── message.py
    │   │   ├── room.py
    │   │   ├── user.py
    │   │   └── websocket.py
    │   ├── schemas.py
    │   ├── services
    │   │   ├── __init__.py
    │   │   ├── message.py
    │   │   ├── room.py
    │   │   └── user.py
    │   └── test_app.py
    ├── blueprint.md
    ├── docker-compose.yml
    ├── frontend
    │   ├── .eslintrc.json
    │   ├── .gitignore
    │   ├── README.md
    │   ├── components.json
    │   ├── next.config.mjs
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── postcss.config.mjs
    │   ├── public
    │   ├── src
    │   │   ├── app
    │   │   │   ├── globals.css
    │   │   │   └── layout.tsx
    │   │   ├── components
    │   │   │   ├── AlertsComponent.tsx
    │   │   │   ├── room
    │   │   │   │   ├── RoomComponent.tsx
    │   │   │   │   ├── RoomMessageComponent.tsx
    │   │   │   ├── ui
    │   │   │   │   ├── alert.tsx
    │   │   │   │   ├── button.tsx
    │   │   │   │   ├── card.tsx
    │   │   │   │   ├── toast.tsx
    │   │   │   │   ├── toaster.tsx
    │   │   │   │   └── use-toast.ts
    │   │   │   ├── users
    │   │   │   │   └── SignupComponent.tsx
    │   │   ├── hooks
    │   │   │   └── webSocket.tsx
    │   │   ├── lib
    │   │   │   ├── userStorage.ts
    │   │   │   └── utils.ts
    │   │   ├── pages
    │   │   │   ├── _app.tsx
    │   │   │   ├── index.tsx
    │   │   │   ├── room.tsx
    │   │   │   └── rooms
    │   │   │       └── [roomId].tsx
    │   │   └── services
    │   │       ├── roomService.ts
    │   │       └── userService.ts
    │   ├── tailwind.config.ts
    │   └── tsconfig.json
    ├── next.Dockerfile
    ├── package-lock.json
    └── package.json

Modules

.

File	Summary
Dockerfile	Docker configuration for backend containerization.
package-lock.json	Auto-generated file that locks versions of dependencies.
package.json	Lists the project's dependencies and scripts.
docker-compose.yml	Docker Compose configuration for multi-container setup.
next.Dockerfile	Docker configuration for frontend containerization.

app

File	Summary
schemas.py	Defines Pydantic models for data validation.
requirments.txt	Lists the Python dependencies.
main.py	Entry point for the FastAPI application.
test_app.py	Contains test cases for the application.

app.database

File	Summary
postgres.py	Configures the connection to the PostgreSQL database.

app.models

File	Summary
user.py	SQLAlchemy model for user data.
message.py	SQLAlchemy model for message data.
room_member.py	SQLAlchemy model for room membership data.
room.py	SQLAlchemy model for room data.

app.alembic

File	Summary
script.py.mako	Template for Alembic migration scripts.
env.py	Alembic environment configuration.

app.alembic.versions

File	Summary
d9a352f861be_update_models_with_relationships_and_.py	Migration script for model updates.
ecb8a57150aa_initial_migration.py	Initial migration script.

app.routes

File	Summary
user.py	API routes for user operations.
message.py	API routes for message operations.
room.py	API routes for room operations.
websocket.py	API routes for WebSocket connections.

app.services

File	Summary
user.py	Service logic for user operations.
message.py	Service logic for message operations.
room.py	Service logic for room operations.

frontend

File	Summary
postcss.config.mjs	PostCSS configuration.
next.config.mjs	Next.js configuration.
tailwind.config.ts	Tailwind CSS configuration.
package-lock.json	Auto-generated file that locks versions of dependencies.
package.json	Lists the project's dependencies and scripts.
components.json	Component configuration file.
tsconfig.json	TypeScript configuration.
.eslintrc.json	ESLint configuration.

frontend.src.app

File	Summary
layout.tsx	Layout component for the application.
globals.css	Global CSS styles.

frontend.src.components

File	Summary
AlertsComponent.tsx	Component for displaying alerts.

frontend.src.components.ui

File	Summary
card.tsx	UI component for displaying cards.
toaster.tsx	UI component for displaying toasts.
alert.tsx	UI component for displaying alerts.
use-toast.ts	Hook for managing toasts.
button.tsx	UI component for buttons.
toast.tsx	UI component for displaying toast messages.

frontend.src.components.room

File	Summary
RoomComponent.tsx	Component for displaying a chat room.
RoomMessageComponent.tsx	Component for displaying messages within a chat room.

frontend.src.components.users

File	Summary
SignupComponent.tsx	Component for user signup.

frontend.src.hooks

File	Summary
webSocket.tsx	Hook for managing WebSocket connections.

frontend.src.lib

File	Summary
userStorage.ts	Utility for managing user storage.
utils.ts	Utility functions used across the frontend.

frontend.src.pages

File	Summary
index.tsx	Main page of the application.
room.tsx	Page for displaying a specific chat room.
_app.tsx	Custom App component for Next.js.

frontend.src.pages.rooms

File	Summary
[roomId].tsx	Dynamic page for displaying a specific room by ID.

frontend.src.services

File	Summary
userService.ts	Service for managing user-related API calls.
roomService.ts	Service for managing room-related API calls.

Getting Started

System Requirements:

• Python: version 3.8+
• Node.js: version 14+
• Docker: version 20+
• Docker Compose: version 1.29+
• Next.js: version 11+

Installation

From source

1. Clone the chat_room repository:

   git clone https://github.com/amworden/chat_room

2. Create a .env file in the project python director and add the following environment variables:

   touch app/.env

   POSTGRES_USER=postgres
   POSTGRES_PASSWORD=postgres
   POSTGRES_DB=chat_room
   POSTGRES_HOST=postgres
   POSTGRES_PORT=5432

3. Change into the project directory and run the docker-compose command:

   cd chat_room && docker-compose up -d --build 

4. Apply the migrations:

   docker-compose exec python alembic upgrade head

5. The application will be accessible at http://localhost:3000.

6. To run the tests, execute:

   docker-compose exec python pytest

7. To stop the application, run:

   docker-compose down

Database Structure