WeWatch Network is a Social Media Web Application where users can shared their favourite youtube video and make a post for everyone. Users can also interact with another user and get friends to have fun.
This website can be accessed in https://wewatch-network.herokuapp.com/ (currently not working on safari).
Note: The website will sleep (due heroku free hosting regulation) from 11:00 PM - 05:00 AM EST
This project was bootstrapped with Create React App.
These are the following features for this App, more updates in the future:
- Video Post
User can create a video post containing title, description and youtube video url. Moreover, User can watch another users posts on the homepage. (currently edit post hasn't implemented yet). - User Authentication
User can sign up and make their account in order to fully access all features available and easier to interact. The authentication was implemented using Firebase and stored the user authentication data on Google Cloud Platform (GCP). - Like and Comment
On each post, if the user like the post, they can appreciate it by pressing the like button. User can also comment regarding the post to share their thought. - Advanced Search
There are 3 search features currently available for the user, will show first 10 results available:- Post Search: Search available post which have title related to the following search (Capital Sensitive).
- Video Search: Search Video from youtube and showed first 10 relevant videos based on youtube recommendation (Implemented using Youtube Search API).
- User Search: Search available user currently registered on the website.
- Friends Features
Friend feature is available in order to make easier user interaction. There are 4 states on friend connection:- Add Friend, User can add another user to become friend. Then, wait for another user to accept friend request.
- Accept Request, User can either accept or reject friend request from another user.
- Friend Requested, User in state of waiting its request to be accepted, can cancel the request as well.
- Friend, User and another user have become friend.
- User Profile
Each user will have their own profile and can see another user profile. The profile contains username, friend status and all posts from the profile's user.
This website was build using the following tools/framework:
- ReactJS, using component class to maintain almost all frontend function and backend request.
- NodeJS, for backend and handling database model.
- ExpressJS, handling server-side for NodeJS framework.
- MongoDB, storing all model database in NoSQL database form.
- Firebase, handling user authentication and session.
- Youtube API, handling youtube request for getting video's data and perfom youtube search.
- Bootstrap and MaterialUI, handling frontend page HTML design.
- ReactPlay, enabling video play in webpage.
In the next update, These following updates will be added for user convinience:
- Post and Profile Edit
User will be able to edit their own post (title and description) and profile (self desciption). - Friends Request and Post Notification
User will be notified when there's friend request from another user - Save and Share Post
User will be able save their preferrenced video and share some fun posts to their friends. - Post Tags
User will be able to add tags which relevant to their post. Search features based on tags will also be available. - Chat Features
User will have chat features to send messages to their friend or anyone. - Improving Web Design
In current state, most of the program were just focuss on its functionality. Currently I also learn how to make responsive frontend using css/scss.