Chattinghub

centmarde
6

2 systems(Svelte + Vue3) and 1 backend(DJANGO). Integrating message encryption and decryption. Using the Django Rest Framework.

Download

Secure Chat Application

This project is a secure chat application built using Django REST Framework (DRF) for the backend and Vue.js/Svelte for the frontend. The application supports user authentication, secure message transmission, and a dashboard for managing users and messages.

Features

Login and Registration: User authentication with secure login and registration endpoints.
Sending and Receiving Messages: Secure APIs for message transmission with encryption and decryption.
Security Features: Middleware for encryption, hashing, and request validation.
Dashboard: Intuitive interface to display and manage users and messages.

Project Structure

backend/
├── account/
│   ├── api.py
│   ├── models.py
│   ├── serializers.py
│   ├── urls.py
│   └── views.py
├── chat/
│   ├── models.py
│   ├── serializers.py
│   ├── urls.py
│   ├── views.py
│   └── middleware.py
├── wey_backend/
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
└── requirements.txt

frontend/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── AuthView.vue
│   │   ├── ChatBox.vue
│   │   └── svg/
│   │       ├── BackgroundSvg.vue
│   │       └── ChattingHubSvg.vue
│   ├── layouts/
│   │   ├── LoginForm.vue
│   │   ├── RegisterForm.vue
│   │   └── default.vue
│   ├── pages/
│   │   ├── Dashboard.vue
│   │   ├── index.vue
│   │   └── NotFoundPage.vue
│   ├── router/
│   │   └── index.js
│   ├── stores/
│   │   └── auth.js
│   ├── App.vue
│   ├── main.js
│   └── vite.config.mjs
├── index.html
└── package.json

frontend2/
├── src/
│   ├── auth/
│   │   └── AuthGuard.svelte
│   ├── lib/
│   │   └── TopNav.svelte
│   ├── router/
│   │   ├── chat/
│   │   │   └── +Chat.svelte
│   │   └── routes.ts
│   ├── stores/
│   │   └── authStore.ts
│   ├── App.svelte
│   ├── main.ts
│   └── app.css
├── index.html
├── package.json
└── svelte.config.js

Installation

Backend

Navigate to the backend directory:
```
cd backend
```
Create a virtual environment:
```
python -m venv venv
```
Activate the virtual environment:
- On Windows:
```
./venv/Scripts/activate
```
Install the required packages:
```
pip install -r requirements.txt
```
Run the development server:
```
python manage.py runserver
```

Frontend

Navigate to the frontend directory:
```
cd frontend
```
Install the dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```

Frontend2

Navigate to the frontend2 directory:
```
cd frontend2
```
Install the dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```

Usage

Access the backend API: http://127.0.0.1:8000
Access the first frontend application: http://localhost:3000
Access the second frontend application: http://localhost:5173/

Images

License

Patent Pending. Unauthorized reproduction, distribution, or use of this material is strictly prohibited. 2024 © Centmarde Campado, Joren Verdad & Mardz Lidasan (BSIT) - Caraga State University - College of Computing and Information Sciences. All Rights Reserved.

Backend Documentation

For detailed backend documentation, refer to README.md.

Top categories