Build and maintain a Vite React calculator app with a Node.js/Express backend for operations. Focus on clean, modern code and clear client-server architecture.
A full-stack calculator application using Vite + React for the frontend and Node.js + Express for the backend. The frontend sends two numbers and an operator to the backend API, which performs the calculation and returns the result.
This project consists of:
The frontend and backend communicate via HTTP requests. The frontend sends two numbers and an operator; the backend processes the operation and returns the result.
When working on this project, follow these guidelines:
```json
{
"num1": 10,
"num2": 5,
"operator": "+"
}
```
```json
{
"result": 15
}
```
**Frontend component (React):**
```jsx
const handleCalculate = async (num1, num2, operator) => {
const response = await fetch('http://localhost:3000/calculate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ num1, num2, operator })
});
const data = await response.json();
setResult(data.result);
};
```
**Backend route (Express):**
```js
app.post('/calculate', (req, res) => {
const { num1, num2, operator } = req.body;
let result;
switch (operator) {
case '+': result = num1 + num2; break;
case '-': result = num1 - num2; break;
case '*': result = num1 * num2; break;
case '/': result = num2 !== 0 ? num1 / num2 : 'Error'; break;
default: return res.status(400).json({ error: 'Invalid operator' });
}
res.json({ result });
});
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/vite-react-calculator-with-express-backend/raw