Table of Contents
- Introduction
- Project Goals
- Tech Stack
- 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
- Lessons Learned
- Ribbit vs. Reddit: A Direct Comparison
- Homepage
- Messages
- Communities
Introduction
Ribbit is a sophisticated web application developed to replicate the core functionalities of Reddit, a popular social news aggregation site and discussion platform.
This project serves as a showcase of my expertise in software engineering and full-stack web development, utilizing a tech stack comprising of Flask, SQLAlchemy, React, and Redux. Ribbit aims to provide users with a comprehensive social experience by incorporating a wide array of features, including live chat using socket.io, image uploads using AWS S3, and an extensive content submission system.
Quick Facts
- Project title: Ribbit
- Description: A feature-rich pixel-perfect clone of Reddit.
- Tech stack: React, Redux, Flask, SQLAlchemy, socket.io, and various libraries and tools.
- Features (click to show/hide)
- Users
- Communities
- Subscriptions
- Posts
- Comments
- Community rules
- Post votes
- Comment votes
- Search
- Recently viewed posts
- Followers
- Favorite users
- Favorite communities
- Messages
- Notifications
- Live chat
- Image uploads
- Github Repo:
- Live demo:
Project Goals
The primary objectives for Ribbit were as follows:
- Functionality replication: The core focus was on replicating Reddit's essential features, including user management, community creation, content submission, voting, commenting, and user interactions.
- 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.
- 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.
- User authentication and authorization: Implementing a robust user authentication system with Flask and JWT to ensure secure access to the application's features.
- Real-time features: Integrating socket.io to provide real-time user interactions through the live chat feature.
- 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.
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.
Communities
Referred 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.
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.
Search
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.
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.
Messaging
The comprehensive messaging system allows users to send private messages to other users within the platform.
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.
- Real-time features: Implementing real-time features such as live chat and notifications required understanding websockets and designing efficient event-driven systems.
- Image uploads and storage: Integrating AWS S3 for image uploads and secure storage demanded proper configuration and secure handling of user-uploaded content.
- Scalability: Designing a scalable architecture to handle increased user activity, messaging, and live chat interactions was a critical consideration.
- 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:
- Integration of real-time features: Understanding the concepts of websockets and event-driven architecture for implementing real-time features.
- AWS S3 integration: Learning to use AWS S3 for secure image uploads and storage, ensuring a seamless user experience.
- Scalability and optimization: Designing a scalable architecture and optimizing database interactions for increased user activity.
- 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.
- 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
Messages
Communities
