Vibe - Ammar Elbehery

Vibe is my first ever full stack project and was built in 2023, while I was first learning React and Next.js. Although the application remains a valuable showcase of features and product thinking, the codebase does not reflect my current development practices. Since then, I have significantly improved my approach to architecture, code organization, testing, type safety, and maintainability.

Vibe is a fully-featured social media web application, with core functionality such as posting, liking and commenting, and following other users. It also includes more detailed features like post reactions, OpenGraph integration, and user mentions. The project began as a final assignment for CS50 and later evolved into a personal project for learning and practicing React and Next.js.

The Problem

Unlike traditional projects, Vibe was not created to address a specific user problem. Instead, it served as a platform for learning and exploring modern web technologies. The challenge was primarily about improving development skills and understanding full-stack web development.

Goals and Objectives

The main goal of Vibe was to create a fast, user-friendly social media application with a great user experience, responsive design, and strong SEO optimization. Additionally, it served as a platform to learn React, Next.js, and full-stack development through practical implementation.

Development Process

The project began with the UI and UX design, which was crucial given that Vibe is a user-driven platform. Several iterations of design were made until a satisfying, aesthetically pleasing interface was achieved. After finalizing the design, the development phase involved incremental implementation of features, starting from core functionality and gradually adding new capabilities over time.

Early design iteration of Vibe using Material UI

Results

Vibe was completed in two months, but it continues to evolve as new features are added. The project successfully showcases skills in front-end frameworks, API architecture, and SQL databases, with a strong emphasis on user experience.

Key Features

Some of the most notable features of Vibe include:

User registration & login: Users can create accounts, log in, and manage their profile.
CRUD posts: Users can create, read, update, and delete posts, with the ability to mention other users.
Comments & reactions: Users can comment on posts, like them, and react to posts with custom reactions.
Profile pages: Users have their own profile pages to view posts and activity.
Following system: Users can follow others and see their posts in a personalized feed.
Notifications: Users are notified when someone likes their post or follows them.
OpenGraph integration: OG images and titles created dynamically based on the post’s author and content.
Responsive design: The app was designed mobile-first but adapts well to larger desktop screens.

Conclusion & Learnings

Working on Vibe allowed for hands-on experience with Next.js, React, and PostgreSQL, enhancing both front-end and back-end development skills. This was particularly valuable as it was the first project of its kind.