GlassForm

Project Overview

GlassForm is a full-stack web application that pairs a React frontend with an Express backend. The frontend provides a polished user experience and client-side form validation, while the backend handles submission storage and serves the built application in production.

Features

• Modern React UI with client-side routing
• Animated welcome screen and details form
• Form validation for name, email, and bio fields
• Express API endpoint for user submissions
• Local persistence to submissions.txt
• Production static serving from dist

Tech Stack

• Node.js: Backend runtime
• Express: API and static file server
• React: Frontend UI library
• React Router DOM: Navigation between pages
• Vite: React build and development tool
• TypeScript: Strongly typed React components
• Nodemon: Backend auto-reload during development

How It Works

Frontend Flow

1. User opens the app in the browser.
2. React renders the application using src/App.tsx.
3. Client-side routing displays either:
   • / → Welcome page
   • /details → Details form page
4. Details.tsx captures user input and validates form values.
5. Once valid, the form submits data via fetch() to the backend API.

Backend Flow

1. Express starts from app.js.
2. express.json() parses incoming JSON bodies.
3. Static files are served from the dist directory.
4. POST /api/user-data receives user form data.
5. The backend appends a timestamped record to submissions.txt.
6. For non-API GET routes, Express returns dist/index.html, enabling React Router to handle navigation.

Setup and Run

Install dependencies

npm install

Run backend development server

npm run dev

Build frontend for production

npm run build

Start production server

npm start

Run the frontend development server

npm run client

Note: npm start serves the dist directory, so build the frontend first.

API Details

• Endpoint: POST /api/user-data
• Request body:
  • name (string)
  • email (string)
  • bio (string)
• Response: { status: "success" } on successful save
• Data is appended to submissions.txt

Project Structure

• app.js - Express backend server
• package.json - Scripts and dependencies
• tsconfig.json - TypeScript settings
• vite.config.ts - Vite configuration
• src/App.tsx - Route definitions for React
• src/components/Welcome.tsx - Landing page UI
• src/components/Details.tsx - Form page and validation
• src/index.css - Global styling and effects
• submissions.txt - Saved form submissions

Form Validation Logic

• name must not be empty.
• email must not be empty and must follow a simple email pattern.
• bio must not be empty.

Invalid fields show inline error messages, and the submit button stays disabled until the form is valid.

Summary

This project is a simple full-stack app built with React, TypeScript, Vite, and Express. The frontend handles user interaction and validation, while the backend receives submissions and saves them to a local file. The app is designed for easy local development and deployment with static file serving in production.