Skip to content

🟨 🟧 🟥 A fully functional, multi-programming language, "how-to-build" social media platform example. Share photos, videos, and text, follow others, and enjoy a dynamic newsfeed. Designed for developers and tech enthusiasts learning how to structure their own social media application.

License

Notifications You must be signed in to change notification settings

scottgriv/Post.e

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

89 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Banner Large

Swift Badge iOS Badge Apple Watch Badge
GitHub Badge Email Badge BuyMeACoffee Badge
Gold


🟨 🟧 🟥 Post.e 🟥 🟧 🟨

Learn how to build and structure your own social media applicaiton using Post.e!

  • Create a user profile, follow other users, and post messages similar to Twitter/X.
  • Share content with other users by attaching photos, videos, documents, and files to your Posts.
  • Written in Swift & Objective-C for the front-end and multiple back-end languages such as PHP, Python, Node.js, Ruby, Go, Java, Rust, and Perl.
  • Includes a back-end MySQL database, JSON interchange, and multiple out of the box APIs.


Table of Contents

Features

  • A mobile application written in Swift & Objective-C for the front-end and multiple back-end languages such as PHP, Python, Node.js, Ruby, Go, Java, Rust, and Perl.
  • Includes a back-end MySQL database, JSON interchange, and multiple out of the box APIs.
  • Designed to teach people how to build their own social media app in mind.
  • Create a user profile, follow other users, and post messages similar to Twitter/X.
  • Share content with other users by attaching photos, videos, documents, and files to your Posts.

Background Story

I had two goals when I originally started this project:

  1. Demonstrate how to make a "Twitter/X-esque" social media application.
    • Many people underestimate the amount of time and work involved in making a social media application.
    • There's a lot of confusion around what the tech stack consists of (client-side code, back-end code, a database, and a web-server of some kind).
    • I wanted to shine a light on the above processes and the technology involved.
  2. Create the application in as many languages as possible and use the project as a learning tool for myself.
    • I wrote the application with a mix of both Objective-C and Swift to demonstrate how a Bridging Header file allows the two languages to share classes/files between each other.
    • I'm constantly learning new programming languages and frameworks. I wanted to build a "one stop shop" mobile application as a sandbox for all of these languages.
    • I started building the application back-end with PHP because it's easy for others to understand. In the future, I'm going to try to utilize languages like Go and Node.js. The multithreading capabilities of these languages to significantly speed up server request & response processing makes them an obvious choice to work on next.
    • I've realized now, by open-sourcing it, there's an opportunity for others to learn and contribute to it as well.

Definitions

Here are some definitions to help you understand the terminology used in this document:

Post: is any message posted to Post.e which contains text and/or attachments that may contain photos, videos, or a wide variety of file types. View the extension table in the database to view the supported file types. Tap the Post button to post the message to your profile. - Posts are the de facto form of communication in Post.e (similar to a Tweet). - Posts were inspired by the popular office supply product Post-It Notes due to their ability to easily communicate messages and attach them to surfaces. Virtual Posts in Post.e offer a similar functionality.

Getting Started

  • Download the application from here, GitHub.
  • Place the server file on your web server.
  • Ensure you have the proper language frameworks and versions installed to integrate Post.e with.
  • Import the provided MySQL database structure into your database using either the db/mysql/post-e.sql file or the db/mysql/post-e_demo.sql file.
    • The post-e.sql file is a blank/empty database/sandbox.
    • The post-e_demo.sql file contains sample data (recommended for demoing or learning purposes).
  • Edit the resources/config.ini file with your database credentials.
    • This will be used to connect to the database in all language variations.
  • Ensure the proper ports are open for your localhost web server and database.
  • Run the Post.e app in Xcode located in the mobile/ios folder.
    • Wait for the required packages to download in Swift Package Manager (SPM).
    • Post.e was tested with the following devices/simulators:
      • iPhone 14 Pro Max
      • iPhone 14 Plus
      • Apple Watch Series 8 (41mm)
      • Apple Watch Series 8 (45mm)
      • More Devices to be added in the future (layouts may vary due to constraint issues depending on your unsupported Device)
  • Login with the following:
    • If you're using the Demo database, login with the following credentials:
      • User: Demo123
      • Password: appdev123
    • If you're using the empty database, you will have to build up the app database by registering new users.
  • Click Login! Enjoy!

Important

