SPA simple form

Code structure

File structure

Container contains business logic, components do not.

Components are reusable.

Form validation

https://github.com/jaredpalmer/formik

React

Uses renderProps to abstract business logic from components

SSR

https://nextjs.org/ Prerender static HTML at build time. Form does not work without JS!

Semantic markup

Correct use of HTML markup

Styling

https://styled-components.com/

Design system using CSS variables https://amzn.github.io/style-dictionary/#/

Uses flexbox for grids

Testing

https://testing-library.com/

Code quality

ESLint PostCSS

Accessibility standards

Implements aria accessibility attributes including aria-alert