The whole process of Web App From Scratch will be documented here!
This is a list of things I want to do in this course:
Live link: Demo
- Brainstorm session to figure out my concept.
- Deciding what API I am going to use.
- Request data from the API with an asynchronous call.
- Parse the data to JSON and save it in a temporary object.
- Render data from the API on the overview page.
- Use
fetch()to request data from the API. - Write down code comments for better understanding.
- Using ES6 modules to structure the code.
- Made a
loadMorefunction for loading in the next API call
Live link: Demo
- Expanding my
README.mdwith extra information - Make an Actor diagram.
- Make an interaction diagram.
- Use routing for the detail pages.
- Use a templating engine.
- Remake Actor/Interaction diagram.
- Deciding what module structure I am going to use
Live link: Demo
- Use routing for the detail pages.
- Made an design for my application.
- Added
.mapand.filter. - Made a sorting function for my game data.
- fixed pagination on the Game Page.
- Made a Detail Page template.
- Cleaned up my code.
- Added code comments for better readability.
In the start screen of my product users are presented with a list of all gaming genres. The user can select a genre out of this list that the user wants to know more about by clicking on it. The user is then directed to a new page where all the games within the selected genre are presented in a list in the same way as the genres were previously. The games within the selected genre are obtained using an RAWG API. The user is now able to select one of these games in the list to obtain more detailed information about it. When a certain game is selected, the user will be navigated to a new page with all sorts of details about the game.
Clone the repository of the project
git clone https://github.com/RooyyDoe/web-app-from-scratch-1920.git
Run code
Run the index.html into your browser
(Live demo if needed)
Demo is also live at: Still Loading
First version
Second version
Explained
It starts with opening the application, after this the user is going to route to one of the routing options. At first this will probably be the Genre Overview Page. When the user routes to genre() it runs the function getGenres() and it will look into the local storage if there is any available data that can be re-used. If not there will be a API request to the RAWG API Database and get the data asked for in return. This will also be saved in the localStorage. When this process is done it will send it back to the router that renders in the genre page.
getGames Utils
When the users are located on the games page they are able to filter and sort the games on how they like. When this happens the data will be manipulated with (Map, Filter or Reduce) and will return to the routes that renders in the new results to the games page.
Utils
There are also standard Utils in the application that will be available on every page. this will be a loadingState and Error Handling. LoadingState will be used when the user is requesting a lot of data. The Error handling will be used when the user routes to a wrong href or the data is not available.
First version
For this project I've used handlebars as template engine. I had used a template engine once before in a project but this was running on nodeJS. This was way different then what I needed to do right now. I have to say it is still a easy way to generate HTML. I like how easy you can do a forEach in a template and it will just show all the results in the object/array.
I do think it looks a bit messy if you use handlebars.js client-side. I think this also can be code better than I am doing right now. But I am making a <script> tag in the HTML and write the whole template inside this. I am adding a id to it and requests this with a doc.getElementByID. And I am compiling the HTML into a handlebars template and then I am putting it into another element to show it on the interface of the user.
- Making a router for my application.
- Getting async data from an API.
- Generate my HTML with an template engine.
- Making pagination for the retrieved data.
- Use routing for the detail pages.
- Made a sort function in my application.
- Made a search filter in my application.
- Upgraded my templating in a cleaner way.
- Do mor with the data from the API
- Made a 'games like' subject on the detail page.
The data that I will be using for my applicatipon is comming directly come out of the RAWG API. This is the largest open video games database that there is. RAWG is sharing around 350,000+ games, search, and machine learning recommendations with the world.
This API is working with pagination, this will mean that I will get only 20 results when I make a call. This also can be extended by page_size. This call will be to heavy to render and will slow down the productivity of the application by big numbers. That's why I am going to use a loadMore function.
In the Genre page I am using this API endpoint:
This will be returning the following data:
Genre page
{
"count": 0,
"next": "http://example.com",
"previous": "http://example.com",
"results": [
{
"id": 0,
"name": "string",
"slug": "string",
"games_count": 0,
"image_background": "http://example.com"
}
]
}In the Game overview page I am using this API endpoint:
This will be returning the following data:
Game overview page
{
"count": 0,
"next": "http://example.com",
"previous": "http://example.com",
"results": [
{
"id": 0,
"slug": "string",
"name": "string",
"released": "2020-02-10",
"tba": true,
"background_image": "http://example.com",
"rating": 0,
"rating_top": 0,
"ratings": { },
"ratings_count": 0,
"reviews_text_count": "string",
"added": 0,
"added_by_status": { },
"metacritic": 0,
"playtime": 0,
"suggestions_count": 0
}
]
}In the Detail page I am using this API endpoint:
This will be returning the following data of the game:
Detail page
{
"id": 0,
"slug": "string",
"name": "string",
"name_original": "string",
"description": "string",
"metacritic": 0,
"released": "2020-02-10",
"tba": true,
"updated": "2020-02-10T11:09:20Z",
"background_image": "http://example.com",
"background_image_additional": "string",
"website": "http://example.com",
"rating": 0,
"rating_top": 0,
"ratings": { },
"reactions": { },
"added": 0,
"added_by_status": { },
"playtime": 0,
"screenshots_count": 0,
"movies_count": 0,
"creators_count": 0,
"achievements_count": 0,
"parent_achievements_count": "string",
"reddit_url": "string",
"reddit_name": "string",
"reddit_description": "string",
"reddit_logo": "http://example.com",
"reddit_count": 0,
"twitch_count": "string",
"youtube_count": "string",
"reviews_text_count": "string",
"ratings_count": 0,
"suggestions_count": 0,
"alternative_names": [
"string"
],
"metacritic_url": "string",
"parents_count": 0,
"additions_count": 0,
"game_series_count": 0
}- Mozilla Developer Network - I mostly used this site to obtain my sources
- API Docs - Instructions on how to use this API.
- Handlebars.js - Everything I needed to know about handlebars.
- Routie.js - Everything I needed to know about Routie
- Sorting A - Z - Sorting an object in an array on alphabetical A - Z and Z - A.
- Sorting eventlistener - How I got my value into a eventlistener.
- .map, .filter, .reduce - Explained so I could understand.
More information over License