Skip to content

Health and Nutrition Sheet made in Nextjs and Typescript, using styled-components for styling and yup-schema for validation.

Notifications You must be signed in to change notification settings

Mornieur/health-form

Repository files navigation

Health Form - Simplified Health Declaration Form

Overview

Health Form is a web application built with Next.js, TypeScript, Styled Components, React Icons, and Yup Schema. It allows users to fill out a health declaration form that collects patient and contact information. The form includes various components such as checkboxes, selects, and inputs, with some fields being mandatory. The form validates the user input and displays relevant error messages for any missing or incorrect data.

Live Demo

Check out the live demo of the project here.

Key Features

  • User-friendly interface for filling out the health declaration form.
  • Components for checkboxes, selects, and inputs with validation.
  • Real-time validation and error display for mandatory fields.
  • Secure handling of user data and privacy protection.

Technologies Used

  • Next.js: A React framework for server-side rendering and optimized performance.
  • TypeScript: A typed superset of JavaScript for enhanced code reliability.
  • Styled Components: A CSS-in-JS library for styling React components.
  • React Icons: Icon library for easy integration of SVG icons.
  • Yup Schema: A schema-based validation library for form validation.

Installation and Setup

To run the project locally, follow these steps:

  1. Ensure you have Node.js and npm (Node Package Manager) installed on your system.
  2. Clone this repository to your local machine.
  3. Navigate to the project directory in the terminal.
  4. Install the required dependencies using the following command:
npm install

  1. Start the development server with:
npm run dev

  1. Access the application in your web browser through http://localhost:3000.

Usage

Access the Health Form application using the provided link.
Fill out the health declaration form, providing patient and contact information.
Ensure to complete all mandatory fields to avoid validation errors.
Submit the form once all information is provided.

About

Health and Nutrition Sheet made in Nextjs and Typescript, using styled-components for styling and yup-schema for validation.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published