Dumblr - Share your thoughts anytime

A social network powered by ReactJS, Express and Firebase Storage / Authentication / Real-Time Database.

Tumblr clone - A social networking platform where users can post various types of content, reply to others' posts, edit personal information and get notification from others.

Website demo link

https://react-personal-project.firebaseapp.com/

Test account

• account: public_test@mail.com
• password: 123456

Technologies

• Front-End
  • Built a SPA with React and Router
  • Utilized Redux for global state management
  • Managed async data-flow with Redux-Thunk
  • Adopted Material Design and Flex-box for the UI layout
  • Provided native signed-in via Firebase Authentication
  • Well supported different user devices through RWD
  • Module bundling with Webpack
  • Database with Firebase Real-Time Database
• Backend
  • Built a RESTful API with Node.js and Express.js
  • Designed backend data structure in Cloud Firestore
  • Deployed on Firebase Function

Database Schema

Link: https://github.com/elftvxq/react-dumblr-functions

Features

Login / Registering with Email

Users can sign up and login by email and password.

Various types of post contents

Post content with photos / Link / Quote / GIF / Video

Text post: uploading photos w/ title, description also the Hashtags

The post won't be sent out if the description is empty. Use file storage with Firebase Storage.

Link post: paste link w/ description for this link

The post desplays the image of this page, title and content.

Quote post: post the sentence and resource

Use different font style to highlight the quote.

GIF post: the post is with the content and one GIF

Enter the keyword in GIF search input, select one and create the content to post.

Like and dislike the post

Hint word: user can like or undo like. After like the post, the heart turns into the red filled icon. Evry post displays number of likes and comments.

Comment on the post

Display comments from other users by time order. Show comment time and user profile photo.

Delete the post

User can only delete himself/herself post. Double check then it allows user to delete the post.

Change profile picture, cover photo and edit personal bio

Update immeditely after uploading the photo or editing.

Notifications

User can see who liked their post and who replied the comment. User also can click and will be directed to that post.

User Main Pgae - Masonary Design

Click user name and user can see all the posts.

Search for other users

The user name have to be every letter matched.

To-Do

• Upload multiple images
• Password reset
• Delete comment
• Emoji keyboard avalaible when creating post or reply