We have developed an application that allows users to explore the world. As soon as the user logs into the site, he or she is able to search for all the countries in the world. The search results will appear as a list, and will be sorted alphabetically based on the name of the country. By applying filters and/or searching again, the user can refine his or her search further.
It is also possible for users to "like" countries, mark them as visited. Upon the click of a button, the user is able to view these countries inline on the page by adding them to a collection called "My Travel Diary".
For each country, some information is displayed, including its area, population size, and GDP (Gross Domestic Product).
# Project - 4
For this assigment we have choosen to rework project 3 with more focus on sustainablity. As our last project had a bad practis with a lot of unnecessary code and lots of unused potential, have we now choosen an easier and more static page.
We have ended up using most of the time just removing and reworking a lot from last time. We have also decided to ditch the light/dark theme and just have a darker over all theme to save power etc.
# Needed to be installed in order to run
...
...
@@ -61,9 +58,6 @@ The client side of the project is located in the frontend/source directory. Our
### MUI components and libraries
A large portion of the components we used came from the MUI-library. We used the library throughout the project since it has a wide variety of components that are easy to integrate into the design. One of the greatest advantages of the MUI-components is that they offer inline styling, which makes it easier to change the component with CSS. Due to the Box-component, we were able to reduce the number of div-tags since CSS can be applied inline instead of having to create a separate CSS file for each div-tag.
In situations where the inline styling was not sufficient to alter the component to our specifications, we used ThemeProvider and UseTheme by creating a separate component called Themes.tsx.
### Universal design
To ensure accessibility we made sure to review the WCAG 2.0 guidelines/success criteria for universal design for web pages. Norwegian national regulations require at least 35 out of in total 61 of these success criteriato be fulfilled, so it was important to us to learn how to do this and implement this in our app. The most prominent requirements we implemented are listed below. Additionally, to ensure we were in alignment with the WCAG 2.0 reccomendations, we used the Google Chrome axe DevTools extension. This tool scanned our web page, and highlighted accessibility problem areas.
...
...
@@ -96,7 +90,7 @@ We summarize the following points:
## Sustainable web development
To ensure the least amount of energy use we made the entire theme of the app/page/site dark. Darker colors require less power to display on the screen, and therefore require less energy than light themed applications. We did not use any photos either, and only a limited amount of different colors. This also results in less energy use.
Darker colors require less power to display on the screen, and therefore require less energy than light themed applications. We did not use any photos either, and only a limited amount of different colors. This also results in less energy use.
To reduce the amount of data traffic between the client and server side of out application, one thing we did was create a query that only fetches countries by a certain ID from the server. The users travel diary is expected to display a far smaller amount of countries (Country data objects) than the total amount that is saved on the server. To not over fetch data in order to display the users travel diary, this query became very handy.
...
...
@@ -105,9 +99,6 @@ We also chose to not use any video the reduce both energy use and data traffic t
Applications with data traffic and less energy use often have a better user experience, as they are quicker than large applications.
## Testing
We tried to test as much as we could, due to the time limit. The fact that our application was not ready untill close to delivery date made testing quite difficult. We are not quite satisfied with all the tests, and an further improvement of the Application would be to write more tests. We preoritized getting in a couple easy end-to-end tests, and simple unit tests.
