web designer and developer

Warble

January - May 2013

Warble is a microblogging web application modeled after Twitter that allows users to post/share files and live chat with other users. Developed using Node.js using the Express.js framework and SQlite3 database.

In a team of three developers, I worked on designing the layout of the web application, setting up the database, and writing the JavaScript functionalities that is used to interact and manipulate the database, validate/oAuth authenticate accounts/user sessions, search, and establish realtime chat.

- GitHub Repository
- Functional Specification

  • When a visitor lands on the site, they are faced with a login screen
  • When a username and password combination is entered, the app will proceed with the validation and OAuth process.
  • The OAuth checks the username and password from the datatbase. If it matches, a cookie is set for a stateful connection. Otherwise, an error message will be displayed.

  • From the homepage, there is a link that connects a visitor to the a signup page
  • When a visitor signs up, the app performs a validation on the form fields and checks the database to ensure the information does not already exist. If successful, a success message will be displayed and prompts the user to login.

  • After a user is logged in, he/she will be redirected to the main page.
  • On the left most column of the main page, the user is greeted with a "hello" followed by a list of online users. The list of users is linked to the user's profiles.
  • Below this is a link to a Realtime Chat page where users can send messages to other users. The chat page is updated dynamically using socket.io
  • A list of recent "Warbles" (updates) as well as a status update box ("Warble" box) is display to the right. By completeing the status form, a "warble" is added to the warble database and displayed at the top of the list of most recent warbles.

  • The discover page displays "Warbles" from other users
  • The discover page allows a user to enter keyword searches for other users (using AJAX).
  • Clicking on the username section of a user's warble brings you to their profile page.

  • The At Me page shows other user's "Warbles" that relate to, or is "@" (at) the user
  • Clicking on the username section of a user's warble brings you to their profile page.

  • The Profile page shows the user's member information: Profile picture, Warbles, Followers, Following, Uploads (uploads have not yet been implemented), Birthday and Quote.
  • The number of followers and following are linked. When clicked, a list of the user's followers and a list of useres the current user is following is displayed
  • The user's most recent Warbles are shown to the right of the above information.