Introduction

Ever wondered what it takes to build a fully-fledged social platform from the ground up? I know I did. Introducing Ribbit, a meticulously crafted, pixel-perfect clone of Reddit that mirrors both its functionality and appearance down to the finest detail.

Developed using React, Flask, SQLAlchemy, Redux, and Flask-SocketIO, Ribbit isn't just a basic replica; it's a feature-rich application boasting live chat, real-time interactions, customizable community settings, and a host of interactive elements. This project stands as a testament to my full-stack development skills and unwavering dedication to delivering an authentic user experience that matches the original platform in every aspect.

Project Overview

Purpose and Inspiration

Ribbit was created out of a genuine desire to learn the complexities of building a large-scale, interactive web application from scratch. I was specifically interested in developing a social media app, and Reddit -- being a cornerstone of online communities with its rich features and vast array of different communities -- seemed the perfect opportunity.

By meticulously recreating Reddit's functionality and appearance with pixel-perfect precision, I aimed to push the boundaries of my full-stack development skills and gain hands-on experience with real-time communication technologies. The goal wasn't merely to replicate an existing platform, but to internalize the best practices that make such a large-scale application performant and user-friendly. Ribbit became a sandbox for experimentation and learning, allowing me to delve into the minutiae of fullstack integration, optimize user experience, and pay homage to the multitude of small details that elevate such a platform from good to exceptional.

Primary Technologies Used

To bring Ribbit to life with the level of functionality and polish envisioned, I employed the following tech stack:

Frontend

• React - Used for building reusable components and creating a dynamic, responsive user interface.
• React-Router - Facilitates smooth navigation between different views without the need for full page reloads.
• Redux - Manages the application’s state in a predictable way, simplifying data flow and state debugging.
• CSS3 - Utilizes modern styling techniques to create a visually appealing and responsive design across all devices, including the use of CSS variables.

Backend

• Flask - Chosen for its lightweight and flexible nature, allowing rapid development and easy customization to meet Ribbit’s specific backend needs.
• SQLAlchemy - Provides a powerful ORM that simplifies database interactions and efficiently handles complex data relationships like users, posts, and comments.
• Flask-SocketIO / WebSockets - Implemented to support real-time features such as live updates and instant notifications, enhancing user engagement on Ribbit.

Testing

• Jest - Used for its fast and reliable JavaScript testing capabilities, ensuring Ribbit’s frontend code remains robust and error-free.
• React-Testing-Library - Facilitates testing of React components from the user’s perspective, ensuring the interface behaves as expected.

Database Schema

Key Features

User Management

Effective user management is the cornerstone of any thriving online community, and Ribbit excels in this domain by offering a comprehensive and intuitive system that mirrors the functionality of Reddit.

User Accounts

Ribbit's authentication system provides a secure and seamless registration process, allowing users to create accounts effortlessly while ensuring that user data is handled securely.

