React Assessment

This project is a React Assessment form built with React, TypeScript, Tailwind CSS. The form is designed as a vertical carousel without using any additional libraries. The project includes a comprehensive testing suite implemented with Jest and React Testing Library.

Project Structure

src/
  ├── assets/
  ├── components/
  │   ├── AccordionItem/
  │   ├── Button/
  │   ├── Message/
  ├── constants/
  ├── context/
  ├── hooks/
  ├── Pages/
  │   ├── Actions/
  │   ├── Choice/
  │   ├── Indicators/
  │   ├── PageNotFound/
  │   ├── Question/
  │   ├── Questionnaire/
  │   ├── Summary/
  ├── types/
  ├── App.css
  ├── App.tsx
  ├── index.css
  ├── index.tsx

Getting Started

Prerequisites

• Node.js
• npm (Node Package Manager)

Installation

1. Clone the repository:

   git clone https://github.com/MrUsmanDev/react-assessment.git

2. Navigate to the project directory:

   cd react-assessment
   

3. Install the dependencies:

   npm install

Running the Project

To run the project locally, use the following command:

npm start

Building the Project

To build the project for production, use the following command:

npm run build

Running Tests

To run the tests, use the following command:

npm test

If you encounter any rendering errors while running the tests, you may need to install the following package:

npm install --save-dev @testing-library/react

Technologies Used

• React: JavaScript library for building user interfaces
• TypeScript: Typed superset of JavaScript that compiles to plain JavaScript
• Tailwind CSS: Utility-first CSS framework
• Jest: JavaScript testing framework
• React Testing Library: Simple and complete testing utilities that encourage good testing practices

Project Features

• Vertical Carousel: The steps are presented as a vertical carousel, providing a smooth and intuitive user experience.
• State Management: The form state is managed using Context.
• Type Safety: The project is written in TypeScript, ensuring type safety and reducing the likelihood of runtime errors.
• Comprehensive Testing: The project includes a comprehensive test suite to ensure the reliability and correctness of the application.

Contact

For any inquiries or further information, please contact:

• Name: Muhammad Usman
• Email: mrusmandevs@gmail.com
• GitHub: MrUsmanDev

Thank you for using the Carousel Form! I hope it meets your needs and expectations.