ShareMe - Social Media App

My Role

In this project, I was responsible for everything, including conducting user research, designing the UI/UX, developing the frontend using React and Tailwind CSS, and integrating Sanity CMS for real-time content management.

I implemented features like advanced search, picture categorization, comments, and real-time updates, ensuring a seamless and engaging user experience across all devices.

What is ShareMe

ShareMe is a user-focused social media platform designed to make sharing and interacting with visual content simple and engaging.

With a clean, modern interface, users can upload pictures, interact through comments, explore content by categories, and personalize their experience through curated profile pages.

1. The Objective

To create a platform where users can effortlessly share their moments through pictures while discovering visually appealing content based on their interests. The goal was to prioritize simplicity, responsiveness, and user engagement with smooth navigation and interactions.

solutions image

User Authentication and Social Login

  1. Integrated Google OAuth 2.0 for seamless social login.
solutions image

Picture Categories

  1. Users can explore curated categories such as Travel, Food, Art, Nature, and more.
  2. Dynamic categorization powered by Sanity CMS, allowing admins to create, update, or remove categories without code updates.
  3. Each category shows user-uploaded posts sorted by relevance
solutions image

Profile Page

  1. Display of user-uploaded images, and saved posts.
  2. Backend Data Handling: User data is stored and fetched in real-time using Sanity CMS.
solutions image

Similar Pictures Features

  1. Users are shown visually or thematically similar posts on the picture details page.
  2. Algorithms analyze tags, categories, and upload metadata to provide recommendations.
solutions image

Post Search

  1. Text-based search with auto-suggestions.
  2. Keyword search matches picture titles, tags, and descriptions.
  3. Debounced Search Input: Reduces API calls for smoother user experience.
  4. Indexed Queries: Optimized search speeds using Sanity’s indexing capabilities.

Frontend

React for building a modular, scalable, and responsive user interface & Tailwind and for a sleek and consistent design system

CMS

Sanity.io - A headless CMS used for managing user content such as images, categories, and comments.

Backend Integration

Sanity’s Real-Time API - Powers live updates for posts, comments, and recommendations. OAuth 2.0 - Ensures secure user authentication.

wireframe image
wireframe image
wireframe image

Modular React components

  1. Picture Card: Displays individual pictures with hover effects.
  2. Comment Section: Threaded comment system for detailed discussions.
  3. Search Bar: Reusable search component.

Tailwind CSS

  1. Used for creating responsive grid layouts for the feed.

Configured Sanity Schemas for:

  1. User profiles.
  2. Posts with title, description, tags, image, and category.
  3. Comments linked to posts.

Implemented

  1. live data fetching with Sanity’s GROQ queries.

Testing

  1. Conducted usability tests with a focus group to refine UI/UX.
  2. Browser compatibility checks for Chrome, Safari, Edge, and Firefox.

Deployment

  1. Frontend hosted on Vercel.
  2. Backend and CMS served via Sanity Studio.
demo image
  • User Feedback: Early user testing helped refine features like the comments section and similar pictures recommendation system.

  • Scalability: Sanity’s headless CMS and React’s modular approach allowed for future feature additions without significant rework.

  • Future Scope: - Add a private messaging feature.- Introduce AI-based tagging for images to improve search relevance.

demo image