Calculator Workshop App

A full-stack calculator application built with Next.js (React) frontend and Express.js backend, demonstrating modern web development practices including ES6 modules, TypeScript, and API integration.

Project Structure

hellohacks/
├── client/                 # Next.js React frontend
│   ├── src/app/
│   │   ├── components/     # React components
│   │   ├── utils/          # Utility functions
│   │   ├── globals.css     # Global styles
│   │   ├── layout.tsx      # App layout
│   │   └── page.tsx        # Home page
│   ├── public/             # Static assets
│   └── package.json        # Frontend dependencies
├── server/                 # Express.js backend
│   ├── utils/              # Server utilities
│   ├── server.js           # Main server file
│   └── package.json        # Backend dependencies
└── README.md               # This file

Features

• Modern Calculator UI: Dark blue theme with responsive design
• Real-time Calculations: Live API calls to backend
• Multiple Operations: Add, subtract, multiply, divide
• Error Handling: Comprehensive error management
• TypeScript Support: Full type safety
• ES6 Modules: Modern JavaScript module system
• CORS Enabled: Cross-origin resource sharing

Quick Start

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation & Setup

1. Clone the repository

   git clone <repository-url>
   cd hellohacks

2. Install dependencies

   # Install server dependencies
   cd server
   npm install
   
   # Install client dependencies
   cd ../client
   npm install

3. Start the applications

   # Terminal 1 - Start the server
   cd server
   npm run dev
   
   # Terminal 2 - Start the client
   cd client
   npm run dev

4. Open your browser

   • Frontend: http://localhost:3000
   • Backend API: http://localhost:4000

Frontend (Client)

Technology Stack

• Next.js 15.5.4: React framework with App Router
• TypeScript: Type-safe JavaScript
• Tailwind CSS: Utility-first CSS framework
• React 19: Latest React with hooks

Key Components

src/app/components/Calculator.tsx

The main calculator component featuring:

• State Management: React hooks for form inputs, results, loading, and errors
• API Integration: Uses the custom fetchApi utility
• Modern UI: Dark blue theme with smooth animations
• Responsive Design: Works on all screen sizes
• Error Handling: User-friendly error messages

Key Features:

• Two number input fields
• Operation buttons (Add, Subtract, Multiply, Divide)
• Both GET and POST request examples
• Real-time result display
• Loading states and error handling

src/app/utils/api.ts

A simple, reusable API utility that:

• Abstracts HTTP Requests: Handles base URL and headers automatically
• TypeScript Support: Fully typed with generics
• Error Handling: Consistent error management
• Flexible: Supports all HTTP methods

Usage:

// GET request
const data = await fetchApi("/add?a=5&b=3");

// POST request
const data = await fetchApi("/calculate", {
    method: "POST",
    body: { operation: "add", a: 5, b: 3 }
});

src/app/page.tsx

The main page component that:

• Renders the calculator with a modern layout
• Provides context and instructions
• Uses the dark blue theme consistently

Backend (Server)

Technology Stack

• Express.js: Web framework for Node.js
• ES6 Modules: Modern JavaScript module system
• CORS: Cross-origin resource sharing
• Node.js: JavaScript runtime

Key Components

server.js

The main server file that:

• Sets up Express: Configures middleware and routes
• Handles CORS: Enables cross-origin requests
• API Endpoints: Provides calculator operations
• Error Handling: Comprehensive error management

Available Endpoints:

• POST /calculate - Calculate with operation, a, b in body
• GET /add?a=5&b=3 - Add two numbers
• GET /subtract?a=5&b=3 - Subtract two numbers
• GET /multiply?a=5&b=3 - Multiply two numbers
• GET /divide?a=10&b=2 - Divide two numbers

utils/calculator.js

The calculator module featuring:

• Static Methods: Pure functions for mathematical operations
• Error Handling: Validates inputs and handles edge cases
• Multiple Operations: Add, subtract, multiply, divide, power, square root
• Input Validation: Checks for valid numbers and operations

Available Operations:

Calculator.add(5, 3); // 8
Calculator.subtract(10, 4); // 6
Calculator.multiply(6, 7); // 42
Calculator.divide(20, 4); // 5
Calculator.power(2, 3); // 8
Calculator.squareRoot(16); // 4
Calculator.calculate("add", 5, 3); // 8

Development

Available Scripts

Client (Frontend):

npm run dev      # Start development server with Turbopack
npm run build    # Build for production
npm run start    # Start production server

Server (Backend):

npm run dev      # Start with nodemon (auto-restart)
npm start        # Start production server

API Testing

You can test the API directly using curl:

# GET request
curl "http://localhost:4000/add?a=5&b=3"

# POST request
curl -X POST http://localhost:4000/calculate \
  -H "Content-Type: application/json" \
  -d '{"operation": "add", "a": 5, "b": 3}'

Design System

Color Palette

• Primary: Dark blue theme (slate-800, slate-900)
• Accent Colors:
  • Blue (Add operations)
  • Green (Subtract operations)
  • Yellow (Multiply operations)
  • Red (Divide operations)
  • Purple/Indigo (POST operations)

Typography

• Headings: Bold, large text with proper hierarchy
• Body Text: Clean, readable fonts
• Input Text: High contrast white on dark backgrounds

Interactive Elements

• Smooth Transitions: 200ms duration for all interactions
• Hover Effects: Subtle color changes and shadow glows
• Focus States: Clear focus indicators for accessibility
• Loading States: Visual feedback during API calls

Deployment

Frontend (Vercel)

cd client
npm run build
# Deploy to Vercel or your preferred platform

Backend (Railway, Heroku, etc.)

cd server
npm start
# Deploy to your preferred platform

Learning Objectives

This project demonstrates:

• Full-Stack Development: Frontend and backend integration
• Modern JavaScript: ES6 modules, async/await, destructuring
• TypeScript: Type safety and better development experience
• API Design: RESTful endpoints and error handling
• React Patterns: Hooks, state management, component composition
• CSS Frameworks: Tailwind CSS utility classes
• Development Workflow: Hot reloading, development servers

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is for educational purposes as part of the HelloHacks workshop.