Summit Form

The project incorporates the following features:

• A React form built with Next.js that leverages Server-Side Rendering (SSR)
• Responsive design, employing CSS flexbox to ensure mobile functionality
• Integration of TailwindCSS (incorporated into globals.css)
• PostCSS for .css file transform preprocessing together with TailwindCSS
• Formik and Yup integration for robust form validation
• Proper error handling and user-friendly error messages
• Unit tests
• A GitHub workflow designed to work with Unit tests and validate commits ((CI/CD) pipeline)

Structure of the project with description of essential files

Main code & components
components/Form.tsx - main form component with Formik/Yup validation
pages/_app.tsx - any page initialization
pages/index.tsx - index page that uses form as a component
styles/globals.css - CSS classes that use Tailwind CSS

Unit Tests
__tests__/Form.test.tsx - Jest unit tests for the form intergrated with Gitghub workflow
.jestrc.js - Jest config to parse tsx with tsconfig
tsconfig.jest.json - custom Typescript config for Jest tests
.git/workflows/ci.yml - Github workflow that performs those tests on every commit

Configs
.vscode - VS Code workspace config including tasks
package.json - Node package config
postcss.config.js - PostCSS CSS files processing for Tailwind
tailwind.config.js - Tailwind CSS processing configs
next.config.js - Next.js config

Installation

To install the project dependencies, run the following command:

npm install

Then use

npm run build

To build the project

Usage

To start the API server, run the following command:

npm run start

This will start the server on port 3000 by default.

Testing

To run the Jest test suite, run the following command:

npm run test

This will run the tests and output the results to the console.