Ribbit

A feature-rich pixel-perfect clone of the social media site Reddit.com
Table of Contents

Quick Facts

  • Project title: Ribbit
  • Description: A feature-rich pixel-perfect clone of Reddit.
  • Tech stack: React, Redux, Flask, SQLAlchemy, Flask-SocketIO, and various libraries and tools.
  • Features (click to toggle)
    • Users
    • Communities
    • Subscriptions
    • Posts
    • Comments
    • Post Votes
    • Comment Votes
    • Community Rules
    • Search
    • Recently Viewed Posts
    • Community Appearance
    • Followers
    • Favorite Users
    • Favorite Communities
    • Messages
    • Notifications
    • Live Chat
    • Image Uploads
  • Github Repo: Link
  • Live demo: Link
  • Tech docs: Download

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.

Ribbit homepage

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

Ribbit's database schema
This is a diagram of Ribbit's database schema, which shows a visual of the app's database. Ribbit has become rather intricate, its database containing over 15 tables and over 25 relationships between them.

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

User profile

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

A user's followers

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.

The followers and favorites lists

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.

Above is a video showing the community's appearance settings page. The community preview shows what the community will look like in real time as the user changes the community's colors. When the user clicks the 'Save' button and returns to the community's page, the changes are in effect.

Content Creation

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

The primary objectives for Ribbit were as follows:
  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. Schema
  4. 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.
  5. User authentication and authorization: Implementing a robust user authentication system with Flask and JWT to ensure secure access to the application's features.
  6. Real-time features: Integrating socket.io to provide real-time user interactions through the live chat feature.
  7. Image uploads (AWS S3): Integrating AWS S3 for seamless image uploads and storage for user profiles and community content.

Tech Stack

To achieve the goals for Ribbit, a robust tech stack was chosen, combining the best tools and technologies:
  • 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

Ribbit offers a rich array of features designed to create an immersive and engaging social experience.

Users

The application allows users to sign up for new accounts, log in to existing accounts, and manage their profiles. Users can update profile information including a profile picture and bio to personalize their presence on the platform.
Ribbit - User Profile
Users who wish to briefly visit Ribbit for the purposes of demoing the application can use the demo login feature, offered as a button at the top of the "Log In" window.
Ribbit Log In

Communities

aaaReferred to as 'subreddits' on Reddit, users have the ability to create new communities dedicated to specific topics or interests. Community creators can define rules and guidelines for their respective communities, ensuring a safe and respectful environment for all members. They can also customize community information (such as the community's image and 'About' section), and have the power to delete the community.
Ribbit community

Subscriptions

Users can subscribe to their favorite communities, which adds the community's posts to the user's front page feed, and makes it easily accessible by adding it to both the navigation dropdown and the 'Communities' list on the post creation page. Subscriptions also enable users to stay engaged with their areas of interest.

Community Rules

Community creators can establish rules and guidelines for their respective communities. These rules help maintain a positive community environment by setting standards for content and behavior.

Posts

Users can submit various types of content, such as links, images, and text-based posts, to existing communities. Posting allows users to share information, express opinions, and contribute to the community.

Comments

Users can engage in discussions by leaving comments on posts. Comments facilitate conversations and allow users to express their thoughts on various topics.

Post Votes

The voting system allows users to upvote or downvote posts, influencing their visibility and popularity within the community. Voting promotes the best content and determines what gains visibility.

Comment Votes

Similarly, users can vote on comments, promoting thoughtful and relevant discussions. Comment voting allows users to express agreement or disagreement with specific comments.

Image Uploads (AWS S3)

The platform integrates with AWS S3 to enable users to upload images for their profiles and communities. Community owners can set rules for image uploads to ensure that content aligns with community guidelines.

Followers

Users can follow other users to stay updated on their posts, which will appear on the user's main feed. This enables users to engage with content from users they find interesting or influential.
Ribbit followers
A powerful search functionality allows users to find communities, posts, and users based on keywords and relevant criteria. The search feature enhances content discoverability and user satisfaction.

Favorite Users

Users can mark followed users as favorites, making it easier to access their content. The favorite users feature streamlines the process of following specific users and viewing their contributions.
Ribbit favorites

Favorite Communities

Users can also mark subscribed communities as favorites for quick access to their preferred content. Favorite communities enhance the user experience by allowing quick navigation to frequently visited communities.

Recently Viewed Posts

A section for recently viewed posts helps users keep track of the content they have interacted with recently. The feature aids in returning to interesting content that users might want to revisit or engage with further.
Ribbit: Recently Viewed Posts

Messaging

The comprehensive messaging system allows users to send private messages to other users within the platform.
Ribbit messages

Notifications

Users receive notifications for new messages, post replies, and new followers.

Live Chat (using socket.io)

The live chat feature enables real-time discussions between community members, enhancing user engagement.

Challenges Faced

Developing Ribbit presented several challenges that demanded innovative solutions.
  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

Ribbit provided invaluable insights into building complex and dynamic web applications. Some key takeaways include:
  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

To illustrate how close - or different - various aspects of Ribbit are to/from their Reddit equivalents, I have some image comparison sliders here. To show more of the Ribbit image, drag the slider to the right. Likewise, to show more of the Reddit image, drag the slider to the left.

Homepage

Ribbit's version
Reddit's version

Messages

Ribbit's version
Reddit's version

Communities

Ribbit's version
Reddit's version