Wet Bat Dashboard

• Wet Bat Dashboard
  • About the project
  • Back-end
    • Demo
    • Data modeling
    • Architecture
    • API Routes
    • Running the project
  • Front-end
    • Demo
    • Architecture & structure
    • Running the project

About the project

This is a prototype of a dashboard application for Wet Bat Travel.
The repository contains the folders /backend and /frontend for the related layers described below.

Back-end

The back-end app is a REST API responsible for processing the data stored in a relational database and providing some routes to the client. It was built with:

• Node.js
• TypeScript
• Express.js
• Prisma (ORM)
• Postgresql (Database)

Demo

Both API and database were deployed on Railway, and can be accessed at:
https://wet-bat-production.up.railway.app/

Data modeling

• Quote: model representing the main feature, containing all the relevant information for the prototype.
• Transportation: model representing the transports available in a travel.

Architecture

With the principle of separation of concern in mind, it was used a simplified layered architecture, where the app is divided into two main layers:

• Controller: contains all the logic for handling the HTTP requests and responses on API routes.
• Service/Model: this single layer has the business logic and is responsible for integrating the routes with the data source.

API Routes

1. Show all existing quotes
   Endpoint: GET /quotes

• 200 OK

{
   "quotes":[
      {
         "id":1,
         "name":"John Doe",
         "departureLocation":"Rio de Janeiro",
         "destinationLocation":"London",
         "departureDate":"2023-01-10T08:40:00.000Z",
         "returnDate":"2023-01-30T13:30:00.000Z",
         "price":876
      },
      {
         "id":2,
         "name":"Mary Jane",
         "departureLocation":"Rome",
         "destinationLocation":"Tokyo",
         "departureDate":"2023-03-12T14:30:00.000Z",
         "returnDate":"2023-03-20T04:00:00.000Z",
         "price":1495
      },

2. Show details about a specific quote
   Endpoint: GET /quotes/:id

• 200 OK

{
  "quote": {
    "id": 3,
    "name": "Ted Mosby",
    "departureLocation": "New York",
    "destinationLocation": "Paris",
    "departureDate": "2022-12-01T05:00:00.000Z",
    "returnDate": "2022-12-30T18:00:00.000Z",
    "travelers": 4,
    "transportation": {
      "name": "Bicycle"
    },
    "contact": "ted@gmail.com",
    "price": 1250
  }
}

• 404 NOT FOUND

{
  "error": "Quote with given id not found"
}

Running the project

Inside the project directory, follow the steps below.

1. Install node version (16.14.2) with nvm

nvm use

2. Install NPM dependencies

cd backend
npm install

3. Create .env file

cp .env-example .env

Then, fill in the environment variables with your database credentials.

4. Create database schema

npm run migrate:dev

5. Seed database with initial data

npm run seed-db

6. Run the project

npm run dev

The API will run on http://localhost:PORT.
Where PORT is the specified value on .env file or 3000 by default.

Front-end

The front-end app consists of a Single-Page Application (SPA) that consumes the API to provide a UI for visualizing the quotes on a dashboard. It was built with:

• React.js
• TypeScript
• Vite
• Styled Components

Demo

The app was deployed on Vercel, and can be accessed at:
https://wet-bat.vercel.app

Architecture & structure

On the client side, the app was also structured in such a way that each layer handles a separate concern.

• /infra/http: contains the logic for communication with the server, fetching and handling the HTTP requests and responses.
• /hooks: the two existing hooks (useQuotes and useQuote) connect with http to keep the remote state and provide them to the components.
• /pages: container components representing a page, where the components are joined together to mount the UI.
• /components: stateful and stateless components which can be reusable/composable.

Running the project

Inside the project directory, follow the steps below.
Ensure you have the right node version installed (described here).

1. Install NPM dependencies

cd frontend
npm install

2. Set-up variables

Create .env file

cp .env-example .env

Set the URL where the API is running

VITE_API_URL=http://localhost:3000

3. Run the project

npm run dev

The project will run on http://localhost:5173.