Funsta

byRamya Ramamurthy

Social Media App Develop a full-fledged social media app with user profiles, posts, comments, and likes.

LandingLogin
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 4

Funsta System Requirements Document

Introduction

The Funsta project aims to develop a comprehensive social media application that allows users to create profiles, share posts, comment on content, and engage with others through likes and interactions. This document outlines the system requirements for Funsta, ensuring a robust and engaging user experience.

System Overview

Funsta is designed to be a dynamic social media platform where users can express themselves, connect with others, and engage in meaningful interactions. The application will support user-generated content, social interactions, and community building.

Functional Requirements as Story Points

  • As a User, I should be able to create and edit my profile, including uploading a profile picture and adding personal information.
  • As a User, I should be able to create posts with text, images, and videos.
  • As a User, I should be able to view posts from other users in a feed.
  • As a User, I should be able to like posts to show appreciation.
  • As a User, I should be able to comment on posts to engage in discussions.
  • As a User, I should be able to receive notifications for likes and comments on my posts.
  • As a User, I should be able to follow other users to see their posts in my feed.
  • As a User, I should be able to search for other users and posts.
  • As a User, I should be able to manage my privacy settings to control who can see my posts and profile.
Page 2 of 4

User Personas

  • Regular User: Engages with the platform by creating content, liking, and commenting on posts.
  • Content Creator: Focuses on producing high-quality content and building a follower base.
  • Moderator: Oversees community interactions, ensuring compliance with community guidelines.

Core User Flows

  • User signs up -> creates profile -> uploads profile picture -> starts posting content.
  • User views feed -> likes a post -> comments on a post -> receives notification for interactions.
  • User searches for another user -> follows them -> sees their posts in the feed.

Visuals Colors and Theme

  • primary: #1E90FF (Dodger Blue)
  • primary_light: #63B8FF (Light Sky Blue)
  • secondary: #FF6347 (Tomato)
  • accent: #32CD32 (Lime Green)
  • highlight: #FFD700 (Gold)
  • bg: #F5F5F5 (White Smoke)
  • surface: rgba(255, 255, 255, 0.9)
  • text: #333333 (Dark Charcoal)
  • text_muted: #777777 (Gray)
  • border: rgba(200, 200, 200, 0.5)
Page 3 of 4

Signature Design Concept

The Funsta homepage will feature an interactive "Social Network Map" where users can see a dynamic, animated representation of their connections. As users hover over different nodes (representing other users), lines will animate to show mutual connections and interactions. This map will be built using d3 for data visualization, providing an engaging and visually appealing way to explore one's network.

Landing Hero Motion Brief

The landing page will feature a continuously moving 2D animation depicting a "Content Creation Journey." Users will see a stream of posts being created, liked, and commented on, illustrating the vibrant activity on Funsta. This animation will be built using motion/react, with layers representing different types of content (text, images, videos) flowing into a central feed. The animation will loop every 10 seconds, showing the transformation of individual posts into a lively community interaction.

Interaction Model & Motion Direction

  • Intended Interaction Model: Parallax
  • The landing page will use layered depth via scroll, with decorative elements translating at different speeds to create a sense of depth. Real content will scroll naturally, enhancing the storytelling aspect of the platform.

Non-Functional Requirements

  • The application must support high concurrency to handle a large number of simultaneous users.
  • The system should ensure data privacy and comply with GDPR regulations.
  • The platform must be responsive and accessible across various devices and screen sizes.
Page 4 of 4

Tech Stack

  • Frontend: React for Web
  • Backend: Python, FastAPI
  • Database: MySQL or MariaDB, using Alembic for migrations
  • AI Models: Not applicable
  • Local Orchestration: Docker, docker-compose
  • Server-side Orchestration: Kubernetes

Assumptions and Constraints

  • The application will initially target users in Germany, considering local language and cultural preferences.
  • The system must be scalable to accommodate future growth and feature expansions.
  • The platform will prioritize user engagement and community building.

Glossary

  • User: An individual who interacts with the Funsta platform.
  • Post: Content created by users, including text, images, and videos.
  • Feed: A stream of posts that users can view and interact with.
  • Like: A feature allowing users to express appreciation for a post.
  • Comment: A response to a post, facilitating discussion and interaction.

This document outlines the requirements and design principles for the Funsta social media application, ensuring a comprehensive and engaging user experience.

Landing design preview
Landing: View Info
Login: Sign In
Profile: Edit Profile
Post Editor: Create Post
Post Editor: Upload Media
Feed: Publish Post
Profile: View Followers
Notifications: View Likes
Notifications: View Comments
Post: Reply to Comment
Analytics: View Engagement
Settings: Manage Privacy
Landing design preview
Landing: View Info
Login: Sign In
Profile: Edit Profile
Post Editor: Create Post
Post Editor: Upload Media
Feed: Publish Post
Profile: View Followers
Notifications: View Likes
Notifications: View Comments
Post: Reply to Comment
Analytics: View Engagement
Settings: Manage Privacy