To practice what we have learned in the module 'Web Technologien 3' we completed a web application project. The goal was to create an issue tracker with:
- Responsiveness in look and feel
- Persistent Issues (localStorage)
- Load from and save to a server (REST)
This is a mockup to show the visible feature set of the issue tracker. It is not meant to be a screen design, we were free to design the application. For example, we were free to display the priorities of the issues in a way that we would think is good user interaction.
HTML / CSS Prototype with Web Server
When starting with a new front end application, it is sensible to create the markup first and style it before you start adding any client logic.
So we looked at the mockup and added our ideas of how the issue tracker should be structured. We wrote the markup in HTML and styled it using a CSS style-sheet in a separate file. Since we wanted to save time and did not want to come up with our responsive design we used Bootstrap. No Functional logic were implemented in this milestone.
To serve our static mockup we used the web framework Express to create simple web server.
const path = require('path'), express = require('express'), app = express(), port = process.env.PORT app.use('/', express.static(path.join(__dirname, 'public'))) app.listen(port, () => console.log('listening on port ' + port))
To make the issue tracker a functional application, we needed to add the missing logic. To convey what we had to do, this milestone was broken down into specific use cases with user stories.
Use Case: Adding and mutating Issues within the project
- As a user, when I have selected a priority, given a date, entered an Issue title and have clicked "Create Issue", I want the new issue to appear in the issue list.
- As a user, after I have created a new Issue, I want the input fields to be cleared.
- As a user, when clicking the check-box of an Issue, I want the "completed" state of the Issue to be toggled.
- As a user, when clicking the "trash" icon, I want the Issue to be deleted.
Use Case: Persisting data to the Browser
- As a user, I want the project's data to be saved to localStorage.
- As a user, when I refresh the browser (or close and re-open the tab), I want all previously entered data (that is projects and issues) to be loaded from localStorage for instant feedback.
- As a developer, when creating a new Issue, I want a new UUID to be created and saved as
To implement this front-end as a reactive Single Page Application we used RiotJS.
- Custom tags
- DOM Expression binding
- Dynamic updates
- Passing Options
- Mounting tags
Persisting data to a server
Many web applications offer persistence to a back end. The issue tracker is no exception. We used a modern approach and persist the application's data in a RESTful manner.
Issues User Stories
- As a user, when creating an Issue, I want a new Issue to be created through the RESTful API in the scope of the current Project.
- As a developer, after having created an Issue through the RESTful API, I want to save the id in localStorage to the existing entry with the UUID so that in the future I can reference the correct Issue.
- As a user, when editing or deleting an existing Issue, I want this mutation to be reflected through the RESTful API in the scope of the current Project.
- As a user, when clicking the check-box of an Issue, I want the "completed" state of the Issue to be toggled through the RESTful API.
- As a user, when clicking the "trash" icon, I want the Issue to be deleted through the RESTful API.
- As a user, when reloading the page, I want the Project id to be loaded from localStorage, so that a RESTful request can be made to load the Issues from the back end.
Now that our front end application is feature-complete. It was time to put it on the Web, so everyone can start using it!
We deployed the issue tracker on Heroku. Check it out here.