Sidebar

README.md

@@ -1,49 +1,112 @@
-# [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, Zustand , Axios, Tailwind
 
-Backend:
+Backend: Node.js, Express, Passport.js, Postgresql
 
 ## Features
 
-### [Name of Feature 1]
+### ✅PostgreSQL database with tables for games, platforms, genres, etc.
+
+Setup a PostgreSQL database with structured tables to store game data.
+
+<img src='./client/public/feature.gif' title='db setuo' width='' alt='Video Walkthrough' />
+
+### ✅Create RESTful API routes for games, platforms, and genres that support GET, POST, PATCH, and DELETE requests
+
+Only Game Routes completed currently! Still under development!
+<img src='./client/public/api.gif' title='api setup' width='' alt='Video Walkthrough' />
+
+### ✅Setup Frontend
+
+Sidebar and SearchBar done!
+<img src='./client/public/dt.gif' title='frontend setup' width='' alt='Video Walkthrough' />
+
+### ✅Create,Update,Delete Games
+
+CRUD functionality for games
+
+<img src='./client/public/Add_edit_delete.gif' title='CRUD Data' width='' alt='Video Walkthrough' />
+
+### ✅Alert User if impossible data is entered
+
+Validate game info entered by user before inserting or updating in the database.
+<img src='./client/public/Validate_data.gif' title='Validate Data' width='' alt='Video Walkthrough' />
+
+### ✅Data is fetched to the app using a Railway PostgreSQL database
+
+Data is Fetched from Railway PostgreSQL database
+<img src='./client/public/Data_from_Db.gif' title=' Data From Db' width='' alt='Video Walkthrough' />
+
+### ✅React Router for dynamic routing to pages like Home, Games, Genres, Platforms, etc.
+
+Use React Router to handle routing between app pages.
+
+<img src='./client/public/Dynamic Routes.gif' title='dynamic Router' width='' alt='Video Walkthrough' />
+
+### ✅Game search, filter, and sort functionality
+
+Allow searching, filtering, and sorting the games list.
+
+<img src='./client/public/Search and filter data.gif' title='Validate Data' width='' alt='Video Walkthrough' />
+
+### ✅Reset database functionality
+
+Reset databse to original state
+
+<img src='./client/public/Data_reset.gif' title='Validate Data' width='' alt='Video Walkthrough' />
 
-[short description goes here]
+### ✅Break components into pages, containers, and presentational components
 
-[gif goes here]
+Organize components into pages, containers, and presentational components.
 
-### [Name of Feature 2]
+<img src='./client/public/Component Heirarchy.gif' title='Organize components' width='' alt='Video Walkthrough' />
 
-[short description goes here]
+### ✅Use Passport.js for GitHub OAuth login
 
-[gif goes here]
+Allow users to login via GitHub OAuth using Passport.js to restrict access to profile.
+<img src='./client/public/login_logout.gif' title='Organize components' width='' alt='Login Logout' />
 
-### [Name of Feature 3]
+### ✅Redirect user to Login page if not authenticated when trying to access profile
 
-[short description goes here]
+Redirect to login page if user tries to access profile when unauthenticated.
 
-[gif goes here]
+<img src='./client/public/redirect.gif' title='Organize components' width='' alt='Redirec' />
 
-### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them]
+### ✅Well Designed API
 
-## Installation Instructions
+Setup a one to many relationship with Platforms and Genres.
 
-[instructions go here]
+<img src='./client/public/well_Api.gif' title='api setuo' width='' alt='Api Walkthrough' />

client/.eslintrc.cjs

@@ -0,0 +1,21 @@
+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",
+    "@typescript-eslint/ban-ts-comment": "off",
+  },
+};

client/.gitignore

@@ -0,0 +1,26 @@
+# 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?
+
+.env

client/.prettierrc.json

@@ -0,0 +1,20 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false, 
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false, 
+  "arrowParens": "always",
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "vueIndentScriptAndStyle": false, 
+  "endOfLine": "lf",
+  "embeddedLanguageFormatting": "auto" 
+}

client/README.md

@@ -0,0 +1 @@
+# PlayPal

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="/fav2.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PlayPal</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

client/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "playpal",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "npm cache clean --force && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "start": "npx http-server ./dist -a 0.0.0.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@tanstack/react-query": "^5.8.1",
+    "autoprefixer": "^10.4.16",
+    "axios": "^1.6.2",
+    "http-server": "14.1.1",
+    "minimatch": "^9.0.3",
+    "postcss": "^8.4.31",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-router-dom": "^6.18.0",
+    "react-toastify": "^9.1.3",
+    "serve": "^14.2.1",
+    "tailwindcss": "^3.3.5",
+    "zustand": "^4.4.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^4.1.1",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "prettier": "3.0.3",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0"
+  }
+}