175844b8-68fe-4feb-9d78-7c4670162037.mp4
LiveUrl: https://snapsync.onrender.com/
Demo Video: https://youtu.be/XZyjKs38n9Q?si=pGh4V4mhk2cJhciY
Functional Requirement Document (FRD): https://docs.google.com/document/d/1ZANRQCTXW9wmTBztYvk0WFRVgXtaqc31rOFIxTh92JU/edit?usp=sharing
Database Diagram: https://dbdiagram.io/d/SnapSync-652a7510ffbf5169f0acfcad
SnapSync is a social media application that incorporates essential features for photo and video sharing, story viewing, post interactions, messaging, and personalized content discovery, akin to well-known platforms in this genre.
To enhance SnapSync, React best practices such as component composition and the use of custom hooks are followed. These practices aid in managing the application's complexity, boosting performance, and ensuring maintainability. Here's how these practices are integrated with SnapSync's features:
Component composition involves building small, reusable components that are combined to create complex UIs, which is vital for an application like SnapSync.
- Reusable UI Components: Components for buttons, modals, inputs, posts, stories, etc., are created for reuse throughout the application.
- Layout Components: Layout components such as
Header,Footer,Sidebar, andMainContentprovide a consistent look across different pages. - Protected Route: Redirects unauthenticated users to the login page while allowing authenticated users to access protected content.
Custom hooks extract component logic into reusable functions.
- useAuth: Manages user authentication state.
- useHandleMedia: Facilitates effortless file uploads to Cloudinary.
- useChat: Handles chat functionalities and real-time interactions.
- useSocialAction: Manages interactions like likes, comments, and shares.
- useDebounce: Implements delayed function execution to improve performance.
- useNotification: Offers an elegant solution for in-app notifications.
- useToast: Provides a charming way to display short-lived, non-intrusive messages.
- Performance Optimization: Use React’s memoization (
React.memo,useMemo,useCallback) to prevent unnecessary re-renders, especially in components that display posts, feeds, or stories. - State Management: Utilize the Context API for global state management.
- Responsive Design: Ensure components work seamlessly across various devices.
By embracing these best practices, SnapSync not only replicates popular social media functionalities but also ensures a robust, maintainable, and scalable architecture.
- MongoDB: For storing user data, posts, etc.
- Express.js: Backend framework for RESTful API.
- Axios: HTTP client for API requests.
- Formik: For handling forms in React.
- Framer Motion: For animations in React.
- React Icons: Icon library for React.
- React Intersection Observer: For infinite scrolling.
- React Router DOM: For navigation in React apps.
- Socket.IO Client: For real-time communication.
- bcrypt: For password hashing.
- cookie-parser: For parsing cookies.
- cors: To enable Cross-Origin Resource Sharing.
- dotenv: For environment variable management.
- jsonwebtoken: For JSON Web Token implementation.
- mongoose: MongoDB modeling for Node.js.
- nodemailer: To send emails.
- socket.io: For real-time bidirectional communication.
- uuid: To generate unique identifiers.
- Sign-up, log-in, and log-out functionalities.
- Email verification after signup.
- Dedicated profile page with user info.
- Bio setting and display.
- Followers and following list.
- Uploading and sharing images or videos.
- Viewing short video clips in a special tab.
- Adding and viewing temporary stories.
- Story visibility on user profiles.
- Liking, commenting, and sharing posts.
- Saving posts for later viewing.
- Private user-to-user chats.
- Notifications for new messages.
- Online status indication.
- User search functionality.
- Exploring new posts in a discovery section.
- Notifications for likes and new followers.
- Alerts for new chat messages.
- Implementation of the Intersection Observer API for endless content loading.
- Heart animation on double-clicking a post.