Sleepy Dragon

Description

Sleepy Dragon is a mobile single page app that fetches random stories from an API that can be read.

This project was part of the Minor Web Design & Development at the HvA. During three weeks of the course Web App From Scratch, I have designed and developed a Single Page App(SPA) based on a self-chosen user story. This SPA is based on data fetched from an API. The project is written in vanilla HTML, CSS and JS.

User story

The user story for this project is as follows:

Primary functions

There are a few primary functions in this app. The user can:

• Read a random story
• Like/Save a story
• Read a story that has been saved

Flowchart

In order to get the structure and functionality of the app properly set up, I created a flowchart that show the different states and functions that can be used.

Wireframes and design

I made several wireframes for the app. I wanted to make sure that the app was easy to use and that the user could easily find the functions they wanted to use.

I wanted the app to look friendly and child focussed. Even though the app wont specifically be used by children(But their parents), I wanted to make sure that the app would be appealing to them.

I made several versions of the app design. It didn't take long for me to figure out which colors I wanted to use but the actual layout and detail of the design took me a bit longer. After showing the iterations to my peers I got some good feedback and was able to improve the design.

Mascot

The primary audience of this app is children. To make the app more fun and appealing to children, I have created a mascot for the app. The mascot is a dragon that is called Sleepy and is used in the logo and in the app itself.

The dragon is designed in Photoshop and animated in Rive

Web components

I discovered that there is a native way to use components in Javascript instead of applying frameworks. This caught my interest and I decided to do more research on it. As it turned out, generally people use webcomponents and then apply bare text as html which sits inside the javascript file like so:

const template = document.createElement('template');
template.innerHTML = `
    <style>
        h1 {
        color: red;
        }
    </style>
    <h1>Hello World</h1>
`;

This however, defeated the purpose of using web components for me. I wanted to be able to use seperate HTML and CSS files for my components. I found a way to do this by using the fetch() function to get the HTML and CSS files and then applying them to the component. The code I used to do this is a little complex but comes down this: I create a variable that has the list of html templates that I want to insert. I run a function that fetches these files and create new components for each of them using names that are stated within the html files themselves. I can then append these to the DOM by simply using document.createElement("template-name"). In case there is content that needs to be inserted into the component, I can call these using element.shadowRoot.querySelector( '[slot="slot-name"]'); and then insert the content using element.textContent.

I'm quite happy with what I learned about web components and how I applied them to this project. In practice I probably won't be using them as much as I did in this project, but it was a fun learning experience and gave me more understanding about how frameworks like React and Vue work.

Final version

I'm quite happy with the result of this project. Being able to create a web app from scratch and figure out the basics of Javascript frameworks helped me get a better view on how web development works. I'm also happy with the design of the app. I think it's a good balance between playful and easy to handle. There are some major things I learned which include the use of web components, templates, hashes, routes and modules. I also got some more practice in implementing Rive animations.

Software

• Photoshop
• Rive
• Visual Studio Code

Github

This project has been documented on Github.