Bellow you will find list of many task which we are going to handle in our application. Because workshop is quite short we won't be able to implement all of them, but of course if you finish your task before others don't be afraid to take next one.
download repo and run npm install
when you are ready run website using npm start
During the workshop we are going to use http://api.nbp.pl/
.
Because we are going to send there many similar requests we want to prevent sending the same request over and over and be blocked by NBP. For security reasons we will use our proxy.
Instead of using https://api.nbp.pl/api/
url for request please send them to http:localhost:3000/api
/.
For example https://api.nbp.pl/api/exchangerates/tables/A/?format=json
-> http:localhost:3000
- page currently doesn't load any data, use NBP api and display current price of all currencies which NBP has
- Create function fetching currencies rate for specific day about, unfortunately nbp api doesn't have data for every date, in this situation instead of throw error try to fetch data from previous day.
- Conect created function from second point to filter visible on site
- During our development we need to refresh our site many times, unfortunately we always come back to first page. Try to keep information which website was visited recently, all changes should be done inside navigation.js.
- Currently when we load website we don't have yet data from npb api. Find inside the code #loader div and remove class hide. Later add logic to show the website when data from NBP will be already loaded.
- Add extend fetching currencies functionality with memorization mechanism to avoid fetching the same data over and over
- For provided input return historic comparison of investment value in different currency in specific months. To be able make calculation fetch all necessary historic data reusing function from third point.
- If user chose
Show path to become rich
checkbox instead of showing him historic data try to prepare for him information what kind of investment could bring him the best return. Suppose that after every month he exchange his bought currency to different one and later with "luck" buy currencies which grows the fastest.
- Array sorter is task not connected strictly with our application, but good example of explainig how workers work,
try connect to our api and fetch big array. Size can be defined on your own. http://localhost:3000/api/array?size=100000 query param
size
define size of array. Try to sort them on frontend side first without worker and how website will behave, later use worker for it.
- Implement
My savings
functionality, after fill the form add record to our table and update final score. Try to split it for two functions. One responsible to return object needed to rendering and second responsible for just rendering table. - Update select with possible currencies based on currencies available inside NBP api.
- Try to save provided data by user to local storage
- Add functionality to recreate wallet saving list with data stored in local storage
- Try to use service worker to cache fetched files.
- Add service worker functionality to automatically update itself
- Implement cache first with network fallback strategy for service worker.
- Try to store currencies data inside indexDB instead cache mechanism.