- Frontend: ReactJS, TypeScript.
Static Counter on Table
Dynamic Country Flags from Flags API
Using Flags API as the mentioned
https://www.countryflagsapi.com/
is not working.
Use keyboard shortcut ctrl + /
or cmd + /
to instantly start searching.
Press Enter
or Return
to Search. OR wait 500ms
for search to kick in automatically.
A way that API calls are not made on every keystroke.
Uses useDebounce
a custom hook made my me, 'https://www.npmjs.com/package/@kushagra-aa/hooks-usedebounce'
Pagination Updates depending on search result.
An Option to user to let user view as many items as user want on a page instead of default pageSize
.
The max pageSize
is capped to 10
due to restrictions from the API
Shows a NoDataFound
element if the data in table is empty.
All views are fully responsive up to 300px
width.
-
Clone the repository:
git clone https://github.com/kushagra-aa/solvative.git
-
Navigate to the project directory:
cd solvative
-
Make a
.env
file and paste the values:VITE_BASE_URL = VITE_RAPID_API_KEY = VITE_RAPID_API_HOST =
You need to have the following environment variables, if you don't have them you get then from HERE(RapidAPI)
-
Install dependencies
yarn
OR
npm i
-
Run Frontend
yarn dev
OR
npm run dev