In the Constants.m file there is a #TARGET_IPHONE_SIMULATOR env variable. If you're using the Simulator, Post.e. will point towards your localhost / 127.0.0.1 server. If you're using a Device, you'll need to explicitly declare your laptop/server's IP on your network in the #else block. Make sure you swap your_server_ip_address with your server's IP address and keep the rest of the path the same. If you're using a Device and the post.e_demo database, you will also have to update the paths located in the database tables to point correctly to the demo photos and attachments by calling a stored procedure called p_update_urls('fromIP', 'toIP'), see the example code block below.

CALL p_update_urls('localhost', 'your_server_ip_address')
// or
CALL p_update_urls('127.0.0.1', 'your_server_ip_address')

Note

All of the demo accounts in the database use thesame password mentioned above. Passwords are hashed using SHA512 and Salted. The demo accounts consist of quotes from famous individuals that have inspired me through their works and words.

Tip

Change your scheme to Post.e-Test to view Profile ID and Post ID values in the tableview for debugging purposes.

What's Inside?

Below is a list of the main files and folders in this repository and their specific purposes:

Post.e # Root folder
  ├─ api # This directory contains the Postman API import file which sends requests to the apis.[language file] file.
  │  └─ PHP - Post.e API.postman_collection.json # Postman API collection
  ├─ db # Database folder
  │  └─ mysql # Contains the install files for the Post.e database, a demo database, and a EER Diagram of the database.
  │     ├─ post_e.sql # Post.e database
  │     ├─ post_e_demo.sql # Post.e demo database
  │     └─ post_e-eer.mwb # Post.e EER Diagram
  ├─ docs # Documentation folder
  │  └─ images # Images used for the GitHub README relative path.
  ├─ mobile # Mobile folder
  │  ├─ ios # The directory where the iOS and watchOS files are stored.
  │  │  ├─ Playgrounds # Playgrounds folder
  │  │  ├─ Post.e # Post.e folder
  │  │  ├─ Post.e_Watch # Post.e Watch folder
  │  │  ├─ Post.e_Watch WatchKit Extension # Post.e Watch Extension folder
  │  │  ├─ Post.e-Test # Post.e Test folder
  │  │  ├─ Post.e.xcodeproj # Post.e Xcode project file
  │  │  ├─ Post.eTests # Post.e Tests folder
  │  │  └─ Sample Files # Sample files folder
  │  │     ├─ jpg_Sample.jpg # Sample JPG file
  │  │     ├─ pdf_Sample.pdf # Sample PDF file
  │  │     ├─ png_Sample.png # Sample PNG file
  │  │     └─ txt_Sample.txt # Sample TXT file
  ├─ server # Server folder
  │  ├─ languages # The directory where the server side languages are stored.
  │  │  ├─ go # Go folder
  │  │  ├─ java # Java folder
  │  │  ├─ js # JavaScript folder
  │  │  ├─ php # PHP folder
  │  │  ├─ pl # Perl folder
  │  │  ├─ py # Python folder
  │  │  ├─ rb # Ruby folder
  │  │  └─ rs # Rust folder
  │  ├─ resources # The directory where the log files and config.ini file used for the database connection are stored.
  │  │  ├─ logs # Logs folder
  │  │  │  └─ current_date.log # Current date log file
  │  │  └─ config # Config folder
  │  │     └─ config.ini # Config file
  │  └─ uploads # The directory profile images and post images/files download to.
  │     └─ prof_id # Profile ID folder
  │        ├─ prof_id.jpg # Profile ID JPG file
  │        └─ posts # Posts folder
  │           └─ post_id # Post ID folder
  │              └─ file name # File name
  ├─ .gitignore # Git ignore file
  ├─ .gitattributes # Git attributes file
  ├─ .github # GitHub folder                                                             
  ├─ PRG.md # PRG Connection File
  ├─ LICENSE # License file   
  └─ README # This file   

Application Functionality

Below is a list of the main features and functionality of Post.e:


Login & Register Screens


  • Single Sign-On (SSO) capabilities by using a combination of Swift's UserDefaults class and server side session handling. Login once then automatically login in the future without signing in (unless, of course, you log out of the app which kills the active session in the session table).
  • Username & Password validations.
    • Checks for minimum password length, min/max user name length, missing or empty fields, matching passwords, and invalid characters using REGEX patterns.
  • Registering a User will create a new folder in the server/uploads folder using the new Prof_ID column value, which is an AUTO_INCREMENT column in the database (Posts work in this same fashion).
  • A unique ID is also generated using the encoder.[language] file using Base 64 Encoding to produce a unique external facing ID, stored in the database under the Prof_Key or Post_Key columns, that can be used to share Posts or Profiles in the future.

