fe-app-web (Frontend)

This repository contains the frontend of fe-app project, a production-grade car rental service. The project showcases modern JavaScript development practices with a focus on scalability, maintainability, and performance. It follows a loosely implemented Feature Sliced Design (FSD) architecture.

• Overview
• Tech Stack
• Code Structure
• API Integration
• [WebSocket Integration][(#websocket-integration)]
• Deployment
• Running Locally
• Roadmap
• Changelog

Overview

fe-app is a full-featured and production-ready car rental service, designed to showcase modern JavaScript development across the backend, frontend, and platform infrastructure. The project integrates the latest technologies, architectures, and best practices to deliver a scalable, maintainable, and high-performance solution.

It's not just a car rental service — it serves as a comprehensive reference for modern JavaScript development, demonstrating:

• Best practices in full-stack development
• Seamless frontend-backend integration
• Scalable and maintainable architecture patterns
• Optimized developer experience with modern tooling

Tech Stack

• Runtime: Browser
• Language: TypeScript
• Framework: Vue 3
• Routing: Vue-Router
• State Management: Pinia
• API Client: Axios
• Websocket Client: Socket.io
• Styling: Tailwind CSS
• UI Library: PrimeVue
• Maps API: OSM with Leaflet
• Form Validation: Vee-Validate with Zod
• Build Tool: Vite
• Deployment: Render

Code Structure

The frontend follows a loosely implemented Feature Sliced Design (FSD) approach:

📦 fe-app-web
 ┣ 📂 src
 ┃ ┣ 📂 app          # App's related code (styles, providers, routing, etc.)
 ┃ ┣ 📂 pages        # Route-based components
 ┃ ┣ 📂 widgets      # Self-contained chunks of functionality or UI, usually delivering an entire use case
 ┃ ┣ 📂 entities     # Domain models and API interactions
 ┃ ┣ 📂 shared       # Reusable UI components, utilities, helpers
 ┃ ┣ 📜 app.ts       # App setup
 ┃ ┣ 📜 entry.ts     # Entry point
 ┣ 📜 package.json
 ┣ 📜 tsconfig.json
 ┗ 📜 README.md

API Integration

• API client is generated via @hey-api/openapi-ts, ensuring type safety and automatic updates when backend specifications change.
• Requests are made using Axios, with interceptors for authentication and error handling.

WebSocket Integration

The frontend establishes real-time WebSocket connections with the backend using Socket.IO. These connections powers live features such as car status, booking changes or user session sync — without needing manual refreshes. This architecture allows low-latency communication between client and server, and is designed to scale using an Event-Driven Architecture (EDA) with the backend emitting events based on business logic triggers.

Deployment

The frontend is containerized and deployed via Render.

Build & Deployment Steps:

1. Build Docker Image:

   docker build -t fe-app-web .
   

2. Run Locally with Docker:

   docker run -p 3000:3000 --env-file .env fe-app-web
   

3. Deploy to Render:
   • Render automatically builds and deploys the image from the repository.
   • Uses a proxy to handle incoming requests.

Running Locally

Prerequisites:

• Node.js & pnpm

Steps:

1. Install dependencies:

   pnpm install
   

2. Set up environment variables: (create a .env file)

   API_PATH=/api
   API_PROXY=http://localhost:4000
   API_JSON=http://localhost:4000/docs/?json=1
   SOCKET_PATH=/socket
   SOCKET_PROXY=ws://localhost:4000
   

3. Build API:

   pnpm run build:api
   

4. Start the development server:

   pnpm run dev
   

fe-app-web © 2025 by Ramil Sharipov is licensed under CC BY-NC-ND 4.0.