- page layout
- data fetched from api
- data mapped to convenient shape
- data displayed into cards
- data is paginated
- beer details on separate dynamic route /details/:id
- specific beer details fetched by useBeerDetails custom hook
- beer details displayed in engaging way
- slider menu with focus-lock
- dark/light theme, saved in local-storage, passed by context
- sub-menu with breadcrumbs navigation
- added styles to beer cards and beer images
- data-loading is communicated to user with loader(spinner)
- app is compatible with desktop/tablet/mobile screens
- clone repository.
- open repository in your IDE ( eg vs code )
- open terminal( crtl + ` )
- npm install // ( Node js required )
- npm start
- open browser and connect to localhost:5173
https://beer-browser2.netlify.app/
"axios": "^1.4.0"
"bootstrap": "^5.3.0",
"prettier": "^2.8.8",
"react": "^18.2.0",
"react-bootstrap": "^2.7.4",
"react-dom": "^18.2.0",
"react-feather": "^2.0.10",
"react-focus-lock": "^2.9.4",
"react-router-bootstrap": "^0.26.2",
"react-router-dom": "^6.13.0"
"@testing-library/react": "^14.0.0",
"@types/react": "^18.0.37",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.60.0",
"@typescript-eslint/parser": "^5.60.0",
"@vitejs/plugin-react-swc": "^3.0.0",
"eslint": "^8.38.0",
"eslint-config-prettier": "^8.8.0",
"eslint-import-resolver-typescript": "^3.5.5",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.1",
"happy-dom": "^9.20.3",
"typescript": "^5.0.2",
"vite": "^4.3.9",
"vitest": "^0.32.2"