Form App

Project Description

The Form App is a full-stack web application that allows users to:

1. Build customizable forms with various field types (e.g., text, boolean, datetime).
2. Save and view the created forms.
3. Submit responses to the created forms.

This project demonstrates a full-stack implementation using modern web development practices, including a TypeScript-based backend (Fastify, Prisma, PostgreSQL) and a frontend built with Angular.

---

Getting Started

Prerequisites

• Node.js (v16+ recommended)
• Docker and Docker Compose
• Angular CLI (for frontend development)

Setup Instructions

1. Clone the Repository

git clone https://github.com/daniel-slocum/form-app.git
cd form-app

2. Backend Setup

1. Navigate to the api directory:

   cd api

2. Copy the .env.example file to .env:

   cp .env.example .env

3. Build and start the backend services using Docker:

   docker compose build
   docker compose up

4. Run database migrations:

   npm run migrate

5. Seed the database with example data:

   npm run seed

The backend will be available at http://localhost:8080.

3. Frontend Setup

1. Navigate to the client directory:

   cd client

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

The frontend will be available at http://localhost:4200.

Application Features

Frontend

• Form Builder: Accessible at http://localhost:4200/forms/builder
  • Allows users to create and customize forms with various field types (e.g., text, boolean, datetime).
• Form Viewer: Accessible at http://localhost:4200/forms/viewer/:formId
  • Displays a form based on its ID and allows users to submit responses.

Backend

• API Endpoints:
  • Form:
    • POST /form: Create a new form.
    • GET /form/:id: Fetch a form by its ID.
  • Source Record:
    • POST /source-record: Create a source record with associated source data.
• API Documentation:
  • Swagger documentation is available at http://localhost:8080/docs.

Project Structure

• Backend (api/):
  • Built with Fastify, Prisma, and PostgreSQL.
  • Handles form and source record management.
• Frontend (client/):
  • Built with Angular.
  • Provides a user interface for building and viewing forms.

Future Improvements

Given more time, the following features and improvements would be implemented:

1. API Authentication:
   • Add authentication and authorization to secure API endpoints.
2. UI Enhancements:
   • Add a page to list all created forms.
   • Add a page to view submitted responses for a form.
3. Form Reset Bug:
   • Fix the issue where resetting the form displays validation errors.
4. Error Handling:
   • Improve error handling and user feedback for API failures.
5. Deployment:
   • Deploy the application to a cloud platform (e.g., Heroku, Vercel, Netlify) for public access.

License

This project is licensed under the MIT License.