Configure Programming Language Screens


  • Pick the server side language you want Post.e to use. This will route the requests to the toggled language folder.
  • See Programming Languages below for more details on this screen.

Feed Screen


  • Sort Posts by Newest:
    • Newest consists of the most recent posts using the Post_Created date column in descending order.
    • WHERE Post_Created DESC.
  • Sort Posts by the Home experience:
    • Home uses a number of columns to create a fun user feed experience using the below WHERE clause:
    • WHERE Post_Love_Count DESC, Post_Pin_Count DESC, Post_Reply_Count, Post_Created DESC.
  • Click on the Profile name to segue to the user Profile screen.

Interaction Screen


  • View New Users on the App.
  • Click on the Profile name to segue to the user Profile screen.
  • Follow or Unfollow users directly from this screen.

Profile Screen


  • Interactive Follower, Following, and Post count buttons that will segue to the Interaction screen when clicked.
    • The Post count is not a button, its a Post total (including Replies) counter only.
  • Profile picture display.
  • Click the Profile tab icon to scroll to the top.
  • Pull refresh to get the most recent Posts.
  • Post button to create new Posts.
  • Sort Posts on the Profile feed by: Newest, Oldest, Loved, Pinned, and Replied counts in descending order.
  • Edit Profile
    • Change your Profile picture (take a photo or select one from your library).
    • Remove your Profile picture - setting it to the default placeholder image.
    • Update your Profile Username (it must be unique) and Profile Name.
    • Delete your Profile.
  • Scroll to the bottom of the Table, Posts will load in 25 Post chunks. If the Post # > 25, a request will be sent to the server and an activity indicator will be shown in the Table footer as it fetches the next chunk of 25.
  • Within the Post Cell:
    • Preview & Save Attachments.
    • Pin or Unpin a Post.
      • Pins will be displayed on your Profile.
      • You cannot Pin a Reply or Posts that you created.
      • Only Posts displayed on Profiles or your Feed can be Pinned.
    • Reply to a Post.
    • Love or Unlove a Post.
    • Delete your own Posts.
  • Click on the Profile name to segue to the user Profile screen.

Reply Screen


  • Reply to a Post on a dedicated screen with the Post you're replying to in the header.
  • Reply to a Reply (there is no limit on the Reply depth).
  • Sort Posts on the Reply feed by: Newest, Oldest, Loved, and Replied counts in descending order.

Post Screen


  • Type up a Post.
  • Cancel the Post by clicking the Cancel button or the visible Profile Screen.
  • Add Photos/Videos from your Camera or Photo Library.
  • Add Attachments (Post.e comes with a demo directory with a few files ready to select) - see screenshot above.
  • Submit the Post to the server.
  • Haptic Feedback and Audible Post Alert after a Post has been successfully sent to the server.

Settings Screen


  • About section to view the current Post.e version number (derived from the info.plist value of CFBundleShortVersionString).
  • Open Source Libraries used to create Post.e and their related LICENSE files.
  • Language Selection displays your current Device Language, available Languages supported by Post.e as well as a link to your Settings screen to change your device language (this will cause the application to restart as per Apple).
  • Directory Settings displays your current folder directory used to select files for Post Attachments. Toggle the "Use Sample Directory" switch to use the sample files provided with Post.e by default or not.
  • Change your Password
  • Logout of the Application (which will also kill the session on the server).

watchOS Support


  • Post to your Profile using audio to text or by typing in the text using the watch keyboard.
  • Haptic Feedback and Audible Post Alert after a Post has been successfully sent to the server.

Language Support


  • English and Russian language support using Localization. Query the language table in the database to view the supported languages.

Dark Mode Support


  • Easily toggle Designs between Light and Dark Mode.

API Support

  • Navigate to the api folder to access the API collection .json file used to import APIs into Postman.
  • Open the apis.[language] file to view the list of available APIs and usage.

Interchange

  • Post.e uses URL encoded requests (passing the parameters in the URL) via application/x-www-form-urlencoded, i.e.:
htt://localhost/Post.e/server/languages/php/login.php?command=Session&tokenID=4e1073c9b370ccf8f4ee454c6a841492

For responses, Post.e uses JSON encoding via application/json; charset=utf-8, i.e.:

{
    "success": 1,
    "tokenID": "50f20dd3e6761245655c8df0cfd73c05",
    "token": 1
}

Database

  • Post.e uses the MariaDB flavor of MySQL named post.e or post.e_demo, depending which one you install. Below are the db specs using the schema inspector:
