A portfolio project that actually works
I built a simplified cryptocurrency brokerage website that is fully functional from account creation all the way to buying and selling crypto.
Technology used for this project: Vue.js & Vuetify (UI framework), Vuex (state management), Vue Router (router for Vue), Node.js & Express, Amazon Cognito & Amplify, SendGrid, Firebase Database, Netlify, Heroku
Technology used for this project: Vue.js & Vuetify (UI framework), Vuex (state management), Vue Router (router for Vue), Node.js & Express, Amazon Cognito & Amplify, SendGrid, Firebase Database, Netlify, Heroku
Structuring for optimum user experience
Routes
Individual routes were set up for each view/ page that a user may need to access again, some of which include the login, signup, buying, selling, order page (with unique ID).Components
Page Layout components wrap each page to keep layouts consistent. Order and Order form layouts wrap each state of the order (e.g. 'unpaid', 'paid', 'pending', 'invalid') to keep order and order form layouts consistent.Order flow built to protect against exploits
Live prices
Live prices are consumed by BTC Market's API and updated every 10 seconds. This means that the price on the order form is only an estimate.Locked in price
Once a user submits their order form, the final price will be calculated on the next page. Here, the final price is locked in for 60 seconds or if prices fluctuate more than 2%.Confirmed order
Once a user confirms the transaction, they will be taken to the order page where they have 5 minutes to make a payment. If they fail to confirm the transaction, they will be taken back to the order form which will be pre-filled with the previous order for their convenience.Complete authentication flow with Amazon Cognito
Application includes complete authentication flows for logging in, creating an account, resetting password, changing password as well as setting up 2 Factor Authentication (TOTP) .
2 Factor Authentication is set up with Timed One Time Password (TOTP) which includes an option to scan a QR code or entering the setup key manually. Once 2FA is set up, a user will be prompted for a 6-digit verification code on top of their usual login details.
2 Factor Authentication is set up with Timed One Time Password (TOTP) which includes an option to scan a QR code or entering the setup key manually. Once 2FA is set up, a user will be prompted for a 6-digit verification code on top of their usual login details.
Features built with the user in mind
Full featured address book
When a user creates an order, they have an option to save the address to their address book (e.g. crypto wallet address, bank account or BPAY bill details). The address book includes all common features for the user's convenience: creating, updating, deleting as well as filtering addresses.Convenient order history exports
Order history on user's dashboard includes the status of the orders as well as a link to the details of the order (or link to receipt if paid). The user can export the order history to keep for their personal records.A validation system that proves least invasive for users
I built a simple validation system that was designed for forms to be least invasive. It includes the following features:
Implementation details- Error messages are only shown on blur (when user enters and leaves input field)
- Fade in and out animation transitions are used to make the form smooth when multiple error messages are shown
- Only one error message is shown at a time for input fields with multilpe rules
- All validation rules and methods are centralised in one place such that other components can import them when required
- When used inside a component, a metadata structure is imlpemented in such a way so that all methods will be the same
- Metadata structure is flexible enough to deal with any type of nested data
- Error messages can be default or custom override
Future plans
Plans to continuously improve this project include:
- Implement more rules to protect against exploits
(e.g. users who have 10 cancelled orders within 24 hours will have their account blocked from creating new orders) - Consume prices with realtime API (socket.io)
- Include ID verification simulation
- Implement a 2nd cryptocurrency