• Variety of sign-in options - Users can sign into an account on Ribbit using one of three available options:
  • With their existing Google account (via Google's auth API)
  • Using the public demo account, provided specifically for temporary access to tour Ribbit's features
  • By signing up for and signing in with a unique Ribbit account
• Secure authentication - Ribbit ensures that user sessions are managed securely through the use of the packages like Flask-Login and WTForms (for form validation), password hashing, and CSRF protection, among others.
• Password encryption - User passwords are hashed and salted using robust algorithms, ensuring that sensitive information remains protected even in the event of a data breech.

User Profiles

Each user with an account has their very own profile page, which other users can use to learn about the user and contact them.

• Customizable settings - Users can update essential information such as their display name, user bio, and profile picture, fostering a sense of ownership and community engagement. In addition, users can change their profile's banner, adding a touch of personalization to their page.
• Unique user information - Profiles contain the user's posts as well as account stats like karma, followers, and account creation date. In addition, when a user visits their own profile, they'll find a list of their owned communities for easier management.
• Contact options - Others can visit a user's profile page to find contact options such as private messaging and live chat, as well as the ability to follow the user.

Following and Favoriting Users

All users have their own 'homepage feed', which contains a curated feed of posts. One of the ways to customize this feed is by following other users they find interesting, whose posts will then appear in the homepage feed. Followed users appear in their own 'Followers' list in the left nav dropdown menu. A user is able to view the list of their followers (users following them) on their profile page, as well as their total followers count.

Shown above, followed users are then able to be 'favorited' by toggling the star icon next to the user's name in the Followers section. When a user is favorited, they are put in the 'Favorites' section at the top of the left nav dropdown menu, making it easy to navigate to their profiles and keep track of the content creators that the user is into.

Community Interaction

Community Management and Creation

Ribbit empowers users to create and manage their own communities, mirroring the subreddit funcitonality of Reddit. This feature facilitates the formation of niche groups centered around specific interests, topics, or activities.

• Community creation - Users can create new communities by using the community creation form. After providing a unique community name that fits within the confines of community name restrictions, the community is created and the user can take control over their group.
• Community rules - Each community has its own set of rules, which the community's owner must write and submit themselves from within the community's settings.
• Moderation - Community owners are able to moderate their communities. They are able to edit and delete posts that break the commnity's rules, allowing them to manage their spaces effectively.

Subscriptions and Favoriting Communities

Users have the ability to customzie their content consumption by subscribing to specific communities, curating their homepage feed to include the posts from these communities. This allows Ribbit users to tailor their experience to their specific interests.

Once a community has been subscribed to, the user can take it a step further by 'favoriting' the community, which is done by toggling the star icon next to the community's name in the left nav menu. A 'favorited' community appears in the 'Favorites' list at the top of the menu, alongside favorited followed users, making it easy for the user to navigate to their top communities as well as keep track of them from this list.

Community Appearance Settings

Community owners have the complete freedom to style their communities from the community appearance settings. This includes the community's icon, banner, background, and theme colors, as well as other small details. A preview of the community offers a look at what the community will look like in real time before the user commits to the change.

Content Creation

Posting Text, Images, or Links

Users have access to multiple kinds of post feeds across Ribbit.

• Homepage feed - A user's homepage feed consists of posts from their followed users as well as their subscribed communities, allowing them to curate their feed to their own interests. Subscribing to the 'webdev' community, for example, ensures that posts from webdev appear in the homepage feed. Similarly, following the user 'Demo' makes it so that Demo's posts are on the homepage feed as well.
• 'All' feed - The 'All' feed is a universal feed that contains all of the posts across Ribbit's many communities. As such, the 'All' feed is the same for all users, regardless of personal taste.
• Community feed - Each community has its own post feed, consisting of nothing more than the community's own posts. This feed is located on the community's page.
• User feed - User profiles contain the user's posts, so the feed on the user profile is the user feed.

All of the above feeds are able to be sorted. When sorting by 'Top', posts with the most upvotes are at the top of the list. Users can also sort by 'New', which is based on when the post was posted, with newer posts coming before older posts in the feed.

In addition, there are 3 different kinds of formats that users can choose between: Card, Classic, and Compact.

There are three types of posts users are able to create:

• Text posts - Within the text post form is a rich text editor, giving users the ability to stylize their posts with headers, bold text, italics, lists, and more, enhancing readability and presentation. The rich text edtior gives the user the ability to preview their post in real time, ensuring accuracy and satisfaction.
• Image posts - Integrated with AWS S3, the image post form enables the user to upload an image from their computer with ease.
• Link posts - When all it takes to convey a message or share information is a simple link, users are able to utilize the link post type, which allows them to post a URL with a title describing the link.

Commenting System

Engaging conversations and collaborative discussions are faciliated through Ribbit's robust commenting system, designed to promote meaningful interactiosn within communities. Users are able to edit their comments to refine their thoughts or correct mistakes, ensuring clarity and coherence in discussions. They may also delete their comments, allowing them to manage their contributions and maintain the integrity of their interactions.

Voting System

A robust voting mechanism is integral to Ribbit, enabling users to express their opinions and influence the visibility of content within the platform.

• Content ranking - Posts and comments can be upvoted or downvoted, determining their prominence within communities and feeds based on user engagement and relevance.
• Score display - Each post and comment displays its current score, providing immediate feedback on its popularitry and community reaction.
• Efficient state handling- Utilizing Redux ensures that voting statres are managed consistently across the application, maintaining synchronization between the frontend and backend.
• Optimistic UI updates - Votes are reflected instantly in the user interface, enhancing responsiveness while backend confirmastions ensure data integrity.

User-to-User Communication

Real-Time Live Chat Functionality

Messaging Between Users

Real-Time Notifications

1. Functionality replication: The core focus was on replicating Reddit's essential features, including user management, community creation, content submission, voting, commenting, and user interactions.
2. Database design: Designing an efficient and scalable database schema using SQLAlchemy to store user data, posts, comments, votes for posts and comments, and other information.

3. User interface (UI) design: Crafting an intuitive and visually appealing user interface with React and Redux to enhance the overall user experience and ensure ease of navigation.
4. User authentication and authorization: Implementing a robust user authentication system with Flask and JWT to ensure secure access to the application's features.
5. Real-time features: Integrating socket.io to provide real-time user interactions through the live chat feature.
6. Image uploads (AWS S3): Integrating AWS S3 for seamless image uploads and storage for user profiles and community content.

Tech Stack

• Frontend: React.js, Redux for state management, and socket.io for real-time features.
• Backend: Flask, a lightweight Python web framework for handling HTTP requests, authentication, and data processing.
• Database: SQLAlchemy, a Python SQL toolkit, for efficient database interactions and data storage.
• User authentication: JSON Web Tokens (JWT) for secure user authentication and authorization.
• Real-time features (live chat): Socket.io for real-time communication between users and live chat functionality.
• Image uploads (AWS S3): Integration with AWS S3 for image uploads and secure storage.
• Version control: Git and Github for efficient version control and code management.

Features

Users

Communities

Subscriptions

Community Rules

Posts

Comments

Post Votes

Comment Votes

Image Uploads (AWS S3)

Followers

Search

Favorite Users

Favorite Communities

Recently Viewed Posts

Messaging

Notifications

Live Chat (using socket.io)

Challenges Faced

1. Real-time features: Implementing real-time features such as live chat and notifications required understanding websockets and designing efficient event-driven systems.
2. Image uploads and storage: Integrating AWS S3 for image uploads and secure storage demanded proper configuration and secure handling of user-uploaded content.
3. Scalability: Designing a scalable architecture to handle increased user activity, messaging, and live chat interactions was a critical consideration.
4. Messaging system: Building a comprehensive messaging system with proper authentication, authorization, and secure communication required careful planning and implementation.

Lessons Learned

1. Integration of real-time features: Understanding the concepts of websockets and event-driven architecture for implementing real-time features.
2. AWS S3 integration: Learning to use AWS S3 for secure image uploads and storage, ensuring a seamless user experience.
3. Scalability and optimization: Designing a scalable architecture and optimizing database interactions for increased user activity.
4. Comprehensive messaging system: Building a messaging system with proper authentication, authorization, and secure communication required meticulous planning and implementation. Understanding the intricacies of real-time communication and secure messaging was essential.
5. Folder structure and organiziation for large projects: Deviating from the default folder structure by organizing the project folder structure in a way that makes sense for the project's size and specifications.

Ribbit vs. Reddit: A Direct Comparison

Homepage

Messages

Communities