Upto second part (Intermediate Topics)

niteshpk · Apr 23, 2023 · 313a857 · 313a857 · vercel · Apr 23, 2023
commit 313a857
Show file tree

Hide file tree

Showing 61 changed files with 1,203 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+package-lock.json
+.vercel
diff --git a/README.md b/README.md
@@ -0,0 +1,33 @@
+# GameHub
+
+GameHub is a video game discovery web app that helps you find new and interesting games to play. With GameHub, you can search for games by platform, genre, and more.
+
+## DEMO URL
+
+https://game-hub-mocha.vercel.app/
+
+## Getting Started
+
+To get started with GameHub, follow these steps:
+
+1. Clone this repository to your local machine.
+2. Run `npm install` to install the required dependencies.
+3. Run `npm run dev` to start the web server.
+
+## About the Course
+
+I have learned everything I need to know to become a proficient React developer. I learned how to:
+
+- Build front-end apps with React and TypeScript
+- Build reusable function components
+- Style your components using vanilla CSS, CSS modules, and CSS-in-JS
+- Manage component state
+- Build forms with React Hook Forms
+- Implement form validation using Zod
+- Connect your React apps to the backend
+- Deploy your React apps
+- Use VSCode shortcuts to increase your productivity
+- Write clean code like a pro
+- Apply best practices
+
+I have now solid understanding of React and be able to build real-world applications with React and TypeScript.
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GameHub</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "game-hub",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^2.5.1",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@tanstack/react-query": "4.28",
+    "@tanstack/react-query-devtools": "4.28",
+    "axios": "^1.3.4",
+    "framer-motion": "^10.0.1",
+    "ms": "^2.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
+    "react-infinite-scroll-component": "6.1",
+    "react-router-dom": "^6.10.0",
+    "zustand": "^4.3.7"
+  },
+  "devDependencies": {
+    "@types/ms": "^0.7.31",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.1.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/assets/bulls-eye.webp b/src/assets/bulls-eye.webp
diff --git a/src/assets/logo.webp b/src/assets/logo.webp
diff --git a/src/assets/meh.webp b/src/assets/meh.webp
diff --git a/src/assets/no-image-placeholder.webp b/src/assets/no-image-placeholder.webp
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/assets/thumbs-up.webp b/src/assets/thumbs-up.webp
diff --git a/src/components/ColorModeSwitch.tsx b/src/components/ColorModeSwitch.tsx
@@ -0,0 +1,14 @@
+import { HStack, Switch, Text, useColorMode } from '@chakra-ui/react'
+
+const ColorModeSwitch = () => {
+  const {toggleColorMode, colorMode} = useColorMode();
+
+  return (
+    <HStack>
+      <Switch colorScheme='green' isChecked={colorMode === 'dark'} onChange={toggleColorMode} />
+      <Text whiteSpace='nowrap'>Dark Mode</Text>
+    </HStack>
+  )
+}
+
+export default ColorModeSwitch
diff --git a/src/components/CriticScore.tsx b/src/components/CriticScore.tsx
@@ -0,0 +1,15 @@
+import { Badge } from '@chakra-ui/react';
+
+interface Props { 
+  score: number;
+}
+
+const CriticScore = ({ score }: Props) => {
+  let color = score > 75 ? 'green' : score > 60 ? 'yellow' : '';
+
+  return (
+    <Badge colorScheme={color} fontSize='14px' paddingX={2} borderRadius='4px'>{score}</Badge>
+  )
+}
+
+export default CriticScore
diff --git a/src/components/DefinitionItem.tsx b/src/components/DefinitionItem.tsx
@@ -0,0 +1,22 @@
+import { Box, Heading } from '@chakra-ui/react';
+import React, { ReactNode } from 'react'
+
+interface Props {
+  term: string;
+  children: ReactNode | ReactNode[];
+}
+
+const DefinitionItem = ({ term, children }: Props) => {
+  return (
+    <Box marginY={5}>
+      <Heading as='dt' fontSize='md' color='gray.600'>
+        {term}
+      </Heading>
+      <dd>
+        {children}
+      </dd>
+    </Box>
+  )
+}
+
+export default DefinitionItem
diff --git a/src/components/Emoji.tsx b/src/components/Emoji.tsx
@@ -0,0 +1,24 @@
+import bullsEye from '../assets/bulls-eye.webp';
+import thumbsUp from '../assets/thumbs-up.webp';
+import meh from '../assets/meh.webp';
+import { Image, ImageProps } from '@chakra-ui/react';
+
+interface Props {
+  rating: number;
+}
+
+const Emoji = ({ rating }: Props) => {
+  if (rating < 3) return null;
+
+  const emojiMap: { [key: number]: ImageProps } = {
+    3: { src: meh, alt: 'meh', boxSize: '25px' },
+    4: { src: thumbsUp, alt: 'recommended', boxSize: '25px' },
+    5: { src: bullsEye, alt: 'exceptional', boxSize: '35px' },
+  }
+
+  return (
+    <Image {...emojiMap[rating]} marginTop={1} />
+  )
+}
+
+export default Emoji
diff --git a/src/components/ExpandableText.tsx b/src/components/ExpandableText.tsx
@@ -0,0 +1,34 @@
+import { Button, Text } from '@chakra-ui/react';
+import React, { useState } from 'react';
+
+interface Props {
+  children: string;
+}
+
+const ExpandableText = ({ children }: Props) => {
+  const [expanded, setExpanded] = useState(false);
+  const limit = 300;
+
+  if (!children) return null;
+
+  if (children.length <= limit) return <Text>{children}</Text>;
+
+  const summary = expanded ? children : children.substring(0, limit) + '...';
+
+  return (
+    <Text>
+      {summary}
+      <Button
+        size="xs"
+        marginLeft={1}
+        fontWeight="bold"
+        colorScheme="yellow"
+        onClick={() => setExpanded(!expanded)}
+      >
+        {expanded ? 'Show Less' : 'Read More'}
+      </Button>
+    </Text>
+  );
+};
+
+export default ExpandableText;
diff --git a/src/components/GameAttributes.tsx b/src/components/GameAttributes.tsx
@@ -0,0 +1,35 @@
+import { SimpleGrid, Text } from '@chakra-ui/react';
+import Game from '../entities/Game';
+import CriticScore from './CriticScore';
+import DefinitionItem from './DefinitionItem';
+
+interface Props {
+  game: Game;
+}
+
+const GameAttributes = ({ game }: Props) => {
+  return (
+    <SimpleGrid columns={2} as="dl">
+      <DefinitionItem term="Platforms">
+        {game.parent_platforms?.map(({ platform }) => (
+          <Text key={platform.id}>{platform.name}</Text>
+        ))}
+      </DefinitionItem>
+      <DefinitionItem term="Metascore">
+        <CriticScore score={game.metacritic} />
+      </DefinitionItem>
+      <DefinitionItem term="Genres">
+        {game.genres.map((genre) => (
+          <Text key={genre.id}>{genre.name}</Text>
+        ))}
+      </DefinitionItem>
+      <DefinitionItem term="Publishers">
+        {game.publishers?.map((publisher) => (
+          <Text key={publisher.id}>{publisher.name}</Text>
+        ))}
+      </DefinitionItem>
+    </SimpleGrid>
+  );
+};
+
+export default GameAttributes;
diff --git a/src/components/GameCard.tsx b/src/components/GameCard.tsx
@@ -0,0 +1,41 @@
+import {
+  Card,
+  CardBody,
+  Heading,
+  HStack,
+  Image
+} from '@chakra-ui/react';
+import { Link } from 'react-router-dom';
+import Game from '../entities/Game';
+import getCroppedImageUrl from '../services/image-url';
+import CriticScore from './CriticScore';
+import Emoji from './Emoji';
+import PlatformIconList from './PlatformIconList';
+
+interface Props {
+  game: Game;
+}
+
+const GameCard = ({ game }: Props) => {
+  return (
+    <Card>
+      <Image src={getCroppedImageUrl(game.background_image)} />
+      <CardBody>
+        <HStack justifyContent="space-between" marginBottom={3}>
+          <PlatformIconList
+            platforms={game.parent_platforms?.map(
+              (p) => p.platform
+            )}
+          />
+          <CriticScore score={game.metacritic} />
+        </HStack>
+        <Heading fontSize="2xl">
+          <Link to={'/games/' + game.slug}>{game.name}</Link>
+          <Emoji rating={game.rating_top} />
+        </Heading>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default GameCard;
diff --git a/src/components/GameCardContainer.tsx b/src/components/GameCardContainer.tsx
@@ -0,0 +1,23 @@
+import { Box } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+const GameCardContainer = ({ children }: Props) => {
+  return (
+    <Box
+      _hover={{
+        transform: 'scale(1.03)',
+        transition: 'transform .15s ease-in'
+      }}
+      borderRadius={10}
+      overflow="hidden"
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default GameCardContainer;
diff --git a/src/components/GameCardSkeleton.tsx b/src/components/GameCardSkeleton.tsx
@@ -0,0 +1,14 @@
+import { Card, CardBody, Skeleton, SkeletonText } from '@chakra-ui/react'
+
+const GameCardSkeleton = () => {
+  return (
+    <Card>
+      <Skeleton height="200px" />
+      <CardBody>
+        <SkeletonText />
+      </CardBody>
+    </Card>
+  )
+}
+
+export default GameCardSkeleton