Vision

A cryptocurrency dashboard

Vision is a cryptocurrency dashboard built with React and hosted on AWS using S3 and CloudFront. The backend consists of API Gateway, Amazon Cognito, AWS Lambda, and DynamoDB.

This project's aim is to let users view live and historical prices of cryptocurrencies and trending news about crypto and blockchain technologies. Users can also create an account to like and save their favorite cryptocurrencies and news articles which they can access from anywhere.

Vision_desktop.mp4

Vision_mobile.mp4

Technologies used

• Next.js as the React framework
• Victory for React chart components
• Swiper.js for hardware accelerated touch transitions & 3D effects on mobile
• React-query for server state management
• AWS Amplify for interfacing with backend cloud infrastructure

Navigating this project

• Stateful business logic

• Components and co-located styles (with CSS Modules)

• Example API data transformation

• API request handler AWS Lambda function

• Cypress E2E test sample

My workflow

• I created issues and pull requests for every code change to try and simulate a professional Git workflow

• Each feature branch merged into the production-ready main branch triggered an AWS CodeBuild CI/CD job to build and push the production build to S3 and invalidate the CloudFront cache

• Most of the backend infrastructure is declaratively provisioned using CloudFormation templates which were generated by AWS Amplify's CLI tool. The infrastructure-as-code templates were also checked into version control and deployed in the CI/CD pipeline

• I setup and wrote test samples using Cypress for E2E tests as well as Testing Library/Jest for integration tests. I also used Mock Service Worker to intercept and return mocked responses to network calls while developing

Features

• Complete user auth flow:

  • Create account
  • Sign in to account
  • Remember device
  • Forgot password reset request to email
  • Forgot password confirmation code submit
  • Delete account and user data

• Implements CRUD functionality with authenticated Amazon API Gateway REST API calls to AWS Lambda to spin up an ephemeral function container to handle the request. AWS Lambda makes calls to the DynamoDB NoSQL database and formats the data to send back to the client thru API Gateway. Amazon Cognito is used as the auth and user management service. This highly available and redundant infrastructure ensure users can access their data anywhere, anytime. All of the backend AWS services used are serverless which makes for an on-demand, pay-per-request billing model.

  • Like a news article or cryptocurrency to save it to the database and unlike it to delete
  • Syncs the current state of the profile (e.g which tab you were on last) on every state change to the database for the client to load saved state on subsequent visits

• Uses WebSocket feeds for the real-time crypto ticker price updates from the Coinbase Pro API - Example

Backend Architecture

Live link

Available Scripts

Install all dependencies:

npm i

Start development server on port 3000

npm run dev

Generate a production build:

npm run build