This is a custom select component that was created for educational purposes. It is almost production-ready component, and also it can be used as a base for a more complex component.
You can see the Demo Here .
The project is structured in the following way:
eslintrc.js
- ESLint configuration file.browserlistrc
- Browserslist configuration file.pretterrc
- prettier configuration fileconfig-overrides.js
- configuration file for the react-app-rewired (reconfiguration of Webpack)src
- source code of the projectcomponents
- common components of the projectcustom-select
- custom select componentcustom-select.js
- custom select functionalitycustom-select.modules.css
- styles for the custom select component__tests__
- tests for the custom select component
icons
- icons components
hooks
- common hooks of the projectmodules
- modules of the projectusers
- users moduleusers-page.js
- users page functionalityuser-page.module.scss
- users module stylesuse-users.js
- hook for getting users dataservices
- services for the users moduleapi
- api service for the users moduleuse-fetch-users.js
- hook for fetching users data from api
styles
- common styles of the projectmain.scss
- main styles of the projectmixins.scss
- style mixins for the projectvariables.scss
- style variables for the projectapp.js
- main application componentindex.js
- entry point of the application
The project uses GitHub Actions for CI/CD.
The configuration file is located in the .github/workflows
folder.
frontend.yml
- configuration file which runs:- checking of ESLint rules
- unit tests with checking of code coverage
deploy.yml
- configuration file which runs:- building of the project
- deployment of the project to the GitHub Pages