OCLA Web App

Programming Languages used: HTML5, CSS3, Javascript, React
Project Domain: Web Applications

The OCLA Web App was built for the Ontario Courthouse Libraries Association to provide their members with an easy source of information about all of the law libraries in the province. The app was built as a web-based application optimized for use on mobile devices. As a web application it is very easy for users to access, being openly hosted on the OCLA website. Users do not need to deal with downloading and installing the app and do not need to deal with updates. The app was constructed with React to allow for a single page design avoiding unnecessary loading of separate web pages. Users can easily add the app to the home screen on their mobile device for quick and easy access to the resources it provides. Due to the informational nature of the app it was constructed with a separation between the data set and the UI elements allowing for an individual with little to no programming knowledge the ability to update and maintain accurate information about the libraries with ease.

The app itself consists of 2 unique displays. Initially upon loading the app the user is presented with a list of all of the law libraries in the province. By default the list is sorted alphabetically by the name of the law association however the user has the option to change the list to sort by city instead with the selection persisting for future use, quite useful if a travelling lawyer doesn't know the name of the association but does know the name of the city. Also included is a reactive search bar that will filter the results in real time searching across both association name and location. The OCLA colour scheme is utilized along with varying font faces to distinguish the law association names from the city names in this list. Each element in the list is distinctly separated by a slim line to indicate where the responsive area that the user can interact with lies.

The second page of the app is where the information about each library association resides. The top of the page contains multiple quick links that can be used for some of the most desirable functions such as: calling, emailing, getting directions, and visiting their website. On a mobile device these buttons are built to forward the user directly to the appropriate app for performing the desired action. The rest of the page contains all of the information the library association deemed relevant to their clientele once again utilizing the OCLA colour scheme and screen-friendly sans-serif fonts. The most important general information can be found towards the top of the page while more detailed less critical information can be found further down. Each page features a Google map of the location at the bottom of the page as to not disrupt the flow of text-based information. The quick link location button at the top of the page will take users directly to the map for ease of access. From there the user can easily launch the Google Maps app to get detailed direction information. In-line clickable links also exist for important resources like the website and contact email address.

The main list screen of the app.


The top of the information page including quick links.


The bottom of the information page featuring the map.