May 2024

Mini-Instagram

A complex, feature-filled photo-sharing social media platform, inspired by Meta’s Instagram. Supports standard user functions (like, comment, post, message, search), plus more!

Tech Stack: TypeScript, React, CSS, Spark Java, mySQL, AWS services (RDS, EC2), Apache Kafka, ChromaDB, ChatGPT API

01.

Key Application Pages.

User Registration

Users are prompted with a page to login/sign up. New users input a slew of information, including their birthday, affiliations, and authorization credentials.

User Profile

On a user’s profile page, they can see their user information, posts, friends, recommendations, and an ability to edit their profile. Notice the bio of this user. Each user is linked to an actor* (using image vector databases) in this rendition of Instagram!

Chats

Users can message other users. Any accepted chat requests will filter into this interface, and users can select any corresponding chat and interact with other group chat members. From here, users can invite new friends to the chat as well. These chats persist between login attempts.

Home Screen

Upon logging in, users are presented with their running feed, including relevant posts & their corresponding textual & visual content, likes, and comments. Users have the ability to interact with these posts. On the right side, we’re provided with potential friend recommendations.

Notifications

This page serves to notify users of incoming friend/chat requests. Users have the ability to accept/deny this request as they see fit. Accepted friends should show up in their friends list (viewable from profile) and get removed from their friend recommendations list (viewable from home screen & profile).

Search page

02.

Frontend Technologies

Component-based architecture: encourage reusable UI elements across pages.

State & Hooks: active & dynamic rendering of content.

Development Bulk: All frontend pages/ components written in TypeScript.

Static Typing: Catches type errors at compile time, rather than runtime.

Styling Components: uniquely designed UI elements.

Layout Control: fine grained control of UI positioning.

Bootstrap: built-in classes.

03.

Backend Technologies

Modular Tables: encouraged compartmentalized & customized data storage.

Made table for users, posts, comments, likes, friends, recommendations, requests, & hashtags.

RESTful API: allows for straightforward CRUD (Create, Read, Update, Delete) database operations.

Event-driven Architecture: handles large number of simultaneous connections.

Friend & feed recommendation algorithms, to customize user experiences, were computed in Spark java to allow for faster & more scalable computation.

Elastic Compute (EC2): Virtual server to run and deploy web application.

Relational DB (RDS): Store application data with enhanced security & management.

Amazon S3: Image hosting.

04.

Advanced Features

Face Matching

Stored a large database of actor images as vectors in ChromaDB (a vector database), and for a given user, determined top 5 “closest-looking” actors via cosine similarity between user profile picture vector and database vectors.

Recommendations

Determine mutual friend relationships between pairs of users, and their corresponding strengths. For given user X, we return the HIGHEST social rank users (i.e. most “connected” users) from all the users that X has a mutual friend with.

Apache Kafka

Subscribe to Twitter-API topic, accept an incoming stream of “tweets” daily, and store them in our post content databases. Have these tweets displayed on users’ feed when relevant/consistent with their interests.