Assignment 3 - Persistence: Two-tier Web Application with Database, Express server, and CSS template
https://a3-nikhil-chintada.glitch.me/
The goal of this application was to create a two tiered web application with login capabilities and data that only a authenticated user can access. I created a site which allows users to make and modify a todo list with items containing priority, task name and due date (each being different input types).
Using MongoDB, I authenticated the user simply by taking in the username and password and using a query to search for the user provided. If the query was successful, then the password value of the item in the database would be compared to the password provided by the user. If they matched they were authenticated and sent to their user page. If they did not match a message would be displayed on screen saying that the password was incorrect. If the initial query was not successful this would return a message that the user didn't exist and suggest the user to add the new user they had tried to input (by checking the checkbox on the form). This seemed to be the most straightforward way to authenticate.
I used Bootstrap for my CSS framework as it seemed simple and easy to use with elegant styling. I restyled very little, mainly adding a grey highlight when hovering over table values on the user page to indicate it can be clicked as well as centering the form and making the login error messages red.
I used the body-parser middleware package to process data between the client and server more easily without having to add in headers on each message and to utilize express' functions. I used cookie-parser in order to store a cookie of the current user which was used by the server in order to access the appropriate data based on the cookie and to keep the user signed in until they wished to sign out (at which point cookies are cleared). I used serve-favicon to create a favicon for my page (A3 on a red background). One thing to note for the favicon is it doesn't show up in edge unless the page is pinned. I used response-time in order to get the response time getting data from the server for auto-populating the table as this was more time consuming than other actions. I also added in connect-timeout for stopping the program if anything took longer than 5 seconds. I added in passport and passport-github for the OAuth authentication, those these were not fully implemented.
- **(Attempted) OAuth Authenticaion **: I started setting up OAuth authentication via the GitHub strategy, however I did not get very far. My next steps would have been serializing the user data and setting up a get request for the call.
- CRAP Principles: Contrast In order to add a level of contrast to the webpage, a white background with black text was used, this creates an easy to read layout of the website. This color scheme is used in the form and table as well. The header row of the table is colored black, creating an immediate visual draw to the table, also helping to shape the table’s size and define it very well. The contrast of thick bolded text for headers and todo list item numbers in comparison to the regular text used for the body of the table and the form headers also helps in drawing the user’s eye to important information. Separate from all the rest in color scheme are the buttons, which are blue, indicating their difference from the static aspects of the page. Repetition The black and white color scheme assists with repetition. The repeated use of thick, bolded letters helps accentuate the section headers for the page, the table and the form. Both the table and the form have headers of the same size and font in order to visually communicate the fact that they are headers of equal importance. The header that breaks from this is the page header which welcomes the user because this is for the entire page rather than a single element, denoting its importance from its break from repetition. Between sections the size of items changes (the form inputs are less wide than the table items) which helps the user see the difference between the section without the use of section divisions. Additionally, the table has a very clear repeating style which differentiates it from the other items on the page, helping create a clear difference between the table and the form. Alignment The items on the page are purposefully aligned in the center. The first element the user will see is “Hello user” (with the user’s name in place of the word user), before they see “Your To-Do List” followed by “Enter User Data” creating a clear flow of information for the user. Within each section, items belonging to the form and the table are aligned with one another in order to demonstrate their uniformity (within their respective section), while their changing size and center alignment helps differentiate and contrast them for the user. The sign out button being all the way at the bottom of the page by itself helps differentiate it and indicate that it is a separate and final process for the user. Proximity Proximity is used throughout the entire page in order to demonstrate different sections and related information. The first text on the page which welcomes the user is directly followed by “Your To-do List” which indicates just through proximity that the table is related to the user, with the text assisting this. However, even between these items there is a bigger gap between the introductory text and the to-do list header text than there is between the header and the table, indicating the text “Your To-Do List” is for the table below it. The grouping of the buttons all at the bottom of the page also helps indicate that this section is for user action. Additionally, grouping the buttons add, edit and delete in a single line helps indicate the separation between these actions which are for the form, and sign out, which logs the user out of the page and returns them to the start page.