Introduction

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:
  • Using their existing Google account (via Google's auth API)
  • Using the public demo account, provided specifically for briefly touring 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 JSON Web Tokens (JWTs).
• 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. 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.

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