├── .env ├── .eslintrc.json ├── .gitignore ├── README.md ├── components ├── CreatePost │ └── Form.js ├── Footer.js ├── Header.js ├── Home │ ├── GameList.js │ ├── Hero.js │ ├── PostItem.js │ ├── PostModal.js │ ├── Posts.js │ ├── Search.js │ └── UserInfo.js └── Toast.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── api │ ├── auth │ │ └── [...nextauth].js │ └── hello.js ├── create-post │ └── index.js ├── index.js └── profile │ └── index.js ├── postcss.config.js ├── public ├── Images │ ├── Badminton.png │ ├── CricketBall.png │ ├── PingPong.png │ ├── Puzzle.png │ ├── SoccerBall.png │ ├── Tennis.png │ ├── Trekking.png │ ├── favicon.ico │ ├── logo.png │ └── placeholder.jpg └── vercel.svg ├── shared ├── Data.js └── FirebaseConfig.js ├── styles ├── Home.module.css └── globals.css └── tailwind.config.js /.env: -------------------------------------------------------------------------------- 1 | GOOGLE_CLIENT_ID="887202519021-11851hl38v45bevdh1n29tqukd72h7gp.apps.googleusercontent.com" 2 | GOOGLE_CLIENT_SECRET="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" 3 | FIREBASe_API="AIzaSyDsVcT58u5fnibQqpN2sX_OEggbFp0bYqs" 4 | NEXTAUTH_URL="https://ninja-player-next-js.vercel.app" 5 | NEXTAUTH_SECRET="XiZCpzu5Ktc9iKf3xVF3xwap3wA5wolippGLKcYwMa0=" 6 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /components/CreatePost/Form.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Data from "../../shared/Data"; 3 | import { useSession } from "next-auth/react"; 4 | import app from "./../../shared/FirebaseConfig"; 5 | import { doc, getFirestore, setDoc } from "firebase/firestore"; 6 | import { getDownloadURL, getStorage, 7 | ref, uploadBytes } from "firebase/storage"; 8 | import Toast from "../Toast"; 9 | function Form() { 10 | const [inputs, setInputs] = useState({}); 11 | const [showToast, setShowToast] = useState(false); 12 | const [file, setFile] = useState(); 13 | const [submit, setSubmit] = useState(false); 14 | 15 | const { data: session } = useSession(); 16 | const db = getFirestore(app); 17 | const storage = getStorage(app); 18 | useEffect(() => { 19 | if (session) { 20 | setInputs((values) => ({ ...values, userName: session.user?.name })); 21 | setInputs((values) => ({ ...values, userImage: session.user?.image })); 22 | setInputs((values) => ({ ...values, email: session.user?.email })); 23 | } 24 | }, [session]); 25 | 26 | useEffect(()=>{ 27 | if(submit==true) 28 | { 29 | savePost(); 30 | } 31 | 32 | },[submit]) 33 | const handleChange = (e) => { 34 | const name = e.target.name; 35 | const value = e.target.value; 36 | setInputs((values) => ({ ...values, [name]: value })); 37 | }; 38 | const handleSubmit = async (e) => { 39 | e.preventDefault(); 40 | setShowToast(true); 41 | const storageRef = ref(storage, 'ninja-player/'+file?.name); 42 | uploadBytes(storageRef, file).then((snapshot) => { 43 | console.log('Uploaded a blob or file!'); 44 | }).then(resp=>{ 45 | getDownloadURL(storageRef).then(async(url)=>{ 46 | 47 | setInputs((values)=>({...values, 48 | image:url})); 49 | setSubmit(true); 50 | 51 | }) 52 | }) ; 53 | }; 54 | 55 | const savePost=async()=>{ 56 | await setDoc(doc(db, "posts", Date.now().toString()), inputs); 57 | } 58 | return ( 59 |
60 | {showToast ? ( 61 |
62 | setShowToast(false)} 65 | /> 66 |
67 | ) : null} 68 | 69 |
70 | 78 |