Commit 1bc9dffb authored by Ingunn Sund's avatar Ingunn Sund
Browse files

Merge branch '2-write-documentation' into 'master'

Resolve "Write documentation"

Closes #2

See merge request !18
parents 1f638478 6f5c7bf0
Pipeline #50446 canceled with stages
# Project 2
# Project 2 - Exhibition Creator
> [Live demo of the application](
## Credits
## Install
$ npm install
## Run
$ npm start
## React
This project uses both functional components and a class component (`ButtonGroup`) to show the different ways to implement components in `React`. The class component uses states in the constructor. The rest of the components are functional components and uses the hooks `useState()` and `useEffect()` for states and lifecycle event handling. All components are made from scratch. This project is written with use of ES6 using `let`, `const`, template literals, object descructuring, `import`/`export` and arrow functions.
`AJAX` (Asynchronous JavaScript And XML) was used to load all the assets needed in the website. This was the `SVG`s (images) and the `JSON`s (quotes and credits). This was done using the built in function `fetch()`. To reduce the loading time and number of calls to the server, the resources were only fetched if they were not previously loaded in recent time. When switching back and forth between the exhibitions the content is retrieved from the client and not the server. This was done using the built in caching mechanism in the browsers and using the session storage. The audio is not fetched and is just using the `HTML 5` `audio`-tag.
## HTML Web Storage
In this solution it is used both local storage and session storage.
### Local Storage
Local Storage was used to store favorited exhibition combinations. The `localStorage` stores its data in the web browser between each session of the web browser. To favorite a combination its added a star in the top right corner of a exhibition. If the user clicks twice it will not be favorited anymore. The website is implemented so that the user can view all its favorited exhibitions by clicking a button and open a modal. This opens a similar view to the main exhibition view, but its content is just the favorited combinations. When removing a combinations from the favorites it will be removed from `localStorage` aswell.
### Session Storage
Session Storage was used to store the recently loaded exhibition content (as a cache). This made it possible to not fetch all resources every time they was needed. Algough the browser have a built in cache when fetching these files, this was implemented as a challenge and to use the `sessionStorage`. The `sessionStorage` does only keep its data in each session of the webbrowsers tab of the website. This makes it much more useful for something that one does not need to keep over a longer time (e.g. cache).
## Node.js and NPM
This project is created using Node.js and uses the NPM (Node Package Manager) for knowing which version of each dependency of the project. This is stated in the `dependencies` and `devDependencies` in the `package.json` and the `package-lock.json` files. To create and develop this project/repository, it was used the package `create-react-app`.
## Responsive Web Design - About and Testing
The website has a different layout design for different screen sizes.
The website works and looks good on all newer phone sizes and up to PC sizes.
Three breakpoints with media queries are implemented, where the three main views can be seen in the images below (1, 2 and 3/4). A fourth view is made for very small phones, with pixel width under 350 and looks the same as the mobile view (Image 2) but with smaller texts and other small changes.
The testing of the different
<div style="text-align: center">
<h3>Image 1: PC<h3>
<img src="./docs/images/pc.png"/>
<h3>Image 2: Mobile vertical - Samsung Galaxy S9+ <h3>
<img src="./docs/images/mobile-vertical.jpg" height="400px"/>
<img src="./docs/images/mobile-vertical-2.jpg" height="400px"/>
<h3>Image 3: Mobile horizontal - Samsung Galaxy S9+<h3>
<img src="./docs/images/mobile-horizontal.jpg"/>
<h3>Image 4: Tablet vertical - Samsung Galaxy Tab S2<h3>
<img src="./docs/images/tablet-vertical.png" height="400px"/>
For the testing of the device size to be approved, the website had to work as intended and the site had to look intiuitive.
The choise to make three different views for the combination selector was made to utilize the space in the best possible way. When a user is using the website on a PC (Image 3), he or she does not need to scroll vertically to see the whole website, which is positive. When the screen width is smaller, the combination selector will jump on top of the exhibition(Image 4). For a vertical tablet view, it will still be possible to see the whole page without scrolling vertically.
On mobile it might not be possible to see the whole page without scrolling vertically. By using the vh (viewport height) unit to set the maximum height of the Exhibition component, it guarantees that the whole exhibition view (the generated combination) will not use more space than the height of the device.
Viewport is defined for the project like this:
<meta name="viewport" content="width=device-width, initial-scale=1" />
The images on the website are SVG's, which means that they are scalable, and therefore fits right in with the rest of the responsive design.
The Exhibition view (the generated combination) is also made responsive. It changes from a view where the SVG and the text are beside each other when the width size is large, to a view where the SVG is above the text when it is no longer space for then beside each other.
## Testing
### Code Testing
The code tests are created using `Jest` as it is built in with `create-react-app`. To make the testing easier and for example use functions like `mount`, `Enzyme` is added.
Since there was no demand for extensive testing for this project, there is only added a snapshot test and a render test for the `Exhibiton` component.
Snapshot testing works by taking a 'snapshot' of the component structure. The next time the test is running, it will take a new 'snapshot' and compare it to the old one. This is done to make sure that no unwanted changes is done to the component.
$ npm test
### User Interface
The website is designed with universal design in mind. The website is functional when using only the keyboard.
The font colors and background colors are tested with contrast checkers to ensure that the contrasts are high enough for most users.
### Browser Testing
The website works for the newest versions of `Chrome` and `Firefox`. The testing of the browsers included checking for errors in the console and making sure that no crashes occured. Visual testing was also performed, by checking that the website layout looked the same and that the correct font and shadows were used.
## Git Usage and Code
### Git Usage
Issues has been created for each major part of the project. Braches are then made from the issues and when commits are added to the branch, the commits are linked to the issue.
The GitLab CI/CD pipeline was used for the project which automatically builds and tests the code for each commit. Code linting is included in the testing.
### Code Structure
The project is structured with a component folder that includes all of the components with a separate folder for each of the components. In each of the component folders there is a JavaScript file with the React code, a CSS file and possibly a test file. There is also added a index.js file for easier importing the component.
### Lint
To ensure that the code style is good and consistent a linter (`ESLint`) was added.
$ npm run lint
## Credits and Sources
### Sources
Styling for tooltip from:
Modal inspiration/help from
Modal inspiration/help from:
### Audio
#### Scary
0. <p>Made by <a href="">AlienXXX</a> from <a href="">Freesound</a></p>
1. <p>Made by <a href="">Garzul</a> from <a href="">Freesound</a></p>
2. <p>Made by <a href="">FoolBoyMedia</a> from <a href="">Freesound</a></p>
3. <p>Made by <a href="">Dneproman</a> from <a href="">Freesound</a></p>
#### Nature
0. <p>Made by <a href="">naturesoundspa</a> from <a href="">Freesound</a></p>
1. <p>Made by <a href="">MarcMatthewsMusic</a> from <a href="">Freesound</a></p>
2. <p>Made by <a href="">mark646</a> from <a href="">Freesound</a></p>
3. <p>Made by <a href="">amholma</a> from <a href="">Freesound</a></p>
#### Happy
0. <p>Made by <a href="">Setuniman</a> from <a href="">Freesound</a></p>
1. <p>Made by <a href="">Dvideoguy</a> from <a href="">Freesound</a></p>
2. <p>Made by <a href="">monkeyman535</a> from <a href="">Freesound</a></p>
3. <p>Made by <a href="">Setuniman</a> from <a href="">Freesound</a></p>
### Images
#### Monsters
<div>Icons made by <a href="" title="catkuro">catkuro</a> from <a href="" title="Flaticon"></a></div>
0. <p>Made by <a href="">catkuro</a> from <a href="">Flaticon</a></p>
1. <p>Made by <a href="">catkuro</a> from <a href="">Flaticon</a></p>
2. <p>Made by <a href="">catkuro</a> from <a href="">Flaticon</a></p>
3. <p>Made by <a href="">catkuro</a> from <a href="">Flaticon</a></p>
#### Flowers
0. <div>Icons made by <a href="" title="Freepik">Freepik</a> from <a href="" title="Flaticon"></a></div>
1. <div>Icons made by <a href="" title="Linector">Linector</a> from <a href="" title="Flaticon"></a></div>
0. <p>Made by <a href="">Freepik</a> from <a href="">Flaticon</a></p>
1. <p>Made by <a href="">Linector</a> from <a href="">Flaticon</a></p>
2. <p>Made by <a href="">Good Ware</a> from <a href="">Flaticon</a></p>
3. <p>Made by <a href="">dDara</a> from <a href="">Flaticon</a></p>
2. <div>Icons made by <a href="" title="Good Ware">Good Ware</a> from <a href="" title="Flaticon"></a></div>
3. <div>Icons made by <a href="" title="dDara">dDara</a> from <a href="" title="Flaticon"></a></div>
#### Animals
0. Also favicon: <div>Icons made by <a href="" title="Freepik">Freepik</a> from <a href="" title="Flaticon"></a></div>
1. <div>Icons made by <a href="" title="Smashicons">Smashicons</a> from <a href="" title="Flaticon"></a></div>
2. <div>Icons made by <a href="" title="surang">surang</a> from <a href="" title="Flaticon"></a></div>
3. <div>Icons made by <a href="" title="Freepik">Freepik</a> from <a href="" title="Flaticon"></a></div>
\ No newline at end of file
0. <p>(And Favicon) Made by <a href="">Freepik</a> from <a href="">Flaticon</a></p>
1. <p>Made by <a href="">Smashicons</a> from <a href="">Flaticon</a></p>
2. <p>Made by <a href="">surang</a> from <a href="">Flaticon</a></p>
3. <p>Made by <a href="">Freepik</a> from <a href="">Flaticon</a></p>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment