https://github.com/sushank-ghimire/chai-machine-coding
https://github.com/sushank-ghimire/chai-machine-coding
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/sushank-ghimire/chai-machine-coding
- Owner: Sushank-ghimire
- Created: 2024-07-23T10:19:33.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-12-24T10:58:57.000Z (5 months ago)
- Last Synced: 2025-02-12T15:18:35.248Z (4 months ago)
- Language: TypeScript
- Size: 103 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Chai Machine Coding Projects
This repository contains the projects completed as part of a machine coding round for [Company Name]. The projects demonstrate various front-end development skills using React and associated libraries. All projects are part of a single Vite project with different routes.
GitHub Repository: [Chai Machine Coding Projects](https://github.com/Sushank-ghimire/chai-machine-coding)
## Table of Contents
1. [OTP Send Project](#otp-send-project)
2. [Drag and Drop Courses with Priority](#drag-and-drop-courses-with-priority)
3. [Table with Pagination and Searching](#table-with-pagination-and-searching)
---
## OTP Send Project
This project implements a simple OTP (One Time Password) sending functionality.
### Features
- Input form for entering phone number or email
- Validation for correct phone number/email format
- OTP generation and sending simulation
- Resend OTP functionality
- Countdown timer for resending OTP
## Drag and Drop Courses with Priority
This project allows users to drag and drop courses to prioritize them.
### Features
- Drag and drop functionality to reorder courses.
- Persistent state to maintain course order.
- Visual indicators for dragging and dropping.
### Implementation Details
The drag-and-drop functionality is implemented using the `@dnd-kit` library, which provides powerful and customizable drag-and-drop capabilities for React applications.
# Table Data Filtering
This project provides a table component that allows users to filter and search through data. It's designed to handle large datasets by enabling efficient filtering and user-friendly navigation.
## Features
- **Data Display**: Presents data in a structured table format.
- **Filtering**: Users can apply filters to narrow down the displayed data based on various criteria.
- **Searching**: Provides a search bar to filter data by keywords or specific fields.
- **Dynamic Updates**: The table updates dynamically as users apply filters or perform searches.
## Implementation Details
The table with filtering functionality is built using React, which allows for smooth state management and user interactions. Key features include:
- **Search Functionality**: A search bar filters the data in real-time based on the user's input.
- **Filter Options**: Users can apply different filters to view subsets of the data.
- **State Management**: React state is used to manage the current search query and active filters.
### Installation
```bash
git clone https://github.com/Sushank-ghimire/chai-machine-coding.git
npm install
npm run dev
```
## License
This project is licensed under the [MIT License](LICENSE).