Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/omkar4965/quillconnect

Developed "QuillConnect," a full-stack social media web application enabling user account creation, posting, following, liking, commenting, and real-time chatting using WebSockets.
https://github.com/omkar4965/quillconnect

firebase mern-stack mongodb socket-io

Last synced: about 1 year ago
JSON representation

Developed "QuillConnect," a full-stack social media web application enabling user account creation, posting, following, liking, commenting, and real-time chatting using WebSockets.

Awesome Lists containing this project

README 

          
# QuillConnect Documentation

## 1. Introduction

QuillConnect is a social media platform where users can:

Create accounts.

Post images, text, or both.

Follow and interact with other users by liking and commenting on posts.

Chat with users in real-time through a WebSocket-powered chat system.

Manage a profile page displaying personal details, posts, and followers/following.

## 2. Technology Stack

Front-end: React with Chakra UI for responsive and reusable components.

Back-end: Node.js with Express for API management.

Database: MongoDB for storing users, posts, comments, and follower/following relationships.

Real-time Communication: Socket.IO for live chat and displaying online friends.

Hosting: Vercel for front-end hosting.

## 3. Features and Implementation

### 3.1 User Authentication

Current Setup: Basic login and registration forms. No added security mechanisms such as JWT or OAuth are implemented yet.

Future Improvement: For enhanced security, consider implementing token-based authentication using JWT or OAuth for session management.

### 3.2 Profile Management

Users can view their profile, which includes:

Profile picture.

Cover picture.

Personal information (editable via a form).

List of their posts.

Display of followers and followings.

Implementation:

Profile editing is handled through a simple form, allowing users to update their details.

Changes are submitted via API calls to the backend, where they are updated in MongoDB.

### 3.3 Posts

Users can post content in the form of text, images, or a combination of both.

Image Upload:

Images are uploaded without any size or format restrictions.

No additional optimizations for file storage or compression are implemented yet.

Future Improvement: Consider adding file size limits or optimizations to ensure performance on larger uploads.

### 3.4 Followers and Following

Each user has two arrays in their database schema:

Followers: Stores the user IDs of those following the user.

Following: Stores the user IDs of users that the current user is following.

Implementation: Following/unfollowing is implemented through API calls that update these arrays in MongoDB.

### 3.5 Real-time Chat

Implementation: Real-time chat is powered by Socket.IO, which allows users to exchange messages instantly.

Online Friends: Users who are online are displayed on the homepage through a WebSocket connection.

### 3.6 UI Design

The interface is designed using Chakra UI, which provides reusable, responsive components that simplify front-end development.

User Experience: The UI provides a clean and minimal design, ensuring a seamless user experience across devices.

### 3.7 Hosting

The front-end of QuillConnect is hosted on Vercel, providing fast and reliable deployment.

No CI/CD pipelines have been set up, but this could be a future enhancement to streamline deployment processes.

## 4. Areas for Improvement

### Security: Implement token-based authentication like JWT and OAuth.

### Image Handling: Add file size and format restrictions to improve performance.

### Notifications: Implement real-time notifications for likes, comments, and new messages.

### Scalability: Introduce caching mechanisms and consider load balancing strategies as the platform grows.