A React application features athletic training schedule management, motion data recording, and visualization.

Application Preview

Application Detail

Front-End React
Back-End NodeJS Express
Database MSSQL
Language Javascript
Library MUI FullCalendar

Progress Log

Front End
  1. Router Setup Between Application and Components
  2. Components Composition

    … Navigation Bar

    … Interactive Data Grid

    … Interactive Event Selection

    … Interactive Calendar Integration

  3. Dark/Light Theme Mode Switch
Back End
  1. MSSQL Networking Configration
  2. MSSQL Database Initialization
  3. Node Express Framework Setup (server.js)
  4. Node-MSSQL Configuration (dbConfig.js)
  5. Node-MSSQL Operations

    … Data-Fetching

    … Data-Editing

    … Data-Removing

    … Data-Conditional-Check

Front - Back Connection
  1. Parallelize React and Node Server Scripts Compilation
  2. OnClick() Logic Compostion
  3. Back-end Operation Asynchronization in React

    … Data-Fetching

    … Data-Editing

    … Data-Removing

    … Data-Conditional-Check