Simulation Frontend

simulation-frontend is a modern React-based frontend application for simulation purposes. It leverages TypeScript, Vite for development, and TailwindCSS for styling.

Features

  • React: Utilizes React 18 for building interactive user interfaces.
  • TypeScript: Provides type safety and improves code quality.
  • Vite: Fast build tool and development server.
  • TailwindCSS: Utility-first CSS framework for rapid UI development.
  • React Router: Manages routing within the application.
  • React Spinners: Provides loading indicators.
  • React Webcam: Integrates webcam functionality.

Installation

  1. Clone the repository:

    git clone <repository-url>
  2. Navigate to the project directory:

    cd simulation-frontend
  3. Install the dependencies:

    npm install

Configuration

Make sure you have the following environment variables configured if needed:

  • Create a .env file in the root directory with your environment-specific variables.

Usage

Development Mode:

npm run dev

This starts the Vite development server with hot module replacement.

Build for Production:

npm run build

This command compiles TypeScript and builds the application for production.

Linting:

npm run lint

This runs ESLint to check your code for linting errors.

Preview Build:

npm run preview

This previews the production build locally.

Scripts

  • npm run dev: Starts the Vite development server.
  • npm run build: Compiles TypeScript and builds the application for production.
  • npm run lint: Lints the codebase using ESLint.
  • npm run preview: Previews the production build.

Dependencies

  • axios: Promise-based HTTP client for API requests.
  • react: Library for building user interfaces.
  • react-dom: Entry point for the DOM renderer.
  • react-router-dom: Declarative routing for React applications.
  • react-spinners: Collection of loading spinners for React.
  • react-webcam: React component for accessing the webcam.

Dev Dependencies

  • @types/react: TypeScript definitions for React.
  • @types/react-dom: TypeScript definitions for ReactDOM.
  • @typescript-eslint/eslint-plugin: ESLint plugin for TypeScript support.
  • @typescript-eslint/parser: TypeScript parser for ESLint.
  • @vitejs/plugin-react-swc: Vite plugin for React with SWC support.
  • autoprefixer: PostCSS plugin to parse CSS and add vendor prefixes.
  • eslint: Linter for identifying and reporting on patterns in JavaScript.
  • eslint-plugin-react-hooks: ESLint plugin for React Hooks rules.
  • eslint-plugin-react-refresh: ESLint plugin for React Fast Refresh support.
  • postcss: CSS tool for transforming CSS with JavaScript plugins.
  • tailwindcss: Utility-first CSS framework.
  • typescript: TypeScript language support.
  • vite: Next-generation build tool for modern web projects.

License

This project is private and not publicly licensed. If applicable, please refer to the internal documentation for licensing information.

Author

Santiago Andrade Mesa

Feel free to contribute to this project or contact me for more information!