Newsletter Form Project

Description

This project is a simple newsletter subscription form built using React and TypeScript. The form collects user input for their name, email, and agreement to the terms. Validation is implemented to ensure that the required fields are filled, and the terms are agreed upon before submission.

Components

App

The main application component that serves as the entry point. It provides a user-friendly interface with a title, description, and the newsletter subscription form.

Form

The newsletter subscription form component responsible for collecting user input. It includes input fields for name, email, and a checkbox for agreeing to the terms. Validation messages are displayed if there are any errors in user input.

Validation

The validation module contains a function to validate user input. It checks if the name and email fields are filled, and if the user has agreed to the terms. Error messages are returned for each field if validation fails.

How to Run

  1. Clone the repository.
  2. Install dependencies using npm install.
  3. Run the development server with npm run dev.
  4. Open your browser and navigate to http://localhost:3000.

Scripts

  • dev: Runs the development server.
  • build: Builds the project for production.
  • lint: Lints the project using ESLint.
  • preview: Previews the production build locally.

Dependencies

  • React: ^18.2.0
  • React-dom: ^18.2.0
  • TypeScript: ^5.0.2
  • Vite: ^4.5.2

Dev Dependencies

  • @types/react: ^18.0.37
  • @types/react-dom: ^18.0.11
  • @typescript-eslint/eslint-plugin: ^5.59.0
  • @typescript-eslint/parser: ^5.59.0
  • @vitejs/plugin-react: ^4.0.0
  • Autoprefixer: ^10.4.18
  • ESLint: ^8.38.0
  • ESLint-plugin-react-hooks: ^4.6.0
  • ESLint-plugin-react-refresh: ^0.3.4
  • PostCSS: ^8.4.35
  • Tailwindcss: ^3.4.1

Usage

Feel free to use or modify this project as a starting point for your newsletter subscription forms. Contributions and improvements are welcome!