Vite Crypto Ticker App with SSE

This is a basic crypto asset ticker application which demonstrates SSE (Server-Sent-Events) for unidirectional communication.

It consists of a backend server and a frontend application.

Backend server was implemented using ExpressJs to serve the compiled frontend app as static content. A simple SSE (Server-Sent-Events) implementation was used to send realtime updates to the frontend. Data is fetched from the CoinCap API using a single WebSocket connection.

Frontend application is built with Vite + Vue 3 + Bootstrap. Client is automatically fetching the stream from the server using standart EventSource API.

View Demo | Report Issue | Request Feature | @webceyhan

Requirements

You need to install the Node.js and npm package manager first.

Recommended IDE: VSCode + Volar

Installation

Clone the repository.

git clone https://github.com/webceyhan/vite-crypto-ticker-app.git

Get inside the cloned project folder.
```
cd vite-crypto-ticker-app
```
Install NPM packages.
```
npm install
```

Usage

You can use following commands to do various task with the project.

npm start               # run application
npm run dev             # start watching backend & frontend concurrently
npm run dev:backend     # start nodemon to watch backend app
npm run dev:frontend    # start vite to watch frontend app
npm run build           # build for production
npm run preview         # preview built app

Take a look at the other scripts in package.json

Development

You have to run both backend server and frontend development server concurrently to be able to develop application properly.

npm run dev

Building

Build the frontend application for production.

npm run build

To preview, you still have to run the backend server which will serve the app and provide socket connectivity in order to make it work properly.

npm run preview

Deployment (Heroku)

A GitHub Action will automatically deploy the project to Heroku on every push.

See the details in .github/workflows/heroku.yml

Create an Heroku account.
Install the heroku-cli as shown in the guide.
Create a new Heroku app inside the project folder to bind it.
```
heroku create
```
This will create a new application on Heroku server and bind it to your project by adding a remote heroku upstream to your git repository.
Set the following secrets on your Github repository:
```
HEROKU_API_KEY
HEROKU_APP_NAME
HEROKU_EMAIL
```

webceyhan/vite-crypto-ticker-app