ConradIrwin/broken-form

User Registration App

A simple TypeScript-based web application with a Node.js/Express backend and TypeScript frontend for user registration.

Features

• Backend: Express.js server with TypeScript
• Frontend: TypeScript-based client with form validation
• Form Validation: Client-side validation for name and email
• Responsive Design: Mobile-friendly user interface
• Error Handling: Comprehensive error handling and user feedback

Project Structure

server/
├── src/
│   └── server.ts          # Express server
├── client/
│   ├── src/
│   │   └── main.ts        # TypeScript frontend code
│   ├── dist/              # Compiled JavaScript
│   ├── index.html         # Main HTML file
│   ├── package.json       # Client dependencies
│   └── tsconfig.json      # Client TypeScript config
├── package.json           # Server dependencies
├── tsconfig.json          # Server TypeScript config
└── README.md             # This file

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm

Installation

1. Install server dependencies:

npm install

2. Install client dependencies and build:

npm run build-client

Running the Application

Development Mode

npm run dev

This will build the client and start the server.

Production Mode

npm run build-client
npm run run

The application will be available at http://localhost:3000

API Endpoints

POST /createUser

Creates a new user with the provided name and email.

Request Body:

{
  "name": "John Doe",
  "email": "john@example.com"
}

Response:

• 200 OK: User created successfully
• 400 Bad Request: Error processing request

Frontend Features

• Form Validation: Real-time validation for name and email fields
• Loading States: Visual feedback during form submission
• Error Handling: User-friendly error messages
• Responsive Design: Works on desktop and mobile devices
• Accessibility: Proper form labels and keyboard navigation

Development

Building Client Code

cd client
npm run build

Watching Client Code (Development)

cd client
npm run watch

Server Development

The server uses ts-node for development, so TypeScript files are compiled on-the-fly.

Technology Stack

• Backend: Node.js, Express.js, TypeScript
• Frontend: TypeScript, HTML5, CSS3
• Build Tools: TypeScript Compiler
• HTTP Client: Fetch API

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Build and test the application
5. Submit a pull request

License

ISC