Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

See the section about deployment for more information.

Technologies across the project

React 18

https://reactjs.org/blog/2022/03/29/react-v18.html#whats-new-in-react-18

1. New Feature: Automatic Batching
2. New Feature: Transitions

Mui (material-ui)

https://mui.com/

Why we are using Material UI

MUI is a massive library of UI components designers and developers can use to build React applications. The open-source project follows Google's guidelines for creating components, giving you a customizable library of foundational and advanced UI elements.

The values it can bring to the project.

1. Accessibility - A11y (https://developer.mozilla.org/en-US/docs/Web/Accessibility)
2. Good design system - Highly customizable
3. Lots of UI elements we can reference to

React hook form

https://react-hook-form.com/get-started

Why we are using React hook form

There is no doubt that our project is form-based project. In the form, there needs to be validations for elements, and also we need to update the form element values manually without using other 3rd party library.
And React hook form can dramatically improve the performance since they are using uncontrolled components under the hood. (https://reactjs.org/docs/uncontrolled-components.html)

React Hook Form has made it easy to integrate with external UI component libraries. If the component doesn't expose input's ref, then you should use the Controller component, which will take care of the registration process. ie) Material UI is a good example of UI library that can be integrated with React Hook Form.
We need to register the component into the hook which makes the value available for both the form validation and submission while using react-hook-form. \

The values it can bring to the project.

1. Schema based validation
   It will validate your input data against the schema and return with either errors or a valid result.

2. Integration with Material UI
   To make this simple, we provide a wrapper component: Controller to streamline the integration process while still giving you the freedom to use a custom register.

3. Handle errors
   React Hook Form provides an errors object to show you the errors in the form. errors's type will return given validation constraints.

React router

https://reactrouter.com/docs/en/v6/getting-started/tutorial

Why we are using react-router

React Router is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces. React Router runs anywhere React runs; on the web, on the server with node.js, and on React Native.

The values it can bring to the project.

1. Client side routing without refreshing the page
2. Nested routing which can be implemented as part of layout system

TypeScript

https://www.typescriptlang.org/

Why we are using TypeScript

1. We can catch the errors at the early stages
2. Moving forward, TypeScript is the way to go, and most companies are using it.

The values it can bring to the project.

1. TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.
2. TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.
3. TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.

Project Plan

1. Get the forms running

   • Where you can search the pre-existing AI-code with name and zipcode
   • The UI where you can put the AI-form details

2. Get the auth runnings

   • Login
   • Signup