FbClone

This app is a clone of Facebook's home page. It allows the user to sign up, sign in, post something (text and/or pictures) and like posts. The authentication is using a email/password authentication with Firebase. The database is supported by Firebase Cloud Firestore. Pictures are uploaded to Firebase Storage. This project was generated with Angular CLI version 10.1.0.

Demo

Check the demo here: https://fb-clone-phi.vercel.app/

TODO

• 1st commit
• Add mutual friends, work/study place in Firebase when creating user
• Get connected users
• Add tooltips to Sign Up modal form
• Homogenize tooltips
  • Login page
  • Home page
• Add border to avatars
• Manage long strings in list of posts
• Header: Prevent collapsing
• Left body: add more mock buttons
• Mid body: add random stories
• Mid body: stories: fix width of div when name takes 2 lines
• Mid body: add border to avatar in posts
• Mid body: background borders stop at unscrolled area
• Mid body: remove gap between buttons in Post something div
• Mid body: prevent Contacts from collapsing
• Mid body: add Create room div
• Mid body: Like post feature
  • Add 'likes' field in database as a string array which will contain user ids
  • Update this field (add/remove user ids)
  • Style the view
    • Like counter
    • Like button animation
• Mid body: Comment post feature
  • Think about database architecture
  • This ain't gonna be easy
• Mid body: Delete post feature
• Mid body: Edit post feature
  • Modal
  • Backend
• Mid body: Create post modal
  • Re-use edit post modal
• Mid body: post pictures
  • Create post w/ pic
    • Upload to firebase storage
  • Edit post w/ pic
    • Add pic
    • Change pic
      • Upload new pic and delete old
    • Remove pic but not post
  • Delete post w/ pic
    • Remove pic from firebase storage
  • Show pics in post list
    • Show pics
    • Resize image if height too high
• Mid body: Embed youtube links
• Mid body: Display line breaks in posts
• Right body: add mock sections (birthdays, events...)
• Right body: contact overflow y
  • Overflow
  • Move contact list to a new component
  • Display contact tooltip correctly out of scrollable using javascript
  • Show scrollbar when hovered
• Right body: add New message bottom right button
• Left & Right body: get rid of that small scrolling when browsing posts