Sine Wave Visualizer

A real-time sine wave visualization application built with React and C++. This project demonstrates the integration of a modern React frontend with a high-performance C++ backend using REST API.

Features

• Interactive sine wave visualization
• Real-time parameter adjustment (amplitude and frequency)
• Smooth data plotting using Plotly.js
• Cross-platform C++ backend using cpprestsdk
• CORS-enabled API endpoints

Project Structure

.
├── frontend/          # React TypeScript frontend
│   ├── src/          # Source files
│   └── package.json  # Node dependencies
└── backend/          # C++ REST API backend
    └── src/         # C++ source files

Prerequisites

• Node.js (v14 or higher)
• C++ compiler with C++11 support
• cpprestsdk (Casablanca)
• CMake (v3.10 or higher)

Installation

Backend

1. Install cpprestsdk:

# Ubuntu/Debian
sudo apt-get install libcpprest-dev

# macOS
brew install cpprestsdk

2. Build the backend:

cd backend
mkdir build && cd build
cmake ..
make

Frontend

1. Install dependencies:

cd frontend
npm install

Running the Application

1. Start the backend server:

./backend/build/sine_wave_server

2. Start the frontend development server:

cd frontend
npm start

3. Open http://localhost:3000 in your browser

API Documentation

Endpoints

POST /api

Generates sine wave data points based on provided parameters.

Request body:

{
  "amplitude": number,  // Peak deviation from center
  "frequency": number   // Number of cycles per unit time
}

Response:

{
  "data": {
    "x": number[],     // Time domain values
    "y": number[]      // Amplitude values
  }
}

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.