- Copy
env/.env.example
toenv/.env
- Update
env/.env
with your credentials - Run
npm run dev
- Data service layer
- Components
-
QuerySection
- EVENT: selected (emits: String query, String text, Postion:Enum position)
-
Result Section
- States
- Loading
- Error
- Content/PreviewImageList
- Props
- String query
- String text
- Position:Enum position
- String[] imageUrls
- States
-
PreviewImageList
-
PreviewImage
- props
- String text
- Position:Enum position
- String imageUrl
- Functionality
- Renders alt text
- props
-
Pagination => Just use one from Radix (maybe just buttons)
-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level
parserOptions
property like this:
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
- Replace
plugin:@typescript-eslint/recommended
toplugin:@typescript-eslint/recommended-type-checked
orplugin:@typescript-eslint/strict-type-checked
- Optionally add
plugin:@typescript-eslint/stylistic-type-checked
- Install eslint-plugin-react and add
plugin:react/recommended
&plugin:react/jsx-runtime
to theextends
list