https://github.com/raiyanu/chat-app

Last synced: 3 months ago
JSON representation

Host: GitHub
URL: https://github.com/raiyanu/chat-app
Owner: raiyanu
Created: 2023-12-30T05:30:29.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-01-01T10:11:07.000Z (over 1 year ago)
Last Synced: 2025-01-20T20:53:27.735Z (4 months ago)
Language: CSS
Size: 14.7 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Chat-App

`A Comprehensive MERN Stack Project with Shadcn UI and NextUI`

## Index

- [Introduction](#introduction)
- [Project Overview](#project-overview)
- [File Structure](#file-structure)
- [Getting start](#getting-started)
- [Todo List](#todo-list)
- [Conversation DataStructure](#conversation-datastructure)
- [Stages](#development-stages)

## Introduction

Welcome to Chat-App, an extensive project showcasing the prowess of the MERN (MongoDB, Express, React, Node.js) stack, coupled with the sleek and modern design principles of Shadcn UI and NextUI. This project serves a multifaceted purpose—acting as a valuable addition to your portfolio, a potent tool for your learning journey, and fulfilling the requisites of a college project with a focus on open-source programming.

## Project Overview

Chat-App boasts an array of features, creating a robust and user-friendly environment:

- **Real-Time Chat Functionality:** Harnessing the power of Socket.IO for seamless and instantaneous communication between users.
- **Secure User Authentication:** Employing JSON Web Tokens (JWT) to ensure a secure and authorized user access mechanism.
- **Efficient Database Storage:** Utilizing MongoDB for its efficiency and scalability in storing and retrieving data.
- **Frontend Design Excellence:** Elevating the user interface with the elegance and flexibility of Shadcn UI and NextUI libraries.
- **Streamlined Build Process:** Enhancing the frontend development workflow with the fast ViteJS build tool.
- **Backend Prowess:** Powering the application with the reliability and flexibility of the Express backend server.

## File Structure

The project's file structure is meticulously organized for clarity and maintainability:

## Getting Started

Follow these steps to set up and run the project:

1. **Clone the Repository:**

```bash
git clone this repo
cd Chat-App
```

2. **Install Dependencies:**

```bash
npm install
```

3. **Run Development Server:**

```bash
npm run dev
```

## Todo List

- [x] **Create a Visually Appealing UI for the Chat App:**
- [x] Design the Chat page
- [x] Develop the Home page
- [x] Create the Signup page
- [ ] Design the Profile page
- [x] Implement the Settings page
- [ ] Develop the About page
- [x] Create the Contact page
- [x] Implement a custom 404 page
- [x] **Set up the Backend for the Chat App:**
- [x] Establish a robust server
- [x] Connect to the database
- [x] Design an efficient user model
- [x] Implement a temporary connection using JSON Server for testing
- [x] Create user routes
- [x] Develop authentication routes
- [x] Set up chat routes
- [x] Design the chat model
- [x] Develop the chat controller
- [x] Implement chat sockets
- [x] Design the chat socket model

## conversation DataStructure

```json
{
"message_id": "unique_message_identifier",
"sender_id": "user123",
"recipient_id": "user456",
"timestamp": "2023-12-29T12:34:56Z",
"content": "Hello!",
"is_read": false,
"attachments": [
{
"type": "image",
"url": "https://example.com/image.jpg"
},
{
"type": "video",
"url": "https://example.com/video.mp4"
}
],
"reactions": [
{
"user_id": "user789",
"emoji": "👍"
},
{
"user_id": "user012",
"emoji": "❤️"
}
],
"mentions": ["user789", "user012"],
"forwarded_from": "another_user",
"reply_to": {
"message_id": "parent_message_id",
"sender_id": "user456",
"content": "Original message content"
}
}

```

## Development Stages

1. **Production on the Frontend:** Elevate and optimize the frontend for a polished and engaging user experience.
2. **Production on User Authentication and Verification:** Implement a secure and efficient user authentication and verification process.
3. **Dynamic Database Integration:** Facilitate dynamic integration with various databases, ensuring the application's independence and adaptability.
4. **User Access to Dynamic Content and Subject:** Empower users with seamless access to dynamic content and subject matter.
5. **Tests and Deployment:** Rigorously test the application and deploy it for public use.
6. **Documentation Enhancement:**
- Provide detailed procedures on building the application.
- Offer comprehensive insights into using alternative databases.
- Outline any necessary changes for adapting to different databases.

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/raiyanu/chat-app

Awesome Lists containing this project

README