-
Introduction
Warai is an online platform and social media website which allows users to upload and share user-generated content. The premise is simple. Users upload images, other users create entertaining captions for the uploaded images, and finally users rate captions based on how entertaining the captions were.
-
Inspiration
The inspiration for Warai comes from the Japanese meme website Bokete which introduced the format of uploading and captioning images. Unlike Bokete, we opted for a more modern Single Page Application approach using a MERN stack (where the M stands for MySQL rather than MongoDB).
-
Landing Page
The landing page or the main page is the first page a user arrives at when they visit the website. This page contains a list of all posts in a column, showing the post's image and the top rated caption below the image.
Navigation Bar
We implemented a navigation bar at the top of the page which allows new users to quickly sign up as well as enabling registered users to easily access their profile, post creation, and a means to logout when they're done.
-
Login & Account Creation
The login page is the page used by the users to login and upload posts or rate existing posts by other users. If the user is using the app for the first time, they will have to register first by using the user registration page. Once the user enters their first and last name, preferred username, email address and password, the user will be redirected to the login page to login. If the username or email already exists in the system, the user will be shown an error message.
Once the user logs in successfully they can post images or rate captions. They can update their name or profile image by going to the user profile page and clicking on the update button. When the user clicks on the update profile button, a form pops up with the existing names and an option to upload a profile picture. The user can upload a picture of their choice or just change their name if they would like to.
Logout
As long as the user remains logged in they will be able to find the logout button from anywhere in the application at the top right of the screen in the user nav-bar. Upon clicking the "Logout" button the user will be logged out of their account and redirected to the home page. The home page will now appear as it did when the user first accessed the site, with the navbar only containing a "Sign In" button at the top right and the icon displayed at the top left. Being logged out means that the user does not have access to the user profile page, create post, create caption, and rate caption features.
-
Individual Post Page
When a user clicks on a post, they will be taken to the individual post page where the details of that post are shown. These details include the post image itself as well as all the captions of the post along with their respective rating. This page is where users can create captions and rate them.
-
User Profile Page
Users who have an account on the website, also have a user profile page. This page is visible only if the user is logged-in. On this page, the user can view their account information including their profile picture, username, first and last name. This page also contains a button that if clicked, it will open the update account information page. The user profile picture has a file size limit of 1 megabyte and can be either a JPG or PNG file type.
-
Create Post Page
On the logged in user nav bar in the top right corner is the create post button. Clicking this button directs the user to the post creation page. Here the user can create a title in the text field and upload an image below it. Once the image upload button is clicked a file browser window will pop where the user can select the images that they have available. After selecting an image from the file browser window the name of the file as well as a preview image will be displayed on the webpage. The "Create Post" will become enabled and once clicked the user will be taken to the landing page where their new post is now displayed.
-
Captions & Ratings
Clicking on a post on the landing page directs the user to that post's individual post page. On the individual post page a text field for the user to write a caption is available. Typing and posting a caption alerts the user that the caption was posted successfully and the page will refresh. Existing caption can also be rated using a five-star rating system. Comments can be rated by hovering over the five stars to the right of any caption and clicking a half or full star to submit a rating.
