Shannen Lin: https://a3-sklin330.herokuapp.com/
I tested most of my app in FireFox but used Google Chrome for Lighthouse tests.
The goal of the application was to create a two-tier web application with a database, an express server, and a CSS framework. A user should be able to login to a page or create an account if they don't have one. Once logged in, a user can create, remove, and edit book reviews which will show up in a table.
I faced a lot of challenges to realize the application. The challenge that gave me the hardest time was to figure out how to have a user view only their own data and how I would communicate that between the different pages. I also had a hard time figuring out how to design my website to look nice as I don't really have much designing experience. Even with Bootstrap, I still struggled to figure out a good design.
I used server-side authentication with cookies simply because it seemed the easiest and the professor had already provided some sample code to work with.
For my various HTML input elements, I used text area, text field, password, and number inputs in my forms.
I used the Bootstrap CSS framework because it is very easy to use Bootstraps predefined design templates. It really helped with keeping my designs consistent across different browsers and setting up the columns of my form. I made a few changes to the CSS. For example, Bootstrap only has 25%, 50%, 75%, and 100% for setting the width but I wanted a value of 30%. Also, the way that Bootstrap handled tables did not work with the way I had set up my code so I added my own CSS code for that.
The 5 Express middleware packages I used were: body-parser which parses the incoming request bodies before the handlers and puts them inside request.body, cookie-session which stores the session data on the client within a cookie and was used for authentication, serve-favicon which allows us to serve favicons from the node js server with better performance, serve-static which is used to serve static files from within a given root directory, and morgan which logs information for HTTP requests.
- Tech Achievement 1: I hosted my site on Heroku. I really like the site because unlike Glitch, I don't have to wait for a while for the site to wake up. However, having to install the Heroku CLI to set up the site was a bit more inconvenient compared to Glitch.
- Design Achievement 1: I used the 4 design principles from the Non-Designer's Design Book readings. The principle of proximity involves grouping related items together into a visual unit. On my login page, all the related items(username input, password input, Submit button and Create an Account button) are all very close together in the same box to indicate that they are related to each other. Once logged in, my main page is divided into 3 distinct spaced out sections based on their contents: the header which includes the title, the Add Review form which contains all the input fields needed to add a book review, and the results table which contains all the information about the added book reviews. Even within the form section, different inputs(like Title or Author) are spaced apart from each other to denote that they are separate. The principle of alignment says that elements on the page should have a visual connection with something else on the page. I have a few examples of alignment on my site. On my login page, the username input, password input, Submit button and Create an Account button are all aligned with one another due to the fact that their widths are the same. Within the form section on the main page, the title of the section "Add reviews for books you have read." is left aligned with the form while the Add Review button is right aligned with the form. All the text and input boxes within the form are left aligned. Inside the results table, all the text is left aligned for a more clean look. The principle of repetition involves repeating some aspect of the design throughout the entire page. For example, the title "Book Reviews" which appears on the login screen has the same bold font as the title on the main page after you login. The headings on the page, like "Add reviews for books you have read." and the headings for the table are bolded as well to show that they are important. I also used a similar color palette throughout the web page. Both the login page and the main page use black, light gray, and white for the primary colors. Some additional secondary colors are used by the buttons, with the same green and blue colored buttons showing on both the main and login page. The principle of contrast means that if two elements are not exactly the same, then they should look different. On the login page, for example, to differentiate between the login section and the rest of the page, I made the background a black color while I made the login section a very contrasting light gray color. On the main page, I did something similar with the main title header and table header being a black background with white text for contrast. The main title uses a very distinct bold font which contrasts with the font for the rest of the elements on the page, which emphasizes the importance of the title. Unlike the black/white theme of the page, the buttons use brighter colors to contrast and bring emphasis to themselves. Also, the buttons are each colored differently based on their functions so that the user does not mistake them.