https://github.com/charandvvk/pick-users
ReactJS-based Web Application developed as part of a hiring assignment by Zepto.
https://github.com/charandvvk/pick-users
css3 html5 javascript-es6 react-icons reactjs
Last synced: 3 months ago
JSON representation
ReactJS-based Web Application developed as part of a hiring assignment by Zepto.
- Host: GitHub
- URL: https://github.com/charandvvk/pick-users
- Owner: charandvvk
- Created: 2024-01-16T18:20:43.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-16T20:28:37.000Z (over 2 years ago)
- Last Synced: 2025-03-14T18:33:46.387Z (over 1 year ago)
- Topics: css3, html5, javascript-es6, react-icons, reactjs
- Language: JavaScript
- Homepage: https://charandvvk-pickusers.netlify.app/
- Size: 207 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pick Users: ReactJS-based Web Application
This project is developed as part of a hiring assignment for a Frontend role at [Zepto](https://www.zeptonow.com/).
## Table of Contents
1. [Demo](#demo)
2. [Usage](#usage)
3. [Technologies](#technologies)
4. [Setup](#setup)
## Demo
You can experience a live demo of the application [here](https://charandvvk-pickusers.netlify.app/), hosted on Netlify.
## Usage
1. Click on the input field to view a list of users below it.
2. Type in the input field to search the users by their names.
3. Click on a user to turn it into a chip above the input field and to remove it from the list.
4. Click on the "X" icon in the right of a chip to remove it and to add the user back to the list.
5. Press backspace when the input field is blank for the last chip to get highlighted and press backspace again to remove it and to add the user back to the list. (Bonus)
## Technologies
- [HTML5](https://html.com/)
- [CSS3](https://css3.com/)
- [JavaScript/ES6](https://www.javascript.com/)
- [React Icons](https://react-icons.github.io/react-icons)
- [React](https://react.dev)
## Setup
To get a local copy of the project up and running, follow these steps:
1. Launch your preferred command-line interface (CLI).
2. Clone the repository: `git clone https://github.com/charandvvk/Pick-Users.git`
3. Change to the project directory: `cd Pick-Users`
4. Install dependencies: `npm i`
5. Start the development server: `npm start`
6. Open your favored browser and navigate to http://localhost:3000.