yamisagi / rs-form

In this project, I built a Form app with best practices for form validation & form handling including basic form validation, complex form validation, form handling with FormData API, custom hooks also with comments. Used React and TypeScript with the help of RS Build.

Home Page:https://rs-form.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

RS Form App

A Form app with best practices for form validation & form handling including basic form validation, complex form validation, form handling with FormData API, custom hooks also with comments.

About Me πŸ’™Β»

πŸ“« How to reach me _yamisagi yamisagi


How To Run This Project πŸš€


  • Clone the repo

    git clone
  • Install NPM packages

    npm install
  • Run the project

    npm run dev
  • Open the project on your browser

    http://localhost:8080/
  • Enjoy! πŸŽ‰

About The Project

In this project, I built a Form app with best practices for form validation & form handling including basic form validation, complex form validation, form handling with FormData API, custom hooks also with comments. Used React and TypeScript with the help of RS Build. I used the RS Build instead of Webpack to make the project more poweful with the help of RS Build's features. For more information about RS Build, you can check the RS Build documentation.

Roadmap

  • Project Setup
  • Implementing RS Build
  • Implementing Tailwind CSS
  • Implementing React Router
  • Create a basic Login component
  • Implement form validation and explain it with comments
  • Refactor constants in constants.ts
  • Refactor form component
  • Create custom Tailwind CSS classes
  • Create ComplexForm component
  • Implement form validation in ComplexForm component
  • Implement FormData API in ComplexForm component
  • Explain ComplexForm walkthrough with comments
  • Create LoginValidate component
  • Implement 4 different validation methods in LoginValidate component
  • Create Custom Hook for form validation in useInput
  • Explain LoginValidate walkthrough with comments
  • Implement useInput hook in ComplexForm component and explain it with comments
  • Finish the project πŸŽ‰
  • Deploy the project on Vercel πŸš€

(back to top)

Learn More

To learn more about RS Build, take a look at the following resources:


(back to top)

About

In this project, I built a Form app with best practices for form validation & form handling including basic form validation, complex form validation, form handling with FormData API, custom hooks also with comments. Used React and TypeScript with the help of RS Build.

https://rs-form.vercel.app


Languages

Language:TypeScript 88.2%Language:CSS 9.7%Language:JavaScript 2.1%