Table of content

Demo
Description
Concept
Installation
Conventions
Usage & Features
External Data
Diagrams
Changelog
Sources

DEMO 🌍

Visit the live version of this prototype on Kitsu WAFS.
JSDocs documentation

DESCRIPTION

Kitsu WAFS, is a web app made from scratch with little to no help from external frameworks or libraries to render data from the Kitsu API. With this I have created a tool where the user can see the series that will be released this current season. Does a show look interesting? Click on it to find more about that show.

Web-App-From-Scratch is a course from the minor Web Development And Design where we build a web app with external data but without any frameworks or unnecessary libraries.

CONCEPT

The new concept of this application would be displaying the newest releases of anime. The user can find more information about a particular anime by going to the details of said anime.

My previous concept was to visualize the crewmates of SpaceX and which endeavours they went through. This sadly became quite complex as there werent many crewmates and not all crewmate information was complete to show a detail page.

Written in vanilla CSS HTML, and JS.

INSTALLATION

Prerequisites

Before you continue with installing this project on your machine make sure your machine has the following;

Installation

Navigate to a folder where you want to install this application and run the following BASH / ZSH command

git clone https://github.com/dewarian/web-app-from-scratch-2021.git

USAGE && FEATURES

Run the project with the extension live-server or a similar extension if you don't use Visual Studio Code.

CONVENTIONS

Code conventions

To write clean code this project adheres to specific code conventions written by standardjs with ESlint and Prettier. Some of the most notable conventions are;

Ommitting semicolons and placing them on places that are confusing. Might move to another.

Other prettier tasks that are enforced whenever saved:

tabwidth: 2 spaces
useTabs: Absolutely not.
ES6 Arrows: always use parentheses.
BracketSpacing: Spaces between.
SingleQuote: Enforce, no double quotes.
Trailing comma: none.

Git conventions

To enforce structure throughout the whole project I will also implement a structure within the git commits itself. this will be done by the principle of gitmojis.

Starts with emoji, max 50 - 72 characters (excl. char for emoji).
When solving an issue, issue id by number is appended to the title. If multiple issues then in the body with how.
Empty line before the body.
Body when needed contains information what has been done, or why it doesn't do something.

The idea behind gitmojis is that a commit message contains an emoji to indicate what has happened in a particular commit.

see the following example: I have updated the JSDocs and want to commit this to the repo, my commit message contains the following.

📝 Update JSDocs #111
<!-- Empty Line -->
<!-- Git Commit Message Body -->

the 📝 emoji has the description of Add or update documentation which highlights the commit does something with documentation.

I was dabbling between bracketed notation or gitmoji, but decided to go with gitmoji as this project isn't as big that it needs a bracket notation.

EXTERNAL DATA

Kitsu is a modern anime discovery platform that helps you track the anime you're watching, discovering and socializing with other fans. This project predominantly focusses on the discovering part.

Data is retrieved from the Kitsu API Which uses the JSON:API specification. JSON:API is a specification for how a client should request resources be fetched or modified, and how a server should respond to the requests.

The client sends a GET request to the API and retrieves an array of objects.

GET https://kitsu.io/api/edge/anime

Response GET request


