Skip to content

Frontend

This page dicusses how to contribute on the frontend component of Docuisine. We write using JavaScript with the ReactJS framework due to its mature ecosystem and is familiar to many developers.

The frontend is written in JavaScript (TypeScript) using ReactJS. We use shadcn for the UI components and TailwindCSS for CSS. We use Node.js for running JavaScript and Vite for project bootstrapping, building and running a development server.

Getting Started

Requirements

Installing git and npm are essential requirements to work with this project.

The project is in this repository.

  1. Clone that repo using your favorite terminal 

    git clone https://github.com/docuisine/docuisine-react

  2. Enter the project directory and open it using your IDE or simply use a text editor. 

    cd docuisine-react
code .                  # Example: Using Visual Studio Code

  3. Install dependencies with npm 

    npm i

  4. Setup environment variables 

    VITE_BACKEND_URL=http://localhost:7000
VITE_IMAGE_HOST=http://localhost:9000
VITE_APP_VERSION=dev

VITE_BACKEND_URL - This is where we access the backend. VITE_IMAGE_HOST - This the S3 bucket and images are stored. VITE_APP_VERSION - Optional, but is used to display the version hash on production, we do not set this manually on production.

Now you are ready to write code.

Development Process

When writing code, you should run a development server, so you have direct feedback from your changes. 

npm run dev

When you run that command, it should look like this. 

❯ npm run dev

> docuisine-react@0.0.0 dev
> vite


  VITE v7.3.0  ready in 379 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

This means that you can now access the frontend on http://localhost:5173/.