Server branch

README.md

@@ -1,49 +1,137 @@
-# [your app name here]
+# PlayPal
 
 CodePath WEB103 Final Project
 
-Designed and developed by: [your names here]
+Designed and developed by: [Abil Shrestha & Aashil Ahmad]
 
 🔗 Link to deployed app:
 
 ## About
 
+PlayPal is a web app tailored for avid gamers and casual players. It acts as your one-stop shop to uncover new games, receive personalized game suggestions, and stay current on the latest gaming news. With an intuitive interface, PlayPal simplifies exploring a universe of new gaming adventures.
+
 ### Description and Purpose
 
-[text goes here]
+The app features a robust database of games spanning all genres and platforms. Users can browse and search for games by title, genre, platform, and more. Staying current with the gaming world is a breeze with PlayPal. Peruse the latest gaming headlines, previews, and reviews. PlayPal takes the hassle out of game discovery. Its clean interface and wealth of gaming info empowers users to effortlessly find their next favorite game and connect with other gaming enthusiasts.
+
+The purpose of PlayPal is to be the go-to platform for gamers to discover new game titles to play. Key goals include:
+
+<ul>
+    <Li>Provide an extensive database of games across all platforms & genres to enable discovery</Li>
+    <Li>Offer powerful browsing, searching, and filtering to easily find games matching interests</Li>
+    <Li>Showcase key game details and metadata to learn about games before playing</Li>
+    <Li>Deliver personalized recommendations for new games based on past gameplay data</Li>
+    <Li>Keep users updated on news, releases, discussions, and trends in the gaming world</Li>
+    <Li>Cultivate an engaged community of gamers discussing games & recommendations</Li>
+    <Li>Continually expand and refine game database and discovery/recommendation features</Li>
+</ul>
 
 ### Inspiration
 
-[text goes here]
+Rawg.io
 
 ## Tech Stack
 
-Frontend:
+Frontend: ReactJs, Redux, Axios, Tailwind 
 
-Backend:
+Backend: Node.js, Express, Passport.js, Postgresql
 
 ## Features
 
-### [Name of Feature 1]
+### Use Passport.js for GitHub OAuth login to restrict profile and favorites pages to logged in users
+
+Allow users to login via GitHub OAuth using Passport.js to restrict access to profile and favorites pages. [gif goes here]
+
+[gif goes here]
+
+### PostgreSQL database with tables for games, platforms, genres, etc.
+
+Setup a PostgreSQL database with structured tables to store game data.
+
+[gif goes here]
+
+### Create RESTful API routes for games, platforms, and genres that support GET, POST, PATCH, and DELETE requests
+
+Implement REST API endpoints for CRUD operations on games, platforms, genres. [gif goes here]
+
+[gif goes here]
+
+### Validate game data entered in forms before creating/updating in database
+
+Validate game info entered by user before inserting or updating in the database.
+
+[gif goes here]
+
+### React Router for dynamic routing to pages like Home, Games, Genres, Platforms, etc.
+
+Use React Router to handle routing between app pages.
+
+[gif goes here]
+
+### Redirect user to Login page if not authenticated when trying to access profile
+
+Redirect to login page if user tries to access profile when unauthenticated.
+
+[gif goes here]
+
+### Break components into pages, containers, and presentational components
 
-[short description goes here]
+Organize components into pages, containers, and presentational components.
 
 [gif goes here]
 
-### [Name of Feature 2]
+### Use component hierarchy for clean structure and separation of concerns
 
-[short description goes here]
+Structure components hierarchically for clean code and separation of concerns.
 
 [gif goes here]
 
-### [Name of Feature 3]
+### Game search, filter, and sort functionality
 
-[short description goes here]
+Allow searching, filtering, and sorting the games list.
+
+[gif goes here]
+
+### Add a slide-out navigation pane for navigation links
+
+Implement slide out navigation drawer for navigation links. 
+
+[gif goes here]
+
+### Display toast notifications when games are favorited, deleted, added, etc.
+
+Show toast notifications when games are favorited, deleted, added, etc. 
+
+[gif goes here]
+
+### Show loading spinner for game images and other page elements while loading
+
+Display loading spinner for game images and page elements. 
+
+[gif goes here]
+
+### Disable action buttons while form is submitting to prevent duplicate submits
+
+Disable form buttons during submission to prevent duplicates.
+
+[gif goes here]
+
+### Display toast notifications when games are favorited, deleted, added, etc.
+
+Show toast notifications when games are favorited, deleted, added, etc.
 
 [gif goes here]
 
-### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them]
 
 ## Installation Instructions
 
-[instructions go here]
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:3000`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+
+

client/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+  },
+};

client/.gitignore

@@ -0,0 +1,24 @@
+# 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?

client/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true
+  }

client/README.md

@@ -0,0 +1,27 @@
+# React + TypeScript + Vite
+
+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](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+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:
+
+```js
+   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+   },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

client/components/NavBar.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import SearchBar from './SearchBar';
+
+const NavBar = () => {
+  return (
+    <div className="flex bg-black">
+      <Link to="/">
+        <img src='/logo2.png' alt="logo" />
+      </Link>
+      <SearchBar />
+    </div>
+  );
+};
+
+export default NavBar;

client/components/SearchBar.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { useRef } from "react";
+import { BsSearch } from "react-icons/bs";
+import { useNavigate } from "react-router-dom";
+import useGameQueryStore from "../src/store";
+
+const SearchBar = () => {
+  const ref = useRef<HTMLInputElement>(null);
+  const setSearchText = useGameQueryStore(s => s.setSearchText);
+  const navigate = useNavigate();
+
+  return (
+    <form onSubmit={(event) => {
+      event.preventDefault();
+      if (ref.current) {
+        setSearchText(ref.current.value);
+        navigate('/');
+      }
+    }}>
+      <div className="flex flex-row">
+            <div className="accent-white">
+                <BsSearch className="white"/>
+            </div>
+            <input
+                type="text"
+                className="w-full rounded-lg border border-gray-300 bg-white py-2 pl-10 pr-3 text-sm placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                placeholder="Search for games..."
+            />
+        </div>
+    </form>
+  );
+};
+
+export default SearchBar;

client/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>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

client/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "playpal",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
+    "react-router-dom": "^6.18.0",
+    "tailwindcss": "^3.3.5",
+    "zustand": "^4.4.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

client/pages/Layout.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import NavBar from '../components/NavBar';
+import { Outlet } from 'react-router-dom';
+
+const Layout = () => {
+  return (
+    <>
+      <NavBar />
+      <div className="p-5 bg-black">
+        <Outlet />
+      </div>
+    </>
+  );
+};
+
+export default Layout;