PROJECT TITLE
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.
User Authentication and Social Login
- Integrated Google OAuth 2.0 for seamless social login.
Picture Categories
- Users can explore curated categories such as Travel, Food, Art, Nature, and more.
- Dynamic categorization powered by Sanity CMS, allowing admins to create, update, or remove categories without code updates.
- Each category shows user-uploaded posts sorted by relevance
Profile Page
- Display of user-uploaded images, and saved posts.
- Backend Data Handling: User data is stored and fetched in real-time using Sanity CMS.
Similar Pictures Features
- Users are shown visually or thematically similar posts on the picture details page.
- Algorithms analyze tags, categories, and upload metadata to provide recommendations.
Post Search
- Text-based search with auto-suggestions.
- Keyword search matches picture titles, tags, and descriptions.
- Debounced Search Input: Reduces API calls for smoother user experience.
- 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.
Modular React components
- Picture Card: Displays individual pictures with hover effects.
- Comment Section: Threaded comment system for detailed discussions.
- Search Bar: Reusable search component.
Tailwind CSS
- Used for creating responsive grid layouts for the feed.
Configured Sanity Schemas for:
- User profiles.
- Posts with title, description, tags, image, and category.
- Comments linked to posts.
Implemented
- live data fetching with Sanity’s GROQ queries.
Testing
- Conducted usability tests with a focus group to refine UI/UX.
- Browser compatibility checks for Chrome, Safari, Edge, and Firefox.
Deployment
- Frontend hosted on Vercel.
- Backend and CMS served via Sanity Studio.
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.
