Socialogy 🌐

Modern Social Media Web Application

Overview

Socialogy is a full-stack social media platform where users can create profiles, follow other users, share posts, and engage with content. The platform is built with a modern React frontend, a scalable Node.js backend, Supabase PostgreSQL for data storage, and Cloudinary for image hosting.

What Users Can Do

• User Authentication: Secure signup and login using JWT.
• User Profiles: Create, view, and update user profiles.
• Follow System: Follow and unfollow other users.
• Post Creation: Share posts with text and images.
• Engagement: Like and interact with posts.
• Image Uploads: Upload and manage images using Cloudinary.
• Responsive UI: Optimized for desktop and mobile devices.

Why I Built This

Social media applications are complex systems that combine user interaction, media handling, and scalable backend design. I built Socialogy to:

• Understand how real-world social platforms are structured.
• Implement secure authentication and authorization.
• Learn relational data modeling for social graphs.
• Build a clean and modern social UI.
• Gain hands-on experience with cloud-based media storage.

The goal was to build a production-style social media app, not just a demo.

Tech Stack

Frontend

• React (Vite)
• Tailwind CSS
• shadcn/ui
• React Router
• Axios
• Context API
• Lucide Icons

Backend

• Node.js
• Express.js
• Prisma ORM
• Supabase PostgreSQL
• JWT Authentication
• Multer (file uploads)
• Cloudinary (image hosting)

Architecture Highlights

• JWT-based authentication for secure access.
• REST APIs connecting frontend and backend.
• Prisma ORM managing database interactions.
• Supabase PostgreSQL for scalable relational storage.
• Multer for handling file uploads.
• Cloudinary for optimized image delivery.
• Context API for global frontend state management.

Challenges Faced

• Designing relational schemas for users and followers.
• Handling secure image uploads.
• Managing authentication across frontend and backend.
• Keeping UI state in sync with backend updates.
• Building a scalable and maintainable API structure.

Learnings

• Full-stack social media application architecture.
• JWT authentication and protected routes.
• Relational data modeling with Prisma.
• Cloud-based media storage with Cloudinary.
• State management using Context API.
• Building responsive and accessible UIs.

Future Plans

• Implement real-time notifications.
• Introduce direct messaging.
• Add explore and trending feeds.
• Improve privacy and account controls.

---