nicklas-holmqvist/kodprov

Code test for Scandinaviaphoto

Task

• Build in HTML/CSS/JS, any framework and library
• Create a list of all houses in Game of Thrones with the api anapioficeandfire.
• Show and hide information that is avalible in the data
• Filter through search

Setup

My first choice would have been ReactJS as I worked alot in that framework and MERN-stack overall. To setup a ReactJS/Express/NodeJS whould have been prefered but I really wanna try NextJS from the start. I have been working in NextJS but not from the start so this was my challange for myself in this project.

Project-stack and npm packages

• NextJS
• Typescript
• Parse-link-header
• Eslint

The basics

• There is two api-routes in pages, one for all houses and one for search with an dynamic route.
• There are three main components, Search, List and Paginations
• The heart of the webapplication lays in Layout where I fetch both api and handle my states. Everything then is going down by props.

Thoughts about the flow

I think that this api is kinda square in it's performance. It has a limit of fetches per day, how many items per page there is in one fetch and no joker search. You have to search for the full house title or other data avalible to get any data from it. I choosed a basic fetch with a modification. The user can write either "House wells" or just "wells", it is formated to lower case and "house " is hardcoded in the api url. If I was going for another approach like try other titles like region, words or house of arms. I would have done the fetch a little bit different. Of course you could have fetched all pages and stored it local but then the use of the api goes away and you risk to hit the fetch-limit if the page should go "live".

I started with everything in Layout but I thought it looked to much so added a Context to handle everything. But after a discussen with a friend I learned it was bad practice because everything would update in the Context even if just a small variable was changed. So I turned it back and made it better.

I'm still learning alot and I can see more things to add in this project but that's not the point for this task. A fun little project.

Styling approach

Because this task was to make a list of houses my approach was to make it like a webapplication that fits well on a tablet or phone. Made a design in Figma that I had as a baseguide. Didn't create any colorpalette as I use to because I didn't find any good pages for GOT to use. The fonts I used is Cizel and Noto san.

Figma-link

Getting it running

• Clone the repo
• Install dependencies:

npm install

or

yarn install

• Run developer server:

npm run dev

or

yarn dev

• Open http://localhost:3000 with your browser to see the result.

Enjoy

kodprov's Issues

Refactor: add type for the components

Refactor: cleanup code

Feat - create searchBar

A user should have ability to search for a house.
The input is going to fetch data from the api/[searchValue] and present it in the list.

Feat - create api to filter search

User should have the possibility to filter the houses through a search bar.
Create and test in function

Refactor: move pagination type, fix css

Refactor: break out Context

When I use Context to all the pages everything is updating if I only change one little value.
To fix this put back most of the data in Layout again.

Refactor: add favicon

Refactor: make pagination responsive

Feat - create list from api data

Create a list that shows data from a list variable.
Map out data into an listItem.
When user press the listItem more information shall be showned.
User should have the ability to hide the information afterwards.

Refactor: look over error handling in api -Dropped

Build: add context for House

Put all api fetches and variables in one context

Bug: fix opened house when switch page

When toggle pages and have an open House. That ID will be open even if it´s not the same house.

Refactor: search component

Show one searchbar with search button to the right.
The erease button will be between the input and search button.
One border around the parent div

Feat: add no page found

Refactor: add title or header

Add a logo or title

Refactor - change api fetch for search -Dropped

Change the search fetch to api/:id

Refactor: change "laddar" to an loader component

Feat - create pagination

The user should have the ability to go back and forth, to first and last.
Read in the documentation how to use paginations.
documentation: https://www.anapioficeandfire.com/Documentation

Refactor: change api from search to houses/:id

Refactor: clean up the css files

Refactor: add comments and licenses

Refactor: style more information on house

Feat - change displayed items

The api standard is showing 10 items.
Create an component that can change between 10/30/50 items in the list

Feat: add new font

Refactor: fix styling to list

Refactor: handle searchValue

If you search for "house wells" there will be no match, only if "wells" is the value.
Create an handle function for this so if "house wells" is in the input, remove the "house "

Refactor: change search api to houses/:id - Dropped

Refactor: look over code and some bugs

• Fix all typescipting
• Fix styling
• Fix bug in back pagination when on last page

Bug: pagination not working as it should

When switch page the list is set to standard 10 in view, even if 30 had been choosen.

Feat - create api to get all data

Create an api to get all Houses from extern api.
api: https://www.anapioficeandfire.com/api/houses?page=1&pageSize=10
documentation: https://www.anapioficeandfire.com/Documentation

Feat: add svg icons

Export the icons from Figma

Icons that is needed:
pagination first = 2 arrows to left - DONE
pagination prev = 1 arrow left - DONE
pagination next = 1 arrow right - DONE
pagination last = 2 arrow right - DONE
open house = smaller arrow down - DONE
close house = smaller arrow up - DONE
search = 1 search icon - NOT USING
reset search = 1 X - DONE

Feat - advanced search - Dropped

When a user search on a few letters a function will look through specific titles and display them in categories as search result.
In the search result there is going to be a show all button at the side of the category.