This project was generated with Angular CLI version 13.2.1.
You can find out the working demo here
| Light Theme | Dark Theme |
|---|---|
 |
 |
This project is powered by Mirage.JS. The mock server is mocking GET, POST, and DELETE methods for getting the suggestions list, deleting a tag, and adding a new tag.
This project has been implemented using Angular. The main building blocks of the application are:
Components: Three different components are responsible for a separate task. None of the components are smart, and they are just for demonstrating the data using the @Input and @Output decorators. Dependency Injection has been heavily used in the project to get data from the mock server and manipulate the data between sibling components.
Model: This Project uses TypeScript, and I have emphasized using it correctly. I have tried to avoid using any to build a scalable and maintainable project.
Services: The project has three services: mirage, share, and tag. The mirage.service.ts is responsible for initializing the mock server and mocking the REST API verbs. The share.service.ts is for the data flow between the components using BehaviorSubject, and the tag.service.ts 's duty is to fetch data from the server (mock server)
The CSS library used for this project is the latest version of tailwind CSS. I have used it for two purposes:
- For Handling Dark/Light them
- And I have benefited from its excellent classes
Customizing Tailwind CSS
I have customized the library and added some colors to its default ones. You can find them all in the tailwind.config.js file.
Husky is used in this project to use the Git hooks. There are some rules for committing messages, and I ensure that files will be prettified by prettier before committing. I have also implemented proper esLint rules for better coding. To learn more about Husky, you can read my article regarding it here.
The tag-input project is responsive since tailwind is a mobile-first library.
If you want to deploy it yourself, after cloning the repo and installing the dependencies (using yarn install) please
run yarn run start (equivalent to ng serve) for a dev server. Navigate to http://localhost:4200/.
If you need any more details, please feel free to contact me. Check out my portfolio to get in touch with me.