Frontend

Table of contents

Getting started

The frontend of the Junqo-platform is a React application built with Vite.
Its main goal is to provide a user interface to interact with the backend.

Prerequisites

  • Node.js: Version 18 or higher. Install Node.js
  • npm: Version 9 or higher (comes with Node.js)

Installation

  1. Clone the repository:

     git clone https://github.com/Junqo-org/junqo-platform.git

  2. Navigate to the project directory:

     cd junqo-platform

  3. Navigate to the frontend directory:

     cd junqo_front

  4. Install dependencies:

     npm install

Configuration

The frontend uses environment variables to configure the backend API connection. Note: Vite only exposes variables prefixed with VITE_ to the client.

Local Mode (Default Development)

Do NOT create a .env file or leave VITE_API_URL empty:

# .env (or no file at all)
# VITE_API_URL=

➡️ The Vite proxy will automatically redirect to http://localhost:4200

Remote Server Mode (Dev/Staging)

Create a .env file at the root of junqo_front/ with:

# .env
VITE_API_URL=http://dev.junqo.fr:4200/api/v1

➡️ The Vite proxy will redirect to the remote server

Production Mode 

# .env.production
VITE_API_URL=https://api.junqo.fr/api/v1

WebSocket (Optional)

By default, the WebSocket URL is derived from VITE_API_URL. You can specify it manually if needed:

VITE_WS_URL=http://localhost:4200

Note: After modifying the .env file, restart the development server (Ctrl+C then npm run dev).

For more details, see ENV_CONFIG.md.

Local Development Setup

  1. Ensure the backend is running (see Backend Documentation)
  2. Run the development server:
  npm run dev
  1. Open your browser at http://localhost:3000

Running the Application

  • To run the application in development mode with hot reload:

    npm run dev

  • To run with custom host/port:

    npm run dev -- --host 0.0.0.0 --port 8080

Building for Production

  • To build the application for production:

    npm run build

  • To preview the production build locally:

    npm run preview

Development Environment Configuration

  • VS Code: Install the following extensions:
    • ESLint
    • Prettier
    • TypeScript and JavaScript Language Features
  • Browser DevTools: Install React Developer Tools extension

Hot Module Replacement (HMR)

Vite provides blazing-fast Hot Module Replacement (HMR) out of the box:

  • Automatic: Changes to your code are instantly reflected in the browser without losing component state
  • Fast Refresh: React components update without full page reload
  • No configuration needed: Just save your files and see the changes

Common Development Commands

  • Clean build artifacts:

    rm -rf dist node_modules/.vite

  • Update dependencies:

    npm update

  • Check for outdated packages:

    npm outdated

  • Run TypeScript type checking:

    npx tsc --noEmit

  • Run linter:

    npm run lint

  • Format code with Prettier:

    npm run format

  • Analyze bundle size:

    npm run build -- --analyze

Technologies

  • React
    • A JavaScript library for building user interfaces with reusable components
  • TypeScript
    • JavaScript with syntax for types, providing better developer experience and type safety
  • Vite
    • Next generation frontend tooling with blazing-fast dev server and optimized builds
  • React Router
    • Declarative routing for React applications
  • Axios
    • Promise-based HTTP client for making API requests
  • Zustand
    • Small, fast, and scalable state management solution
  • Tailwind CSS
    • Utility-first CSS framework for rapidly building custom designs
  • shadcn/ui
    • Re-usable components built with Radix UI and Tailwind CSS
  • Sonner
    • Opinionated toast component for React
  • date-fns
    • Modern JavaScript date utility library