Aaron Lu - 101278524
Deployed Website: https://aalu1418.github.io/fullstackI_project/
Github Repo: https://github.com/aalu1418/fullstackI_projects
General functions
- plot historical data of cryptocurrency price - updates every minute
- ability to toggle view of various cryptocurrency and base currencies
- ticker that displays the current price and change over a period of time that can be toggled
- Metamask integration (if present) to get user's ether balance
- Otherwise allows for use input of public key to get ether balance on ropsten
- Help buttons show text for assistance if opened
- Mobile friendly layout
- Dark mode capability
js libraries
- jquery: used for ajax calls and button listeners
- chart.js: used for plotting cryptocurrency price data
- moment: used for getting date from certain intervals for price change
- anime.js: animating bouncing icons in the header
CSS libraries
- Skeleton CSS: used for basic framework - simple and clean
- Material UI Icons: material design icons used for ticker and navigation
Ajax calls to API
- Coin Gecko API: used for cryptocurrency price (current and historical)
- Etherscan API: used to get users current ether balance
Metamask integration
- access the ethereum & web3 objects using the injected js from Metamask
Error handling
- no internet handling - turns off plot
- no Metamask handling - allows for manual input
git/Github usage
- branches used for major features (pull request, merged, deleted)
- branches are visible in pull-requests -> closed branches
FULL STACK DEVELOPER – 1 – FINAL PROJECT DUE DATE – September 29, 2019
Your final project – is to create a single page web application using HTML, CSS, and Javascript. Here are the required technical parameters for your page:
- Use of Javascript listeners and handlers to enable interactivity of some sort, producing some desired effect.
- Use of Javascript libraries (one or many) that aid in the coding of your app.
- Use of a CSS library/framework that aids in the styling of your app.
- Use of Ajax calls to an API, where the returned data may be displayed in your app.
- Use of Git and Github to track code changes and upload your project. Include a README.md that describes your project and how to load it (if any steps required).
Projects will be evaluated based on the following aspects:
- HTML – proper use of HTML and Valid tags [10%]
- CSS/UX/Design – proper use of CSS or a CSS framework to achieve a user friendly design and presentation of the apps functionality [includes the overall look of the project, useability & appropriate information so the user can understand the functionality][20%]
- Javascript – using appropriate JS and adhering to good programming principles – specifically, well structured and easily readable/understandable code – and adherence to core programing principles such as DRY (do not repeat yourself). [30%]
- Successful communication with the API and display of data in the html app. [20%]
- Git – appropriate use of git for developing your projects features [Note: If you’re working with a partner, you’ll need to show git commits from each partner – we will want to see that each partner has coded at least 1 feature, both partners will lose 15% if the git commits don’t demonstrate this. For individuals working alone, your git commit history should demonstrate the use of feature branches.][15%]
- Bonus 5% - connect to a smart contract or user’s balance metaMask balance [5%]
- Skeleton CSS
- Material Design Icons
- Icon Pulsing
- Coin Gecko - crypto prices api
- Metamask Integration
- Web3 Introduction
- Run Local Host - Simple
- Single page website
- Realtime plotting of price of various cryptocurrencies (js librarie - api calls)
- Ability to toggle on/off (buttons - js listeners)
- Ability to change currency: USD/CAD/Euro (buttons - js listeners - api calls)
- Show bar w/ current metamask balance in multiple currencies (web3)
- Axios for ajax calls (using jquery instead)
- timeout in case of no internet connection
- help icon - pop-up w/ data
- interactively change time range for ticker
- favicon
- error w/ Chart.js but doesn't stop page from functioning
- comment code & write up documentation in readme
- fun w/ animations (https://animejs.com/)
- dark-mode (i had more time!)