This is a small demo of an Angular & Ionic application containing a few tasks to complete as small coding challenges. You don't need to complete all the tasks, it is completely up to you how many of them you will work on and how much time you'll spend on them.
In case you need help or have any comments feel free to reach out to us and ask
Follow the instructions in the next section to get your project set up properly. Creating a commit for each of the tasks is suggested. Get back to us once you're confident with your code and remember - it is the quality of your code and the way you approach the problems that matter the most, not whether you've completed all the tasks and how fast! 😉
You might be familiar with Angular but not Ionic - and this is completely fine. Think of Ionic as a library of UI components for now and don't get confused with other features Ionic can bring. We won't go further than importing some ready-to-use components from the Ionic library in this project.
- Make sure you have Node.js (v16+) and npm installed. If not, follow the links and find the installation instructions
- Install the Angular CLI and Ionic CLI globally by executing
npm install -g @angular/cliandnpm install -g @ionic/cliin your terminal - Clone the project (
git@github.com:<your_username>/dynaway-homework.git) and go to the project folder (cd dynaway-homework) - Install all dependencies with
npm install - Run
npm run start. Your app should be now up and running on localhost:4200!
- DO NOT publish your solutions on a public repository.
- DO NOT fork the project
-
Clone this repository to a private repository on your GitHub account.
-
Invite us to your private repository. You can add us as collaborators by sending invitations to:
-
You can do this under
(your new private repository)/settings/collaborators and teams/add people.
You've probably noticed that the app is running, yet we can't see any content 😕. It might have happened that a bug sneaked into our code. Can you find it and fix it?
The app essentially consists of two pages:
- The home page, containing a list of assets. Assets are fetched from a server using the asset service (backend communication is mocked though). Some assets might even include a preview image. If you click on an asset card, it'll take you to the detail page.
- The detail page. This is just a dummy page only made to make routing and navigation work. The page only contains a back button, taking you back to the home page.
When you complete this task, your list page should show assets like this:
Data are now correctly fetched and displayed, but what if an error happens?
Luckily we use the Ionic framework and this is a perfect chance to use one of its UI components. Just import them to the file, and they are ready to use - as easy as it seems. That way we can easily extend our app to show some kind of message when an error occurs, informing the user about what has just happened.
In this task, pick an Ionic component of your choice (e.g. alert, toast) and use it for displaying an error message if an error occurs.
We can now say that the component does all we needed from it. It fetches data and displays them properly, and if an error occurs, shows a message to the user. We could consider it done for now, and that is correct, although what if we forgot to add something? Or a simple bug appears in a few months time? We would have to recall how the component works to be sure that everything is still working the intended way. Or someone else could be assigned to fix/extend the component so he/she would have to spend some time getting familiar with your code.
Fortunately there is a way how to prevent regression errors in the future and make sure that the component works 100% correctly all the time - unit tests! 🎉 We can imagine our component as a black box with some inputs and outputs, so it is fairly simple to test it, feeding it with data and expecting the correct outputs.
Angular comes with a testing framework bundled with it called Karma. We keep our unit tests in spec files (*.spec.ts) and execute them using npm run test. So in this task, write a unit test(s) for the home component that we have been working on so far.
A few notes:
- Other components and services are already tested. Feel free to get inspired there!
- The execution and usefulness of a test is generally more important than the quality of the code (of the test)
- One way how to measure unit test quality is to measure how much % of the code is covered by it
- A simple, dummy unit test is better than no test
- The tested component typically depends on other components and services but these are not the subject of our testing - typically we mock them
Now that we successfully fetch and display data, and the component's code is covered by unit tests, you can spot that there is a delay between opening the page and rendering the list.
We would like to increase the perceived performance of the app and one of the ways how to achieve that is to use loading skeletons. Luckily, the component responsible for rendering an asset card can already do that - when no asset is given to it, it just displays a skeleton card until the real data arrive.
So if you'd like to make our home component nearly perfect, add those skeletons to the page (as seen on the screenshot) and substitute them with real data once ready.
Feel free to add other features if you think that something is missing.