bitpay-card

A MEAN full stack JavaScript + TypeScript single page app - MongoDB + Express.js + Angular 2 + Node.js

Live Demo

Hosted at https://bitpay-card.herokuapp.com/
Test user Email: a@a.aa and Password: a but try incorrect credentials too
Note: Being hosted free may cause a slow load if app needs to wake.

Prompt and Goal of project

Recreate interactive dashboard of transactions using Angular 2 - based off screenshot:

Feature list

Homepage/Login:

• User login form using ngForm and custom validators to check for valid email
• CSS Animation on incorrect login credentials returned from node.js backend
• Protected Dashboard route using CanActivate login guard Injectable
• Only display "Logout" in navbar if logged in using *ngIf

Activity:

• Loads mock user activity from node.js backend
• Transaction loading animation using Web Animations API
• Iterate transactions list using *ngFor
• Search transactions by note, description, or amount by subscribing to a service
• Add/Edit user notes about the transaction
• Print transactions only removing the side bar using @media print
• Format currency and date/time using Custom Pipes

Other:

• Add Funds button modal that generates QR code from string
• Open in wallet button uses bitcoin URI string to open a wallet application with the address
• Validate Password and PIN changes using closures

Local Build

git clone https://github.com/valmassoi/bitpay-card bitpay-card
cd bitpay-card && mkdir data

# Install dependencies
npm install

# Create .env
echo "SECRET_KEY = \"superdupersecretkeythatnoonecanknow\"" >> .env

# Set to dev environment
In ./index.html uncomment `Dev scripts`
  comment out `Production scripts`

# Run and watch for changes in .ts and server files
mongod --port 27018 --dbpath=./data --smallfiles
nvm use 6 # if using lower version of node.js
npm run nodemon

# Applciation url: http://localhost:8081

Caveats

The focus of this project is on Angular 2 and not backend, so there are security vulnerabilities (missing jwt)
//See comments in code for more.

TODO

• Improve Mobile
• Filter Dropdown
• Add/edit notes
• Add funds button modal
• Other dashboard pages
• User database/auth(jwt)
• Save notes on backend
• Transaction pagination
• Transaction search