Skip to content

Latest commit

 

History

History
385 lines (302 loc) · 22.2 KB

README.md

File metadata and controls

385 lines (302 loc) · 22.2 KB

project-logo

CHAT_ROOM

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

license last-commit repo-top-language repo-language-count


Table of Contents

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

img.png