Social Network
I'd been tinkering with the idea of making a social media app, but never really found a case for making it. So I decided to make a toy app. I started with a sketch, researched some designs on dribble, took screenshots of Facebook, got an initial schema using Chat GPT, and started making a prototype of the landing page (the feed)
Social Network 1.0 is a social networking app based on Facebook created with Flask and styled with Tailwind CSS. The goal of this application was to produce a de-cluttered user-friendly and more attractive alternative to Facebook.
Functional Requirements
- Create,Read,Update,Delete POSTS
- Create,Read,Update,Delete USERS
- Create,Read,Update,Delete COMMENTS on POSTS
- Chatbot (ChatGPT and Wikipedia integration)
- Create,Read,Update,Delete GROUPS
- Attach PHOTOS and VIDEOS to POSTS
Non Functional Requirements
- Beautiful UI
- Mobile Friendly
UI Design
The UI is based on several Dribble designs and Facebook
Wireframes
Activity Feed
The Activity Feed is where you can view all of the latest activity from your friends or the groups you are a member of. The feed can be sorted by New Posts, Popular Posts and Suggested Posts.
Profile
Next I created the Profile page. I wanted something much more simple than Facebook and only features that are engaging (nothing boring). This should be a simple way to get to know someone.
The Marketplace
Sure, why not?
Gallery
I took the dynamic grid from my Pinterest clone app to use for the gallery.
Chat
I watched a video on Meta's release of AI celebrities and this is when I decided to make this an AI social media website. I will use the "Neural Diffusion" app I made to generate AI users and photos.
Reels
Chat gave me an idea to add AI generated videos as "Reels"
Friends
My original idea for this app was to use it to practice using graph data structures to build a 'networking' feature where you can find friends-of-friends.
Settings
I don't like the settings in Facebook. As much as possible I want to keep it to one page that is searchable. Searching a term hides any divs that don't contain that term. I recently added the ability to update the accent color for each user.
Social Media Schema
USER has many POSTS
POST belongs to a USER
POST has many POST_LIKES (polymorphic)
POST has many COMMENTS
COMMMENT belongs to a POST
USER has many GROUPS
GROUP has many USERS
GROUP has many EVENTS
GROUP has many POSTS
POST belongs to a GROUP (optional)
EVENT belongs to a group
EVENT has many USERS
USERS have many EVENTS
POST has many REACTIONS
REACTION has many posts (enum?)
COMMENT has many COMMENT_LIKES (polymorphic)
PHOTOALBUM has many PHOTOS
PHOTO belongs to a PHOTOALBUM
COMMENT has many TAGS (polymorphic)User
Description about Shipment should go here. Should be described in 5 sentences or less and may include the "who, what, when, where, and how" (and perhaps "which") of what this model is.
| Attribute | Description |
|---|---|
| id | The unique id to identify the post like. |
| user_account | |
| first_name | |
| last_name | |
| location | |
| university | |
| employer | |
| employed_since | |
| gender | |
| birthday | |
| ip_address | |
| browser | |
| status | |
| created_at | |
| updated_at |
Post
Description about Shipment should go here. Should be described in 5 sentences or less and may include the "who, what, when, where, and how" (and perhaps "which") of what this model is.
| Attribute | Description |
|---|---|
| id | The unique id to identify the post. |
| title | |
| content | |
| author (user_id) | |
| group_id | |
| ip_address | |
| user_agent | |
| created_at | |
| updated_at |
PostLikes
Description about Shipment should go here. Should be described in 5 sentences or less and may include the "who, what, when, where, and how" (and perhaps "which") of what this model is.
| Attribute | Description |
|---|---|
| id | The unique id to identify the post like. |
| post_id | |
| user_id |
PostTags
Description about Shipment should go here. Should be described in 5 sentences or less and may include the "who, what, when, where, and how" (and perhaps "which") of what this model is.
| Attribute | Description |
|---|---|
| id | The unique id to identify the post like. |
| post_id | |
| tag | The label for the tag |
Comment
Description about Shipment should go here. Should be described in 5 sentences or less and may include the "who, what, when, where, and how" (and perhaps "which") of what this model is.
| Attribute | Description |
|---|---|
| id | The unique id to identify the post like. |
| comment_id | |
| content | |
| post_id | |
| reply_to | |
| author | |
| created_at | |
| updated_at |
Interests
Description about Shipment should go here. Should be described in 5 sentences or less and may include the "who, what, when, where, and how" (and perhaps "which") of what this model is.
| Attribute | Description |
|---|---|
| id | The unique id to identify the post like. |
| user_id | |
| interest |
UserGroups
| Attribute | Description |
|---|---|
| id | The unique id to identify the post like. |
| user_id | |
| group_id |
Group
Description about Shipment should go here. Should be described in 5 sentences or less and may include the "who, what, when, where, and how" (and perhaps "which") of what this model is.
| Attribute | Description |
|---|---|
| id | The unique id to identify the post like. |
| group_id | |
| title | |
| moderator | |
| created_at | |
| updated_at |
GroupMembership
Description about Shipment should go here. Should be described in 5 sentences or less and may include the "who, what, when, where, and how" (and perhaps "which") of what this model is.
| Attribute | Description |
|---|---|
| id | The unique id to identify the post like. |
| membership_id | |
| group_id | |
| member_account | |
| joined_date |
PhotoAlbum
Description about Shipment should go here. Should be described in 5 sentences or less and may include the "who, what, when, where, and how" (and perhaps "which") of what this model is.
| Attribute | Description |
|---|---|
| id | The unique id to identify the post like. |
| album_id | |
| creator | |
| title | |
| created_at | |
| updated_at |
Photo
Description about Shipment should go here. Should be described in 5 sentences or less and may include the "who, what, when, where, and how" (and perhaps "which") of what this model is.
| Attribute | Description |
|---|---|
| id | The unique id to identify the post like. |
| photo_id | |
| album_id | |
| location | |
| latitude | |
| longitude | |
| taken_time | |
| ip_address | |
| user_agent |
PhotoTags
Description about Shipment should go here. Should be described in 5 sentences or less and may include the "who, what, when, where, and how" (and perhaps "which") of what this model is.
| Attribute | Description |
|---|---|
| id | The unique id to identify the post like. |
| photo_id | |
| tag_account |
Notification
| Attribute | Description |
|---|---|
| id | The unique id to identify the post like. |
| unread | |
| href | |
| text |
Resources
https://wiki.sahanafoundation.org/req/logistics_module_draft_table_structure_diagram