Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hombre2014/autocomplete
Take home assignment for Deel's Frontend Engineer (React.js) position
https://github.com/hombre2014/autocomplete
autocomplete autocomplete-functionality autocomplete-search autocomplete-suggestions custom-hooks jsonplaceholder-api react tailwindcss typescript
Last synced: 4 days ago
JSON representation
Take home assignment for Deel's Frontend Engineer (React.js) position
- Host: GitHub
- URL: https://github.com/hombre2014/autocomplete
- Owner: Hombre2014
- License: mit
- Created: 2024-03-18T14:58:25.000Z (9 months ago)
- Default Branch: dev
- Last Pushed: 2024-04-09T19:57:53.000Z (9 months ago)
- Last Synced: 2024-10-31T02:22:34.279Z (about 2 months ago)
- Topics: autocomplete, autocomplete-functionality, autocomplete-search, autocomplete-suggestions, custom-hooks, jsonplaceholder-api, react, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://autocomplete-nu.vercel.app
- Size: 126 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license.md
Awesome Lists containing this project
README
# Part 1 - React TypeScript AutoComplete component
> Take home assignment for Deel's Frontend Engineer (React.js) position
## Build with
- Language: TypeScript
- Library: React
- Build tool: Vite
- API: [jsonplaceholder](https://jsonplaceholder.typicode.com/users)
- Styling: Tailwind CSS
- Deployment: [Vercel](https://vercel.com)
## Screenshots
## Live Demo
[AutoComplete](https://autocomplete-nu.vercel.app/)
## How to use
- Clone the repository `git clone https://github.com/Hombre/autocomplete`
- Run `npm install`
- Run `npm run dev`
- Open `http://localhost:5173`
## 🚀 Features
**Please prepare an auto-complete component in React TypeScript.**
## Requirements
1. Performance matters as we are expecting a production ready
component.
2. You cannot use any 3rd party libraries - only pure React and internal
DOM functions.
3. You should use TypeScript and write proper interfaces and types.
4. The function to filter the data should be asynchronous. You can use
mock data (such as a JSON array), but the function which uses it
should be asynchronous (similar to a real REST call).
5. It should have basic working CSS. No need for anything fancy (such
as drop shadows etc).
6. You need to handle all non-standard/edge use-cases - it should have
a perfect user-experience.
7. Highlight the matching part of the text, in addition to showing it.
8. No external state management libraries (refer to #1 as well), only
native React method.
9. Use only functional components with hooks.
10. Shortcuts and hacks are ok - but you have to add comments on what
you are doing and why.
11. Add a README.md file explaining how to run the project.
12. Bonus Point: Load data using a real API call to some resource.
13. Part two (questions and answers) is [here](./questions.md).
## Author
👤 **Yuriy Chamkoriyski**
- GitHub: [@Hombre2014](https://github.com/Hombre2014)
- Twitter: [@Chamkoriyski](https://twitter.com/Chamkoriyski)
- LinkedIn: [axebit](https://linkedin.com/in/axebit)
## 🤝 Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/Hombre/autocomplete/issues).
## Show your support
Give a ⭐️ if you like this project!
## 📝 License
This project is [MIT](./license.md) licensed.