Social Media Platform.

Overview

Imagine a social media platform where you can create your profile, manage your posts, receive notifications, and chat with friends, all in one convenient spot. That's what this platform is all about!

Role

In this project, I wore two hats as both the designer and developer. My main tasks included:

• Researching how users interact with the product to improve their experience.
• Creating designs that are visually appealing and easy to use.
• Figuring out the best technologies to use for the project.
• Bringing the project to life through development.

Design.

This is the style guide, final design, and sitemap of the project.

Sitemap

I created a sitemap to show how the website is organized and connected. It's like a map that helps us see all the pages and how they're linked together, making it easier to design and navigate the site.

Click to see details.

Style Guide Includes:

• Colors
• Typography
• Spacing and Grid
• Iconography
• Shadows

Development.

Below is the selected tech stack for the project, along with the features list.

Technology Stack

• Frontend: React, React Query
• Backend: Node.js with Express, Socket.IO
• Database: MongoDB
• Query Language: GraphQL
• Authentication: Passport.js

Features

• Sign Up Easily 🪄 Get started effortlessly by joining with Google, email, or creating your account in just a few clicks!
• Create Great Posts 📝 Share your stories with awesome photos and effortlessly spread the word to your followers.
• Connect with Others 🖇️ Interact with fellow users by liking, commenting, and replying, making new friends along the way.
• Manage Your Profile 👤 Personalize your profile, edit your posts, and save your favorite content without any hassle.
• Chat Instantly 💬 Chat with friends and make new connections in real-time using our instant messaging feature!
• Stay in the Loop 🔔 Never miss a thing with notifications for likes, comments, and new messages!
• Find Users and Posts Easily 🔎 Discover new friends and content effortlessly with our user-friendly search feature!
• PWA Compatibility 📱 Access DevCut's Social seamlessly on your mobile device with our Progressive Web App (PWA).

Conclusion

In wrapping up, I've learned a ton from this project. From setting up real-time messaging to building a smooth progressive web app and figuring out how to structure databases for social media, it's been a real eye-opener. Moving ahead, I'm eager to keep exploring new tech and making our platform even better.