Historical commodity prices visualized using Chart.js; submitted as part of Cloudflare's Developer challenge; Cloudflare Workers code is here: https://github.com/jahabeebs/alphavantageworker
Client-side code build process:
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn dev
# build for production and launch server
$ yarn build
$ yarn start
# generate static project
$ yarn generate
To implement the back-end of the project you must register for a free CommoPrices API account to be able to access their free data endpoint. Then, create a Workers KV namespace called PRICES_DB. Set up a Cron job trigger on Cloudflare to ensure new data is pulled into the KV namespace regularly (I recommend a daily trigger). Bind the Cloudflare Worker to the Workers KV using these instructions.
Visit https://cmarketprice.com for the production website
Client-side code (HTML, Tailwind CSS, JS):
Nuxt.js - Front-end framework
Tailwind CSS - CSS framework
Vue-chartjs - Vue/Nuxt adaptation of Chart.js
nuxtjs/robots - Middleware to generate a robots.txt for the website
Cloudflare Pages - Configured to automatically deploy this repo to production when a successful build is run and avoids CORS issues when working with Cloudflare Workers
Server-side code (Typescript):
Cloudflare Workers - Coordinates Cron job and allows front-end to fetch commodity prices from a KV namespace
Workers KV - An eventually consistent DB that stores the commodity prices data
Commoprices API - API used to get free commodity data provided by the World Bank
General Tools:
Jetbrains Webstorm - IDE
Yarn - Package Manager