Specification Value
Default Collation utf8mb4_unicode_ci
Default Characterset utf8mb4
Table Count 21
Database Size (rough estimate) 624.0 KiB

Programming Languages

Below is a running list of languages currently supported by Post.e:

Language & Progress: Version
Swift 5.7
Obj-C 4.0
PHP 8.1.6
Python 3.11.0
Node.js 18.12.1
Ruby 2.6.10
Go 1.19.3
Rust 1.64.0
Perl 5.30.3
Java 17.0.5
MariaDB 10.4.21

Limitations

Posts are limited to:

  • Post character limit: There is no hard limit for the number of characters, however, the database type and length is VARCHAR(250) and it cannot be NULL.
  • Attachment limit per Post: 9.
  • Max file size per Attachment: 1 gigabyte (GB) or 1,073,741,824 bytes.

Currently, the Post.swift file contains the static values mentioned above. In the future, I'd like to sync this to the parameter table in the database for a more dynamic approach, including a max character limit for Posts and an alert message if the Post limit has been exceeded.

Closing

Thank you for taking the time to read through this document and I hope you find it useful! (if you've read this far - you're a legend!)

  • If you have any questions or suggestions, please feel free to reach out to me.

Please reference the SUPPORT file in this repository for more details.

What's Next?

  • Besides making Post.e compatible with more back-end languages, devices, and the tasks mentioned in the Backlog (i.e. Editing Posts, Push Notifications, etc.), I'm considering eventually hosting it on a server so it's not constrained to a local environment. This way, the demo will have a sandbox for everyone to interact in. I don't plan on making it an actual social media app - it was created as a learning tool for all, and I'd like to keep it that way.

I'm looking forward to seeing how this project evolves over time and how it can help others with their GitHub Portfolio.

Please reference the CHANGELOG file in this repository for more details.

Project

Please reference the GitHub Project tab inside this repository to get a good understanding of where I'm currently at with the overall project.

  • Issues and Enhancements will also be tracked there as well.

Contributing

Feel free to submit a pull request if you find any issues or have any suggestions on how to improve this project. You can also open an issue with the tag "bug" or "enhancement".

  • How to contribute:
  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/Post.e)
  3. Commit your Changes (git commit -m 'Add new feature')
  4. Push to the Branch (git push origin feature/Post.e)
  5. Open a Pull Request

Please reference the CONTRIBUTING file in this repository for more details.

Resources

Below are some external resources I found helpful when creating Post.e:

  • Swift - A general-purpose, multi-paradigm, compiled programming language developed by Apple Inc. for iOS, iPadOS, macOS, watchOS, tvOS, Linux, and z/OS.
  • Objective-C - A general-purpose, object-oriented programming language that adds Smalltalk-style messaging to the C programming language.
  • PHP - A popular general-purpose scripting language that is especially suited to web development.
  • Python - An interpreted, high-level and general-purpose programming language.
  • Node.js - An open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
  • Ruby - A dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.
  • Go - An open source programming language that makes it easy to build simple, reliable, and efficient software.
  • Rust - A multi-paradigm programming language focused on performance and safety, especially safe concurrency.
  • Perl - A family of two high-level, general-purpose, interpreted, dynamic programming languages.
  • Java - A general-purpose, class-based, object-oriented programming language designed for having lesser implementation dependencies.
  • MariaDB - A community-developed, commercially supported fork of the MySQL relational database management system (RDBMS), intended to remain free and open-source software under the GNU General Public License.
  • Postman - A collaboration platform for API development. Postman's features simplify each step of building an API and streamline collaboration so you can create better APIs—faster.
  • Xcode - An integrated development environment (IDE) for macOS containing a suite of software development tools developed by Apple for developing software for macOS, iOS, iPadOS, watchOS, and tvOS.
  • Swift Package Manager - A tool for managing the distribution of Swift code.
  • MySQL Workbench - A unified visual tool for database architects, developers, and DBAs.

License

This project is released under the terms of the GNU General Public License, version 3 (GNU GPLv3), which ensures that derivatives of the software remain open source.

  • The GNU GPLv3 is a "copyleft" license, ensuring that derivatives of the software remain open source and under the GPL.
  • For more details and to understand all requirements and conditions, see the LICENSE file in this repository.

Credits

Author: Scott Grivner
Email: [email protected]
Website: scottgrivner.dev
Reference: Main Branch


About

🟨 🟧 🟥 A fully functional, multi-programming language, "how-to-build" social media platform example. Share photos, videos, and text, follow others, and enjoy a dynamic newsfeed. Designed for developers and tech enthusiasts learning how to structure their own social media application.

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks