motivetag

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.