A tag-based social network website.

MotiveTag

https://motivetag.com Temorarily closed due to VM costs :( 因費用緣故暫時關閉 :(

ToDos:

1. Nginx+Docker
2. ECS nearly完成, 環境變數done, 連線設定done
3. DB自動切換可用連線
4. Nginx SSL Now supported Full-strict SSL mode.
5. MySQL data persistance(mounted).
6. Prometheus+GrafanaCloud for monitoring.
7. Async for uploading larger images.
8. Full CICD-Jenkins
9. EKS
10. Redis/Kafka setting(chat status)
11. MySQL improve, ORM
12. Security
13. UI/UX and RWD redesign
14. Basic code improve
15. Axiom
16. chatgpt assistant

Note

• Redis for managing online/chat status.
• Kafka for chat message.
• MySQL for data storage.
• All resources should in AWS.

About

• 貼文、標記、送出，跟其他人一起討論並認識新朋友，加入/訂閱你有興趣的內容(Tag)，持續關注你想關注的話題，沒有廢話!沒有廣告!
• Motivetag is a website covers main functionality of social networks. With a "Tag cored" design.
• 這是一個社群網站，本身以 Tag 為核心運作。

目前已部署功能

• 貼文(包含匿名、投票、圖片上傳), 加tag, 按讚與留言,且可複合使用
• 訂閱你有興趣的內容(Tag)並追蹤
• 即時聊天功能
• 好友系統, 包含上線狀態與來訊提示
• 通知功能
• 無限多的討論區

What is a Tag?

• Inspired by hashtag, a Tag is any keyword you can think of. Use Tag in your posts, then others can search for it, thus anyone with same interests can easily reach the post, and so can you. You can also subscribe a Tag, cause you might not want miss anything you liked to follow.

• 啟發自 Hashtag ，Tag是一個任何你能想到的關鍵字。在你的貼文當中加入 Tag ，其他人能依此去尋找到這些貼文，如此與你有相同興趣的人就可以跟你討論這個主題。 你也可以訂閱 Tag ，這樣就不會錯過任何有關此 Tag 的內容了。

• Using "#" following by keyword, will tag this post with that keyword on sent. Ofcourse you can use multiple tags or none(but this let the post only will be seen by your friends).

• 在任何字串前加上"#" 後面以空白分開(#像這樣 )，就可以自動標記該文章。當然你也可以加上一堆標記又或者什麼都不加(什麼都不加就只有你的好友能看到這篇文章了!)

---

PREVIEW

Testing account

Account	Password
guest	guest

Front page

User page(Main page)

Tag subscribe

Friend & online status

---

Functions

Member

• User avatar.
• Levels with activities.
• Personal custom message.
• Click on user avatar or friend status to show his/her personal information.

Tag

• Trend - Order by the number of subscribers.
• Tag subscribe.
• PrimeTag - Experimental tag that has specific ability.
  1. Beginner's guide Tag.(新手引導) Initial attached to new users.
  2. Anonymous Tag.

Post & Comment

• Displays following content/posts.
  1. Contains tag you subscribed.
  2. Friend post.
  3. Your own posts(include secret post).
• Tag - Automatically insert any tag with #keyword in your posts.
• Thumbs up or down.
• Vote - Praise democracy.
• Anonymous - Special tag, can imply post with anonymous, only those who subscribes Anonymous tag will see them, but they won't know the poster.
• Upload Image - Share images with others.
• Secret - A ONLY YOU CAN SEE post.

Tags, Vote, Anonymous, image upload can use separately or together!

• Tag of interest - Search for specific tagged content.
• Refresh posts with the button located in middle of nav bar.
• Up & Down scoring - Leave your comment with scroe!

Chat

• OK with multi-window chat.
• Ringing - When someone wants to start a chat with you, will recieve a shaking effect on the chat image.
• Online status - Online = blue, Offline = red

Notification

• Informs you with friendship status update and offline calling.

Tag forum (In progress)

This idea comes when the website is almost done. The final goal is to create a 「Any Tag is a individual discussion area」environment. And will use the PrimeTag to enforce the forum feature. Stay tuned!

---

Tech & tool used

Frontend

• HTML
• CSS
• Javascript
  • Tools
    • Moment.js - Time management.
    • Chart.js - Chart display.
    • Socket.io - For websocket protocol, a real-time communication library.
  • Tech
    • AJAX

Backend

• Use Python
• Flask
  • Tools
    • Flask-socketio - Server side websocket connetion tool.
    • Virtualenv
    • boto3 - Upload images to AWS.
    • Pymysql
      • Connection Pool - Maintain connections between RDS and Flask.
  • Tech
    • RESTful API
    • MVC

Database

• MySQL
  • Tools
    • MySQL workbench
  • Tech
    • Database normalization

Version control

• Git
• Github

Deploy

• Docker
• Docker hub

AWS

• EC2
  • NGINX : Reverse proxy, and cache static files.
  • Linux-Ubuntu
• Route53 : Domain name mabage.
• Elastic LoadBalancer : Imply with HTTPS protocol.
• RDS : A relational database with simple set up and easy to use, include backup.
• S3 : Storing images.
• CloudFront : Reduces latency when delivering images to users.

---

Structure

Database

AWS

---

Ghost of the past.