{data: Array(20), meta: {…}, links: {…}}
  data: Array(20)
  0:
  attributes:
  abbreviatedTitles: []
  ageRating: "G"
  ageRatingGuide: null
  averageRating: null
  canonicalTitle: "Shikizakura"
  coverImage: {tiny: "https://media.kitsu.io/anime/cover_images/42330/tiny.jpg?1597702706", small: "https://media.kitsu.io/anime/cover_images/42330/small.jpg?1597702706", large: "https://media.kitsu.io/anime/cover_images/42330/large.jpg?1597702706", original: "https://media.kitsu.io/anime/cover_images/42330/original.jpg?1597702706", meta: {…}}
  coverImageTopOffset: 0
  createdAt: "2019-05-06T05:39:34.845Z"
  description: ""
  endDate: null
  episodeCount: 12
  episodeLength: null
  favoritesCount: 0
  nextRelease: null
  nsfw: false
  popularityRank: 4384
  posterImage: {tiny: "https://media.kitsu.io/anime/poster_images/42330/tiny.jpg?1597697091", small: "https://media.kitsu.io/anime/poster_images/42330/small.jpg?1597697091", medium: "https://media.kitsu.io/anime/poster_images/42330/medium.jpg?1597697091", large: "https://media.kitsu.io/anime/poster_images/42330/large.jpg?1597697091", original: "https://media.kitsu.io/anime/poster_images/42330/original.jpg?1597697091", …}
  ratingFrequencies: {8: "2", 9: "0", 10: "0", 12: "0", 15: "0", 16: "0", 20: "4"}
  ratingRank: null
  showType: "TV"
  slug: "shikizakura"
  startDate: "2021-12-31"
  status: "unreleased"
  subtype: "TV"
  synopsis: ""
  tba: "2021"
  titles: {en_jp: "Shikizakura", ja_jp: "シキザクラ"}
  totalLength: 0
  updatedAt: "2021-02-15T06:00:07.244Z"
  userCount: 1239
  youtubeVideoId: null
  __proto__: Object
  id: "42330"
  links:
  self: "https://kitsu.io/api/edge/anime/42330"
  __proto__: Object
  relationships:
  animeCharacters: {links: {…}}
  animeProductions: {links: {…}}
  animeStaff: {links: {…}}
  castings: {links: {…}}
  categories: {links: {…}}
  characters: {links: {…}}
  episodes: {links: {…}}
  genres: {links: {…}}
  installments: {links: {…}}
  mappings: {links: {…}}
  mediaRelationships: {links: {…}}
  productions: {links: {…}}
  quotes: {links: {…}}
  reviews: {links: {…}}
  staff: {links: {…}}
  streamingLinks: {links: {…}}
  __proto__: Object
  type: "anime"
  __proto__: Object
  1: {id: "43915", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  2: {id: "43750", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  3: {id: "43991", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  4: {id: "43992", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  5: {id: "43905", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  6: {id: "43862", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  7: {id: "43047", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  8: {id: "43683", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  9: {id: "44009", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  10: {id: "43097", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  11: {id: "43859", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  12: {id: "43833", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  13: {id: "43244", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  14: {id: "43825", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  15: {id: "43897", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  16: {id: "42898", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  17: {id: "43829", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  18: {id: "43716", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  19: {id: "43807", type: "anime", links: {…}, attributes: {…}, relationships: {…}}
  length: 20
  __proto__: Array(0)
  links:
  first: "https://kitsu.io/api/edge/anime?filter%5BseasonYear%5D=2021&page%5Blimit%5D=20&page%5Boffset%5D=0"
  last: "https://kitsu.io/api/edge/anime?filter%5BseasonYear%5D=2021&page%5Blimit%5D=20&page%5Boffset%5D=108"
  next: "https://kitsu.io/api/edge/anime?filter%5BseasonYear%5D=2021&page%5Blimit%5D=20&page%5Boffset%5D=20"
  __proto__: Object
  meta:
  count: 128
  __proto__: Object
__proto__: Object

EXTERNAL CODE

There is one piece of code that hasn't been created by me. It is Routie.

Routie is a javascript hash routing library. Designed to be small light-weight and able to handle all simplistic routing needs. To be able to use this one needs to place it in your project, in this project's case, in the index.html.

BREAKDOWN APPLICATION

Actor Diagram

Interaction Diagram

CHANGELOG

This part of the README is everchanging.

CHANGES

03-03-2021

Update readme
Refactor function names to reflect diagram

23-02-2021

Modularize data retrieval link
Update diagrams

15-02-2021

Update readme to current concept
Solve issues

12-02-2021

Switch concept
- Implement routing
- Implement detail page
Solve issues

09-02-2021

Introducing ESlint and Prettier to this project

08-02-2021

05-02-2021

Render Data in HTML.
- Rendering should be done in the index.html.
Conduct a code review.

03-02-2021

Add new tasks in backlog.
Fix checkbox in changelog.
Add external data section incl. response.
Start markdown.

BACKLOG

Must

Update content Detail page.
More interaction, e.g. filtering, sorting, searching.
Update Diagrams to reflect change of API.

Could

Pagination of anime.
- Back and Next button to navigate pages.
Implement localStorage.
Implement user interaction.
Modularize HTML generation.
Add interaction to the overview page.
Implement github action to build docs for github pages instead of NPM run generate-docs
- see jsdoc-action
~~Fetch Data from spaceX API.~~

SOURCES

I am not affiliated, associated, authorized, endorsed by, or in any way officially connected with Kitsu.io, or any of its subsidiaries or its affiliates. The names Kitsu as well as related names, marks, emblems and images are registered trademarks of their respective owners.

bommezijn/web-app-from-scratch-2021