beer-browser

api base url:

https://api.punkapi.com/v2/

features:

• 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

locally:

1. clone repository.
2. open repository in your IDE ( eg vs code )
3. open terminal( crtl + ` )
4. npm install // ( Node js required )
5. npm start
6. open browser and connect to localhost:5173

live:

https://beer-browser2.netlify.app/

dependencies:

    "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"

dev-dependencies:

    "@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"