Front-end React Developer Challenge.

The goal of this challenge is to implement a single-page web application based on the provided Figma design and data from an API endpoint

Problem statement

Here's the PDF document with more information about the coding assessment:

Download PDF

Getting Started

Note: Ensure you have node js installed - v18.15.0

1. Clone this repository to your local machine

git clone https://github.com/kay102dev/react-challenge.git

2. Navigate to the project directory

cd react-challenge

3. Install the dependencies

npm install

5. Start the development server

npm run start

Additions

npm packages incorporated

• mongoose A packages for modeling MongoDB objects designed to work in an asynchronous environment. It supports both promises and callbacks.

• typescript A packages that converts files with the extensions .ts or .tsx (TypeScript files) into JavaScript.

• @types/react Provides typing for the React library's API and offers intelligent code completion and documentation.

• @types/react-dom Provides typing for the React DOM API and offers intelligent code completion and documentation.

---

• Please be advised that as an extra step, I have integrated the application with a MongoDB server. The form located at the bottom of the UI is designed to capture the user's favorite brand and subsequently persist this data to a MongoDB server. Following this, the data is retrieved and populated within the UI table.

• Screenshots illustrating these functionalities are included below for your reference.

Survey UI

I have also incorporated UI validation.

Cluster UI

challenge UI