hieunguyena6 / google-crawler-ui

DEPLOYED URL: https://google-crawler.vercel.app/

google-crawler-ui's Issues

[Bug] The UI is not responsive enough

Issue

When browsing the page with a small screen device (tested for iPhone 12), the UI is all scrambled and not usable:

Expected

The UI should still be functional on small screen devices. Having breakpoints for smaller devices would be the standard solution.

[Question] Why using the deprecated version of `react-query`

Issue

https://www.npmjs.com/package/react-query is now deprecated but is used extensively to manage the state in the application. https://github.com/tanstack/query is now the newer version. Did you face any issues with the newer version? What is your take on using such library over the built-in context/reducers or using Redux to manage state?

[Feature] Improvement to manage API requests

Issue

While the application does not have many requests, you did well in creating a utility to manage API requests axios. The usage of interceptors is also neat. However, the API base URL still needs to be imported manually into the page components:

google-crawler-ui/src/components/uploadCsvModal.jsx

Lines 17 to 18 in 088490e

	return axios.post(`${process.env.REACT_APP_SERVICE_URL}/v1/file/csv/upload`,
	formData);

Expected

Making POST and GET requests should only require to path the resource name e.g., keywords, login, signup. Therefore, ${process.env.REACT_APP_SERVICE_URL}/v1/ should not be duplicated in each page component 💡

[Chore] Setup issues on local machine

Issue

I tried to use both Docker and run the project locally but faced the respective issues:

1. docker-compose up

2. npm install + npm run dev

Expected

The README should be updated with:

• Set up instructions
• Pre-requisites such as Node versions