C + React REST API Demo

This is a simple demonstration of a web application with a C backend and React frontend communicating via REST APIs.

Architecture

• Backend: C HTTP server with REST endpoints
• Frontend: React with TypeScript
• Communication: HTTP REST APIs with JSON
• Build Tools: Make (C), Vite (React)

Features

• ✅ C HTTP server with REST endpoints
• ✅ React frontend with TypeScript
• ✅ User management (GET/POST users)
• ✅ Health check endpoint
• ✅ Error handling and loading states
• ✅ Modern UI with responsive design

API Endpoints

The C backend provides these REST endpoints:

• GET /api/users - Get all users
• POST /api/users - Create a new user
• GET /api/health - Health check
• GET / - Server info page

Project Structure

├── backend/
│   ├── server.c          # C HTTP server
│   └── Makefile          # Build configuration
├── src/
│   ├── components/       # React components
│   │   ├── UserList.tsx
│   │   ├── CreateUserForm.tsx
│   │   └── HealthStatus.tsx
│   ├── api.ts           # API client
│   ├── App.tsx          # Main React app
│   ├── main.tsx         # React entry point
│   └── index.css        # Styles
├── package.json         # Node.js dependencies
├── vite.config.ts       # Vite configuration
├── tsconfig.json        # TypeScript configuration
└── index.html           # HTML template

Prerequisites

• C Compiler: GCC or Clang
• Node.js: Version 16 or higher
• npm: Package manager

Quick Start

1. Install Dependencies

npm install

2. Start the Backend Server

In one terminal:

cd backend
make
./server

The C server will start on port 8080.

3. Start the Frontend

In another terminal:

npm run dev

The React app will start on port 3000.

4. Open the Application

Visit http://localhost:3000 in your browser.

Manual Setup

Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Compile the C server:

   make

3. Run the server:

   ./server

The server will display:

C REST API Server running on port 8080
Endpoints:
  GET  /api/users  - Get all users
  POST /api/users  - Create a user
  GET  /api/health - Health check
  GET  /          - Server info

Frontend Setup

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

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

Testing the API

You can test the API endpoints directly:

Get Users

curl http://localhost:8080/api/users

Create User

curl -X POST http://localhost:8080/api/users \
  -H "Content-Type: application/json" \
  -d '{"name": "Test User", "email": "test@example.com"}'

Health Check

curl http://localhost:8080/api/health

How It Works

Backend (C)

The C server uses standard POSIX sockets to create an HTTP server that:

1. Listens on port 8080
2. Parses HTTP requests
3. Routes requests to appropriate handlers
4. Returns JSON responses
5. Includes CORS headers for cross-origin requests

Frontend (React)

The React frontend:

1. Uses Axios for HTTP requests
2. Implements TypeScript for type safety
3. Provides a modern UI with components
4. Handles loading states and errors
5. Communicates with the C backend via REST APIs

Communication Flow

1. React components make HTTP requests to /api/* endpoints
2. Vite proxy forwards these requests to localhost:8080
3. C server processes requests and returns JSON responses
4. React components update the UI based on responses

Development Notes

• The C server includes basic CORS headers for development
• Error handling is implemented on both frontend and backend
• The frontend includes loading states and user feedback
• TypeScript provides type safety for API interactions

Troubleshooting

Backend Issues

• Port already in use: Make sure no other service is using port 8080
• Compilation errors: Ensure you have GCC or Clang installed
• Permission denied: Make sure the server executable has proper permissions

Frontend Issues

• Cannot connect to backend: Ensure the C server is running on port 8080
• Build errors: Run npm install to ensure all dependencies are installed
• TypeScript errors: Check that all types are properly defined

Next Steps

This demo can be extended with:

• Database integration (SQLite, PostgreSQL)
• Authentication and authorization
• More CRUD operations (PUT, DELETE)
• Real-time updates with WebSockets
• Docker containerization
• Production deployment configuration

License

This project is for educational purposes and demonstrates REST API integration between C and React.