Website Link: https://ssgreene.tech/
I was inspired to rewrite A2 to have a more practical application - a Time Entry system. Since my senior year in high school, I have interned with a medical firm, Sheard & Drugge. Over time, I got rather lazy manually logging my hours in an excel spreadsheet. This solution is a much more effective and efficient solution to create hour logging.
The CSS framework used is Bootstrap, with no custom CSS styling used. I used this framework because Ive previously worked with it and had the most familiarity with it. The authentication strategy used is Github OAuth2 - because I wanted to achieve the technical achievement.
Middleware packages used:
- PassportJS - for OAuth2 authentication with Github
- express.json() - For parsing requests as JSON
- Handlebars - A view renderer.
- ensureAuthenticated - Custom middleware that access to the logging portions of the website have been preceded by authentication. If not, redirects to login via Github.
- CORS - enables resource sharing. Recommended for stable connection to Mongo and other outside resources.
My challenges came mostly from trying to connect to Mongo. I was initially aiming to connect via Mongoose - the idea of using models/schemas sounded much more enjoyable than the loseness of strictly using the Mongo driver. However, this did not prevail and I ended up just using the Mongo driver.
- Tech Achievement 1: Implemented OAuth2 authentication via Github. The user's username in the database with that shift record, so that when shifts are inserted/retrieved they are only inserted/retrieved for that user.
- Tech Achievement 2: My website is hosted on a custom domain which points to a virtual machine provided by Oracle Cloud Infrastucture. Setting this up required me to manage the DNS records, create an NGINX reverse proxy on the VM, and update the firewall to allow the VM to act as a web server.
- Tech Achievement 3: Lighthouse Report with 100% on all sectors.
- Design Achievement 1: Accessibility via the following:
- My website title accurately describes what you do on my website, with unique titles for login and entry pages.
- I have unique headings to convey meaning. I use a top level heading to convey the name of the system, Ad-Hoc Time Entry System, and sub headings to convey the unique sections of the page.
- I have a link to login with github that clearly conveys you are clicking to login with Github.
- I have no alt-text, but this is primarily because I dont have any images :(
- My instruction for adding a shift I think is very intuitive - as tested by users.
- The page is not bloated with content.
- The contrast is great and comes from a color panel (Bootstrap's dark theme automatically does a great job at this)
- Color is not used to convey information any where in the design
- Every form control in submission of a shift and removal of a shift has a label.
- The page has a set language.
- Page uses aria-label and aria-describedby to enhance accessibility on sections.
- Form fields validate to help users from preventing mistakes by entering improper data, or data that would otherwise mess up the system.
- Design Achievement 2:
- Contrast - Designing with Bootstrap does a great job at ensuring contrast from the start. The design goal of contrast is to make elements stick out from one another. Bootstrap makes achieving a contrast design simple. I went for a dark/night mode design, which instantly forced the text to be a contrasting light/white text. Of course, I could have overriden this decision of the framework - but that would have violated the contrast principle. I suppose, the only stylistic choice the framework gave me in my use case was what color button I wanted to use. Of course, using a black button would not have looked good on the blackish background, and bootstrap's "blue" button being used as a primary button for submission looks great.
- Repetition- is avoided. Each page only displays the content that is absoutely necessary. More over, color patterns are introduced to make the content visually appealing. The text isnt repetitiously one size pattern allowing users to see what is what. Looking at the main page, everything is predicable. The shifts display a clear patten such that every shift is immediately followed by the next clearly demarcated by lines and follows the same shift style. Each shift form section (removal and adding) is stylistically the same, with the only difference being the form inputs for the two different sections, making the page clearly readable.
- Alignment- The page is aligned in a structured fashion. Everything is in a line, centered. This makes the readability of the page very neat. More importantly, this alignment is continuous as the viewport shrinks. In other words, the page maintains alignment throughout mobile and desktop viewing experiences.
- Proximity - The page has spacing from other elements and from the border of the browser. This supports a very helpful browsing experience. This was achieved and made very easily possible using Bootstrap's container-grid layout. Every element is contained in a container with medium breakpoints. Then, the text on these container is set to center. Automaticially, this places one element per row centered in the view. Moreover, the content spans the container, which takes up a majority of the view - minus some margin.