iiitv · kavyatripathi · Feb 20, 2021 · Feb 20, 2021 · Feb 20, 2021 · Feb 20, 2021
diff --git a/team16/.gitignore b/team16/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/team16/README.md b/team16/README.md
@@ -0,0 +1,47 @@
+## Project Theme 9 - Open Innovation 
+
+# Inferno - Gaming Website
+<br/>
+Inferno is like a library for the people for who like to know about the most popular games, get their ratings and reviews and even see their screenshots! 🤩<br/>
+Not only this they can also search for any game they wish to play and buy them from available play stores!<br/>
+We have implemented the above idea using the following public API : <br/>
+https://rawg.io/apidocs <br/>
+https://www.framer.com/api/motion/<br/>
+
+###                                                           A sneek peak 😉<br/>
+![Untitled_ Feb 21, 2021 11_56 PM](https://user-images.githubusercontent.com/48882133/108635207-3b1ac200-74a4-11eb-9f89-b7daeee36b3d.gif)
+<br/>
+
+Steps for setting up:<br/>
+- Fork the repo <br/>
+```
+git clone https://github.com/Tekk-Force/api-digest-2021.git
+cd api-digest-2021/team16
+npm install 
+npm start
+```
+
+## What will you see after you open the platform ?? <br/>
+
+## The homepage will have a list of all the new, upcoming and popular games. <br/>
+![Screenshot (217)](https://user-images.githubusercontent.com/48882133/108634989-a95e8500-74a2-11eb-8501-dca570934bef.png)
+
+
+## Wish to know more about a game ?<br/>
+
+## Just click on the card of your interest !<br/>
+![Screenshot (218)](https://user-images.githubusercontent.com/48882133/108635057-fcd0d300-74a2-11eb-8b7e-cb59271b2586.png)
+![Screenshot (219)](https://user-images.githubusercontent.com/48882133/108635059-ffcbc380-74a2-11eb-939c-41787d016d48.png)
+<br/>
+
+## Still can't find your pick ?<br/>
+
+## We have got a search option for you.. 😊<br/>
+![Screenshot (220)](https://user-images.githubusercontent.com/48882133/108635124-884a6400-74a3-11eb-8538-c23ddce41660.png)
+![Screenshot (221)](https://user-images.githubusercontent.com/48882133/108635125-8b455480-74a3-11eb-84df-f78049075b5d.png)
+
+
+## Also we have got a pretty decent performance after loading some huge pictures ! <br/>
+![Screenshot (222)](https://user-images.githubusercontent.com/48882133/108635189-145c8b80-74a4-11eb-805d-2d01649357a3.png)
+
+
diff --git a/team16/package-lock.json b/team16/package-lock.json
diff --git a/team16/package.json b/team16/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "inferno",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.7.1",
+    "axios": "^0.21.1",
+    "framer-motion": "^3.6.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.2",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
+    "styled-components": "^5.2.1",
+    "web-vitals": "^1.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/team16/public/favicon.ico b/team16/public/favicon.ico
diff --git a/team16/public/index.html b/team16/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="../src/img/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="Inferno"
+      content="Inferno - Game Search Engine"
+    />
+    <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="apple-touch-icon" href="../src/img/logo.svg" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Inferno</title>
+  </head>
+  <body>
+    <noscript>Game Search Engine</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/team16/public/inferno.png b/team16/public/inferno.png
diff --git a/team16/public/logo192.png b/team16/public/logo192.png
diff --git a/team16/public/logo512.png b/team16/public/logo512.png
diff --git a/team16/public/manifest.json b/team16/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "Inferno",
+  "name": "Inferno - Game Search Engine",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/team16/public/robots.txt b/team16/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/team16/src/App.js b/team16/src/App.js
@@ -0,0 +1,23 @@
+import React from "react";
+//Components and Pages
+import Home from "./pages/Home";
+import GlobalStyles from "./components/GlobalStyles";
+import { Route } from "react-router-dom";
+import Nav from './components/Nav';
+import Footer from './Footer';
+function App() {
+
+  return (
+    <div className="App">
+      <GlobalStyles />
+      <Nav />
+      <Route path={["/game/:id", "/"]}>
+        <Home/>
+      </Route>
+      <Footer/>
+    </div>
+
+  );
+}
+
+export default App;
diff --git a/team16/src/Footer.js b/team16/src/Footer.js
@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import { motion } from "framer-motion";
+
+const Footer = () => {
+    return (
+        <footer>
+            <h4>Made with ❤️ by Tekk Force</h4>
+        </footer>
+    );
+};
+const footer = styled(motion.div)`
+  display: flex;
+  justify-content: center;
+  padding-top: 5rem;
+  cursor: pointer;
+  `;
+  export default Footer;
diff --git a/team16/src/actions/detailAction.js b/team16/src/actions/detailAction.js
@@ -0,0 +1,20 @@
+import axios from 'axios';
+import { gameDetailsURL, gameScreenshotURL } from '../api';
+
+export const loadDetail = (id) => async (dispatch) => {
+
+    dispatch({
+        type: 'LOADING_DETAIL',
+    });
+
+    const detailData = await axios.get(gameDetailsURL(id));
+    const screenShotData = await axios.get(gameScreenshotURL(id));
+
+    dispatch ({
+        type: "GET_DETAIL",
+        payload: {
+            game: detailData.data,
+            screen: screenShotData.data,
+        },
+    });
+};
diff --git a/team16/src/actions/gamesAction.js b/team16/src/actions/gamesAction.js
@@ -0,0 +1,35 @@
+import axios from "axios";
+import { 
+  popularGamesURL, 
+  upcomingGamesURL, 
+  newGamesURL,  
+  searchGameURL,
+} from "../api";
+
+//Action Creator
+
+export const loadGames = () => async (dispatch) => {
+  //FETCH AXIOS
+  const popularData = await axios.get(popularGamesURL());
+  const newGamesData = await axios.get(newGamesURL());
+  const upcomingData = await axios.get(upcomingGamesURL());
+  dispatch({
+    type: "FETCH_GAMES",
+    payload: {
+      popular: popularData.data.results,
+      upcoming: upcomingData.data.results,
+      newGames: newGamesData.data.results,
+    },
+  });
+};
+
+export const fetchSearch = (game_name) => async (dispatch) => {
+  const searchGames = await axios.get(searchGameURL(game_name));
+
+  dispatch({
+    type: "FETCH_SEARCHED",
+    payload: {
+      searched: searchGames.data.results,
+    },
+  });
+};
diff --git a/team16/src/animations.js b/team16/src/animations.js
@@ -0,0 +1,33 @@
+export const fadeIn = {
+    hidden: {
+      opacity: 0,
+    },
+    show: {
+      opacity: 1,
+      transition: {
+        duration: 0.75,
+      },
+      exit: {
+        opacity: 0,
+        transition: { duration: 0.75 },
+      },
+    },
+  };
+
+  export const popup = {
+    hidden: {
+      opacity: 0,
+      scale: 0.5,
+    },
+    show: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        duration: 0.75,
+      },
+      exit: {
+        opacity: 0,
+        transition: { duration: 0.75 },
+      },
+    },
+  };
diff --git a/team16/src/api.js b/team16/src/api.js
@@ -0,0 +1,48 @@
+//Base URL
+const base_url = "https://api.rawg.io/api/";
+//Getting the date
+const getCurrentMonth = () => {
+  const month = new Date().getMonth() + 1;
+  if (month < 10) {
+    return `0${month}`;
+  } else {
+    return month;
+  }
+};
+
+//Getting the date
+const getCurrentDay = () => {
+  const day = new Date().getDate();
+  if (day < 10) {
+    return `0${day}`;
+  } else {
+    return day;
+  }
+};
+
+//Current day/month/year
+const currentYear = new Date().getFullYear();
+const currentMonth = getCurrentMonth();
+const currentDay = getCurrentDay();
+const currentDate = `${currentYear}-${currentMonth}-${currentDay}`;
+const lastYear = `${currentYear - 1}-${currentMonth}-${currentDay}`;
+const nextYear = `${currentYear + 1}-${currentMonth}-${currentDay}`;
+
+//Popular Games
+const popular_games = `games?dates=${lastYear},${currentDate}&ordering=-rating&page_size=6`;
+const upcoming_games = `games?dates=${currentDate},${nextYear}&ordering=-added&page_size=6`;
+const newGames = `games?dates=${lastYear},${currentDate}&ordering=-released&page_size=6`;
+
+export const popularGamesURL = () => `${base_url}${popular_games}`;
+export const upcomingGamesURL = () => `${base_url}${upcoming_games}`;
+export const newGamesURL = () => `${base_url}${newGames}`;
+
+//Game Details
+export const gameDetailsURL = (game_id) => `${base_url}games/${game_id}`;
+export const gameScreenshotURL = (game_id) => 
+  `${base_url}games/${game_id}/screenshots`;
+// export const gameVideosURL = (game_id) => `${base_url}games/${}`;
+
+  //Searched game
+export const searchGameURL = (game_name) =>
+  `${base_url}games?search=${game_name}&page_size=9`;