Skip to content

webceyhan/vite-crypto-ticker-app

Repository files navigation

CodeQL

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.


Requirements

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

Recommended IDE: VSCode + Volar


Installation

  1. Clone the repository.
    git clone https://github.com/webceyhan/vite-crypto-ticker-app.git
  2. Get inside the cloned project folder.
    cd vite-crypto-ticker-app
  3. 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 (Render)

Project is linked to Render for deployment.

It will automatically deploy the project to Render on every push.


References