/new_fp

Primary LanguageJavaScript

cs4241-FinalProject

BaBaMen | Social Media | Sticky Post

Yufei Gao, Ruyue Wang, Yuxin Wu, Da Xu

BaBaMen https://fp-babamen.herokuapp.com/

Our social media application called Sticky Post, which allows users to leave messages and share feelings with friends, families or colleagues.

The users' messages will appear on the screen as sticky posts. The only thing they need to do is just login to their accounts. Then, they can create, edit or delete post(s) freely. Users can press the like button on any post to let the post-creator knows that people think the same way.

Sticky Post allows users to do all the CRUD functions. What's more, we also store all the data in the database decently and implement multiples of event-based interaction on the front-end. A well-organized server of Sticky Post also gives the users a better using experience. More interesting features are waiting for the users to explore!

Since our final project is updated based on Assignment 4 (Prof. allows us to do that), the screenshots and gifs below shows the differences between A4 and FP, and the new features of FP.

We created an account for the grader to use.

User Name: wyx Password: wyx

The old home page vs the new home page

oldHome newHome

The old tag vs the new tag

oldTag newTag

The new features:

Users can drag the post to any places they want

drag

Users can add emoji in their post

emoji

Users can create post anonymously

anonymous

Users can view the newest or the hottest posts easily

hottest

Users know how many letters should they delete, if their post is too long to be sent

limit

A new welcome animation

welcomeAnimation

Technical Achievements

  • Tech Achievement 1: Email verification for signing up. (worked with localhost, does not work on heroku)
  • Tech Achievement 2: Auto generates users' profile photo.
  • Tech Achievement 3: Password encryption. The users' passwords are much more safe now.
  • Tech Achievement 4: Improved post loading algorithm(load newest/hottest).
  • Tech Achievement 5: User can anonymously create new posts.
  • Tech Achievement 6: Added emoji picker in create post window. This makes the post more interesting now!

Design Achievements

  • Design Achievement 1: Post are now draggable. Users can drag any post and stick it on any position on the screen.
  • Design Achievement 2: Added a welcome page.
  • Design Achievement 3: Changed color scheme to gray and white style.
  • Design Achievement 4: Added animations for signing up, creating new post, and other actions.
  • Design Achievement 5: Added user's profile photo and username on the post.
  • Design Achievement 6: One post is limited to 140 words.
  • Design Achievement 7: A new welcome animation which is generated based on complex arithmetical calculation.

Reference: Word Cloud: https://codepen.io/stevn/pen/JdwNgw
Emoji Picker: https://github.com/mervick/emojionearea
Draggable HTML Element: https://www.w3schools.com/howto/howto_js_draggable.asp
Sweet Alert: https://sweetalert.js.org/
Logo Maker: https://brandmark.io/