Resize three compnents
currently deployed at: [https://dataneurontask-resize.vercel.app/]
The DataNeuron Frontend Interface facilitates the interaction with the backend API through a user-friendly web application. It features three primary resizable components, each dedicated to specific functionalities: adding data, displaying data with update capabilities, and showing operation counts.
currently deployed at: [https://dataneuron-task2-frontend.vercel.app/]
This component contains two input fields where users can input their data:
- Task Input: For entering the task name.
- Description Input: For entering the task's description.
Upon filling out these fields, the user can submit the data, which then gets added to the database through the backend API.
All the data added through Component 1 are displayed here in a table format. Each row represents a single entry with the following columns:
- Task: Shows the task name.
- Description: Shows the task description.
- ADD: Each row has an update button, allowing the user to modify the respective data entry. Clicking this button will enable editing fields directly in the table or pop up a modal/dialog box for editing, depending on implementation.
This component displays the counts of operations performed:
- Add Count: Shows the number of times new data has been added.
- Update Count: Shows the number of times existing data has been updated.
These counts are fetched from the backend API, offering insight into how frequently data manipulation operations occur.
- Resizable Components: Each of the three main components is resizable, allowing the user to adjust their size according to their preference or screen real estate requirements.
- Reset Button: A dedicated button is available at the top of the interface. Clicking this button resets all components to their default sizes, providing a quick way to revert to the standard layout.
- React
- JavaScript
- Chakra UI
- React-Resizable
To set up and run the project locally, follow these steps:
Step 1: Clone the repository:
git clone <repository-url>
Step 2: Navigate to the project directory:
cd Dil_Foods/dilfoods_frontend/
Step 3: Install the required packages:
npm install
Step 4: Run the Project:
npm run start
Once the project is running locally, you can access this in your web browser.