├── .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 |     <div className="mt-4">
 60 |       {showToast ? (
 61 |         <div className="absolute top-10 right-10">
 62 |           <Toast
 63 |             msg={"Post Created Successfully"}
 64 |             closeToast={() => setShowToast(false)}
 65 |           />
 66 |         </div>
 67 |       ) : null}
 68 | 
 69 |       <form onSubmit={handleSubmit}>
 70 |         <input
 71 |           type="text"
 72 |           name="title"
 73 |           placeholder="Title"
 74 |           required
 75 |           onChange={handleChange}
 76 |           className="w-full mb-4 border-[1px] p-2 rounded-md"
 77 |         />
 78 |         <textarea
 79 |           name="desc"
 80 |           className="w-full mb-4 
 81 |         outline-blue-400 border-[1px] 
 82 |         p-2 rounded-md"
 83 |           required
 84 |           onChange={handleChange}
 85 |           placeholder="Write Description here"
 86 |         />
 87 | 
 88 |         <input
 89 |           type="date"
 90 |           name="date"
 91 |           required
 92 |           onChange={handleChange}
 93 |           className="w-full mb-4 border-[1px] p-2 rounded-md"
 94 |         />
 95 |         <input
 96 |           type="text"
 97 |           placeholder="Location"
 98 |           name="location"
 99 |           required
100 |           onChange={handleChange}
101 |           className="w-full mb-4 border-[1px] p-2 rounded-md"
102 |         />
103 |         <input
104 |           type="text"
105 |           placeholder="Zip"
106 |           name="zip"
107 |           required
108 |           onChange={handleChange}
109 |           className="w-full mb-4 border-[1px] p-2 rounded-md"
110 |         />
111 |         <select
112 |           name="game"
113 |           onChange={handleChange}
114 |           required
115 |           className="w-full mb-4 border-[1px] p-2 rounded-md"
116 |         >
117 |           <option disabled defaultValue>
118 |             Select Game
119 |           </option>
120 |           {Data.GameList.map((item) => (
121 |             <option key={item.id}>{item.name}</option>
122 |           ))}
123 |         </select>
124 |         <input
125 |           type="file"
126 |           onChange={(e)=>setFile(e.target.files[0])}
127 |           accept="image/gif, image/jpeg, image/png"
128 |           className="mb-5 border-[1px] w-full"
129 |         />
130 |         <button
131 |           type="submit"
132 |           className="bg-blue-500 w-full p-1 
133 | rounded-md text-white"
134 |         >
135 |           Submit
136 |         </button>
137 |       </form>
138 |     </div>
139 |   );
140 | }
141 | 
142 | export default Form;
143 | 


--------------------------------------------------------------------------------
/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | function Footer() {
4 |   return (
5 |     <div></div>
6 |   )
7 | }
8 | 
9 | export default Footer


--------------------------------------------------------------------------------
/components/Header.js:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image'
 2 | import React from 'react'
 3 | import { useSession, signIn, signOut } from "next-auth/react"
 4 | import { HiOutlinePencilSquare,HiArrowLeftOnRectangle } from "react-icons/hi2";
 5 | import { useRouter } from 'next/router';
 6 | const USER_IMAGE='https://res.cloudinary.com/dknvsbuyy/image/upload/v1686314044/1617826370281_30f9a2a96a.jpg'
 7 | function Header() {
 8 |   const router=useRouter();
 9 |   const { data: session } = useSession();
10 |   console.log("Session",session)
11 |   return (
12 |     <div className='flex justify-between p-3 border-b-[2px]
13 |     border-[#FF3366]'>
14 |         <img src="./Images/logo.png" 
15 |         width={120}
16 |         alt='ninja player logo'
17 |         className='cursor-pointer'
18 |         onClick={()=>router.push('/')}
19 |         />
20 |         <div className='flex gap-4'>
21 |             <button onClick={()=>router.push('/create-post')} className='bg-black p-1 px-3
22 |              text-white rounded-full text-[12px]'>
23 |                 <span className='hidden sm:block'>
24 |                     CREATE POST</span> 
25 |                     <HiOutlinePencilSquare 
26 |                     className='sm:hidden text-[17px]' /></button>
27 |             {!session?<button className='bg-white
28 |              text-gray-500 p-1 px-3 text-[12px] border-[1px]
29 |              rounded-full' onClick={()=>signIn()}>
30 |                 <span className='hidden sm:block'>
31 |                     SIGN IN</span>
32 |                 <HiArrowLeftOnRectangle
33 |                  className='sm:hidden text-[17px]' /></button>
34 |                  :<button className='bg-white
35 |                  text-gray-500 p-1 px-3 text-[12px] border-[1px]
36 |                  rounded-full' onClick={()=>signOut()}>
37 |                     <span className='hidden sm:block'>
38 |                         SIGN OUT</span>
39 |                     <HiArrowLeftOnRectangle
40 |                      className='sm:hidden text-[17px]' /></button>}
41 |        {session?  
42 |        <Image src={session?session?.user?.image:USER_IMAGE} alt='user image'
43 |         className='rounded-full cursor-pointer' onClick={()=>router.push('/profile')}
44 |         width={40} height={40} />:null}
45 |         </div>
46 |       
47 |     </div>
48 |   )
49 | }
50 | 
51 | export default Header


--------------------------------------------------------------------------------
/components/Home/GameList.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react'
 2 | import Data from './../../shared/Data'
 3 | function GameList({onGamePress}) {
 4 |     const [games,setGames]=useState();
 5 |     useEffect(()=>{
 6 |        setGames(Data.GameList) 
 7 |     },[])
 8 |   return (
 9 |     <div className='grid grid-cols-3 sm:grid-cols-4
10 |     md:grid-cols-5 lg:grid-cols-7 mt-4'>
11 |         {games?.map((item)=>(
12 |             <div key={item.id}
13 |               onClick={()=>onGamePress(item.name)}
14 |             className='flex flex-col 
15 |             items-center cursor-pointer
16 |             '>
17 |                 <img src={item.image} 
18 |                 width={45} height={45} 
19 |                 className='hover:animate-bounce transition-all 
20 |                 duration-150'/>
21 |                 <h2 className='text-[14px] text-center'>{item.name}</h2>
22 |             </div>
23 |         ))}
24 |     </div>
25 |   )
26 | }
27 | 
28 | export default GameList


--------------------------------------------------------------------------------
/components/Home/Hero.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Hero() {
 4 |   return (
 5 |     <div className='text-center'>
 6 |         <h1 className='text-[35px] font-extrabold text-center'>
 7 |             Find & Discover Players 
 8 |             <br></br><span className='text-blue-500'>Near You</span></h1>
 9 |         
10 |         <h2 className='text-gray-500 px-8 md:px-16'>Best Free Website to find and Discover game
11 |  partner/player near you for your fav game</h2>
12 | 
13 |     </div>
14 |   )
15 | }
16 | 
17 | export default Hero


--------------------------------------------------------------------------------
/components/Home/PostItem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { HiOutlineLocationMarker,HiOutlineCalendar } from "react-icons/hi";
 3 | import UserInfo from './UserInfo';
 4 | const PLACEHOLDER='./Images/placeholder.jpg'
 5 | function PostItem({post,modal=false}) {
 6 |   return (
 7 |    <>
 8 | {post?
 9 |   <div className="max-w-sm bg-white border
10 |  border-gray-200 rounded-lg shadow cursor-pointer
11 |   dark:bg-gray-800 dark:border-gray-700 ">
12 |     
13 |         <img className="rounded-t-lg 
14 |         w-full h-[180px] object-cover" 
15 |         src={post.image?post.image:PLACEHOLDER}
16 |          alt="banner" />
17 |    
18 |     <div className="p-5">
19 |        
20 |     <h5 className="mb-2 text-xl 
21 |     font-bold tracking-tight 
22 |     text-gray-900 dark:text-white">
23 |       {post.title}
24 |       </h5>
25 |       <div className='flex items-center text-orange-500 gap-2 mb-2'>
26 |         <HiOutlineCalendar className='text-[20px]'/>
27 |         {post.date}
28 |       </div>
29 |       <div className='flex items-center 
30 |       text-blue-500 gap-2 mb-2'>
31 |         <HiOutlineLocationMarker className='text-[20px]'/>
32 |         {post.location}
33 |       </div>
34 |         <p className="mb-3 font-normal
35 |          text-gray-700 
36 |          dark:text-gray-400">
37 |           {post.desc}</p>
38 | 
39 |       {!modal? <UserInfo user={post} />:null}
40 |       {modal? 
41 |      <div>
42 |       <a href="#" className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
43 |             Read more
44 |             <svg aria-hidden="true" className="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" ></path></svg>
45 |       </a>
46 |         </div>
47 |         :null}
48 |     </div>
49 | </div>:null}
50 | </> 
51 |   )
52 | }
53 | 
54 | export default PostItem


--------------------------------------------------------------------------------
/components/Home/PostModal.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PostItem from './PostItem'
 3 | import { HiOutlineXCircle } from 'react-icons/hi'
 4 | 
 5 | function PostModal({post}) {
 6 |   return (
 7 |     <div>
 8 | 
 9 | <dialog id="my_modal_1" className="modal p-0 rounded-lg">
10 |   <form method="dialog" className="modal-box">
11 |   <button className='absolute right-2 top-2'>
12 |         <HiOutlineXCircle className='text-[22px] text-white'/>
13 |     </button>
14 |     <PostItem post={post} />
15 |   </form>
16 | </dialog>
17 |     </div>
18 |   )
19 | }
20 | 
21 | export default PostModal


--------------------------------------------------------------------------------
/components/Home/Posts.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import PostItem from "./PostItem";
 3 | import PostModal from "./PostModal";
 4 | 
 5 | function Posts({ posts }) {
 6 |   const [post,setPost]=useState()
 7 |   useEffect(() => {
 8 |     console.log("Posts", posts);
 9 |   });
10 |   return (
11 |     <div>
12 |       <PostModal post={post} />
13 |       <div
14 |         className="grid grid-cols-1 
15 |     sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4
16 |     gap-5 mt-5 px-10"
17 |      >
18 |         {posts.map((item,index) => (
19 |           <div key={index} onClick={()=>
20 |           {window.my_modal_1.showModal();setPost(item)}}>
21 |           <PostItem post={item} modal={true} />
22 |           </div>
23 |         ))}
24 |       </div>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default Posts;
30 | 


--------------------------------------------------------------------------------
/components/Home/Search.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | 
 3 | function Search() {
 4 |     const [searchText,setSearchText]=useState();
 5 |     const onSearchButtonClick=()=>{
 6 |         console.log("Search Text:",searchText)
 7 |     }
 8 |     return (
 9 |     <div className='mt-7'>
10 |         <label  className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
11 |     <div className="relative">
12 |         <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
13 |             <svg aria-hidden="true" className="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none"
14 |              stroke="currentColor" 
15 |              viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
16 |                 <path 
17 |                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
18 |         </div>
19 |         <input type="search" 
20 |         onChange={(text)=>setSearchText(text.target.value)}
21 |         id="default-search" className="block w-full p-4 pl-10 text-sm
22 |          text-gray-900 border 
23 |          border-gray-300 rounded-lg
24 |           bg-gray-50 focus:ring-blue-500
25 |            focus:border-blue-500 
26 |            dark:bg-gray-700
27 |             dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
28 |             placeholder="Search with ZipCode" required/>
29 |         <button type="submit" onClick={()=>onSearchButtonClick()}
30 |          className="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button>
31 |     </div>
32 |     </div>
33 |   )
34 | }
35 | 
36 | export default Search


--------------------------------------------------------------------------------
/components/Home/UserInfo.js:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image'
 2 | import React from 'react'
 3 | 
 4 | function UserInfo({user}) {
 5 |     console.log(user)
 6 |   return (
 7 |     <div>
 8 |          <p className='font-bold'>Posted By :</p>
 9 |    
10 |     <div className='flex gap-2 items-center mb-3 mt-2'>
11 |        
12 |       {user?.userImage?  <Image src={user?.userImage} alt='user-image'
13 |          width={40} height={40} className='rounded-full' />:null}
14 |          <div>
15 |             <h2 className='text-[14px] font-medium'>{user?.userName}</h2>
16 |             <h2 className='text-[14px] font-light'>{user?.email}</h2>
17 | 
18 |          </div>
19 |          </div>
20 |     </div>
21 |   )
22 | }
23 | 
24 | export default UserInfo


--------------------------------------------------------------------------------
/components/Toast.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { HiOutlineXCircle } from 'react-icons/hi'
 3 | 
 4 | function Toast({msg='',closeToast}) {
 5 |   return (
 6 |     <div className='duration-500 transition-all
 7 |      ease-in-out bg-[#36d399] 
 8 |      justify-between flex
 9 |       items-center p-4 rounded-md '>
10 |        
11 |         <h2>{msg}</h2>
12 |         <button className='' onClick={closeToast}>
13 |         <HiOutlineXCircle 
14 |         className='text-[22px] ml-5 text-white'/>
15 |         </button>
16 | 
17 |     </div>
18 |   )
19 | }
20 | 
21 | export default Toast


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: false,
 4 |   swcMinify: true,
 5 |   images:{
 6 |     domains:['res.cloudinary.com','lh3.googleusercontent.com',
 7 |   'firebasestorage.googleapis.com']
 8 |   }
 9 | }
10 | 
11 | module.exports = nextConfig
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ninja-player",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "firebase": "^9.22.2",
13 |     "next": "13.4.5",
14 |     "next-auth": "^4.22.1",
15 |     "react": "18.2.0",
16 |     "react-dom": "18.2.0",
17 |     "react-icons": "^4.9.0"
18 |   },
19 |   "devDependencies": {
20 |     "autoprefixer": "^10.4.14",
21 |     "daisyui": "^3.1.0",
22 |     "eslint": "8.42.0",
23 |     "eslint-config-next": "13.4.5",
24 |     "postcss": "^8.4.24",
25 |     "tailwindcss": "^3.3.2"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import Footer from '../components/Footer'
 2 | import Header from '../components/Header'
 3 | import '../styles/globals.css'
 4 | import { SessionProvider } from "next-auth/react"
 5 | function MyApp({ Component,  
 6 |   pageProps: { session, ...pageProps } }) {
 7 |   return (
 8 |     <div>
 9 |        <SessionProvider session={session}>
10 |   <Header/>
11 |   <Component {...pageProps} />
12 |   <Footer/>
13 |   </SessionProvider>
14 |   </div>
15 |   )
16 | }
17 | 
18 | export default MyApp
19 | 


--------------------------------------------------------------------------------
/pages/api/auth/[...nextauth].js:
--------------------------------------------------------------------------------
 1 | import NextAuth from "next-auth"
 2 | import GoogleProvider from "next-auth/providers/google";
 3 | 
 4 | export const authOptions = {
 5 |   // Configure one or more authentication providers
 6 |   providers: [
 7 |     GoogleProvider({
 8 |         clientId: process.env.GOOGLE_CLIENT_ID,
 9 |         clientSecret: process.env.GOOGLE_CLIENT_SECRET
10 |       })
11 |   ],
12 |   secret: process.env.NEXTAUTH_SECRET
13 | }
14 | 
15 | export default NextAuth(authOptions)


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/create-post/index.js:
--------------------------------------------------------------------------------
 1 | import { useSession } from 'next-auth/react';
 2 | import { useRouter } from 'next/router';
 3 | import React, { useEffect } from 'react'
 4 | import Form from '../../components/CreatePost/Form';
 5 | 
 6 | function CreatePost() {
 7 |   const {data:session}=useSession();
 8 |   const router=useRouter();
 9 |   useEffect(()=>{
10 |     if(!session)
11 |     {
12 |         router.push('/')
13 |     }
14 |   },[]);
15 |   
16 |   return (
17 |     <div className='flex justify-center'>
18 |     <div className='p-6 mt-8 lg:w-[35%] md:w-[50%]'>
19 |         <h2 className='text-[30px] 
20 |         font-extrabold text-blue-500'>CREATE POST</h2>
21 |         <p>Create Post and Discover/Invite new Friends and Player </p>
22 |         <Form/>
23 |     </div>
24 |     </div>
25 |   )
26 | }
27 | 
28 | export default CreatePost


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import Image from 'next/image'
 3 | import styles from '../styles/Home.module.css'
 4 | import Hero from '../components/Home/Hero'
 5 | import Search from '../components/Home/Search'
 6 | import GameList from '../components/Home/GameList'
 7 | import Posts from '../components/Home/Posts'
 8 | import app from '../shared/FirebaseConfig'
 9 | import { getFirestore, doc, setDoc, getDoc, 
10 |   collection, getDocs, query, where } from "firebase/firestore";
11 | import { useEffect, useState } from 'react'
12 | export default function Home() {
13 | 
14 |   const db=getFirestore(app);
15 |   const [posts,setPosts]=useState([])
16 |   useEffect(()=>{
17 |     getPost();
18 |   },[])
19 | 
20 |   const getPost=async()=>{
21 |     const querySnapshot = await getDocs(collection(db, "posts"));
22 |     querySnapshot.forEach((doc) => {
23 |     
24 |    setPosts(posts=>[...posts,doc.data()]);
25 | });
26 |   }
27 | 
28 |   const onGamePress=async(gameName)=>{
29 |     setPosts([]);
30 |     if(gameName=='Other Games')
31 |     {
32 |       getPost();
33 |       return ;
34 |     }
35 |     const q=query(collection(db,"posts"),
36 |     where("game","==",gameName));
37 |     const querySnapshot = await getDocs(q);
38 |     querySnapshot.forEach((doc) => {
39 |       let data=doc.data();
40 |       data.id=doc.id
41 |       setPosts(posts=>[...posts,doc.data()]);
42 |    
43 | });
44 |   }
45 |   
46 |   return (
47 |     <div className='flex flex-col items-center 
48 |     justify-center mt-9'>
49 |       <div className='w-[70%] md:w-[50%] lg:w-[55%]'>
50 |       <Hero/>
51 |         <Search/>
52 |         <GameList onGamePress={onGamePress}/>
53 |       
54 |       </div>
55 |       {posts? <Posts posts={posts}/>:null}
56 |        
57 |     </div>
58 |   )
59 | }
60 | 


--------------------------------------------------------------------------------
/pages/profile/index.js:
--------------------------------------------------------------------------------
 1 | import { useSession } from 'next-auth/react'
 2 | import React, { useEffect, useState } from 'react'
 3 | import app from '../../shared/FirebaseConfig';
 4 | import { collection, deleteDoc, doc, getDocs, 
 5 |   getFirestore, query, where } from 'firebase/firestore';
 6 | import PostItem from '../../components/Home/PostItem';
 7 | import Toast from '../../components/Toast';
 8 | 
 9 | function Profile() {
10 |   const {data:session}=useSession();
11 |   const [userPost,setUserPost]=useState([]);
12 |   const db = getFirestore(app);
13 |   const [showToast,setShowToast]=useState(false)
14 |   useEffect(()=>{
15 |     getUserPost();
16 |   },[session,showToast]);
17 | 
18 |   const getUserPost=async()=>{
19 |     setUserPost([])
20 |     if(session?.user.email)
21 |     {
22 |     const q=query(collection(db,"posts"),
23 |     where("email","==",session?.user.email));
24 |     const querySnapshot = await getDocs(q);
25 |     querySnapshot.forEach((doc) => {
26 |       let data=doc.data();
27 |       data.id=doc.id
28 |       setUserPost(userPost=>[...userPost,data]);
29 |    
30 | });
31 |     }
32 |   }
33 | 
34 |   const onDeletePost=async(id)=>{
35 |     await deleteDoc(doc(db, "posts", id));
36 |     setShowToast(true)
37 |     window.location.reload();
38 |   }
39 |   return (
40 |     <div className='p-6 mt-8'>
41 |        {showToast ? (
42 |         <div className="absolute top-10 right-10">
43 |           <Toast
44 |             msg={"Post Deleted Successfully"}
45 |             closeToast={() => setShowToast(false)}
46 |           />
47 |         </div>
48 |       ) : null}
49 |       <h2 className='text-[35px] 
50 |       font-extrabold text-blue-500'>Profile</h2>
51 |     <p>Manage Your Post</p>
52 |     <div  className="grid grid-cols-1 
53 |     sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4
54 |     gap-5 mt-5 px-10">
55 |       {userPost&&userPost?.map((item,index)=>(
56 |         <div key={index}>
57 |         <PostItem post={item} modal={true} />
58 |         <button className='bg-red-400 w-full p-1 mt-1
59 |         rounded-md text-white' 
60 |        onClick={()=>onDeletePost(item.id)}>Delete</button>
61 |         </div>
62 |       ))}
63 |      
64 |     </div>
65 |     </div>
66 |   )
67 | }
68 | 
69 | export default Profile


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/Images/Badminton.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/ninja-player-next-js/06b1a8a2ccd7413c603164e931a534748144ef11/public/Images/Badminton.png


--------------------------------------------------------------------------------
/public/Images/CricketBall.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/ninja-player-next-js/06b1a8a2ccd7413c603164e931a534748144ef11/public/Images/CricketBall.png


--------------------------------------------------------------------------------
/public/Images/PingPong.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/ninja-player-next-js/06b1a8a2ccd7413c603164e931a534748144ef11/public/Images/PingPong.png


--------------------------------------------------------------------------------
/public/Images/Puzzle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/ninja-player-next-js/06b1a8a2ccd7413c603164e931a534748144ef11/public/Images/Puzzle.png


--------------------------------------------------------------------------------
/public/Images/SoccerBall.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/ninja-player-next-js/06b1a8a2ccd7413c603164e931a534748144ef11/public/Images/SoccerBall.png


--------------------------------------------------------------------------------
/public/Images/Tennis.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/ninja-player-next-js/06b1a8a2ccd7413c603164e931a534748144ef11/public/Images/Tennis.png


--------------------------------------------------------------------------------
/public/Images/Trekking.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/ninja-player-next-js/06b1a8a2ccd7413c603164e931a534748144ef11/public/Images/Trekking.png


--------------------------------------------------------------------------------
/public/Images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/ninja-player-next-js/06b1a8a2ccd7413c603164e931a534748144ef11/public/Images/favicon.ico


--------------------------------------------------------------------------------
/public/Images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/ninja-player-next-js/06b1a8a2ccd7413c603164e931a534748144ef11/public/Images/logo.png


--------------------------------------------------------------------------------
/public/Images/placeholder.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/ninja-player-next-js/06b1a8a2ccd7413c603164e931a534748144ef11/public/Images/placeholder.jpg


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/shared/Data.js:
--------------------------------------------------------------------------------
 1 | const GameList=[
 2 |     {
 3 |         id:1,
 4 |         name:'Cricket',
 5 |         image:'./Images/CricketBall.png'
 6 |     },
 7 |     {
 8 |         id:2,
 9 |         name:'Tennis',
10 |         image:'./Images/Tennis.png'
11 |     },
12 |     {
13 |         id:3,
14 |         name:'Ping Pong',
15 |         image:'./Images/PingPong.png'
16 |     },
17 |     {
18 |         id:4,
19 |         name:'Soccer',
20 |         image:'./Images/SoccerBall.png'
21 |     },
22 |     {
23 |         id:5,
24 |         name:'Badminton',
25 |         image:'./Images/Badminton.png'
26 |     },
27 |     {
28 |         id:6,
29 |         name:'Trekking',
30 |         image:'./Images/Trekking.png'
31 |     },
32 |     {
33 |         id:7,
34 |         name:'Other Games',
35 |         image:'./Images/Puzzle.png'
36 |     },
37 | 
38 | 
39 | ]
40 | 
41 | export default{
42 |     GameList
43 | } 


--------------------------------------------------------------------------------
/shared/FirebaseConfig.js:
--------------------------------------------------------------------------------
 1 | // Import the functions you need from the SDKs you need
 2 | import { initializeApp } from "firebase/app";
 3 | import { getAnalytics } from "firebase/analytics";
 4 | // TODO: Add SDKs for Firebase products that you want to use
 5 | // https://firebase.google.com/docs/web/setup#available-libraries
 6 | 
 7 | // Your web app's Firebase configuration
 8 | // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 9 | const firebaseConfig = {
10 |   apiKey: process.env.FIREBASe_API,
11 |   authDomain: "tubeguruji-app.firebaseapp.com",
12 |   projectId: "tubeguruji-app",
13 |   storageBucket: "tubeguruji-app.appspot.com",
14 |   messagingSenderId: "887202519021",
15 |   appId: "1:887202519021:web:ff749f4e57cc4d71f979e4",
16 |   measurementId: "G-VWXME24XJP"
17 | };
18 | 
19 | // Initialize Firebase
20 | const app = initializeApp(firebaseConfig);
21 | export default app;
22 | // const analytics = getAnalytics(app);


--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
  1 | .container {
  2 |   padding: 0 2rem;
  3 | }
  4 | 
  5 | .main {
  6 |   min-height: 100vh;
  7 |   padding: 4rem 0;
  8 |   flex: 1;
  9 |   display: flex;
 10 |   flex-direction: column;
 11 |   justify-content: center;
 12 |   align-items: center;
 13 | }
 14 | 
 15 | .footer {
 16 |   display: flex;
 17 |   flex: 1;
 18 |   padding: 2rem 0;
 19 |   border-top: 1px solid #eaeaea;
 20 |   justify-content: center;
 21 |   align-items: center;
 22 | }
 23 | 
 24 | .footer a {
 25 |   display: flex;
 26 |   justify-content: center;
 27 |   align-items: center;
 28 |   flex-grow: 1;
 29 | }
 30 | 
 31 | .title a {
 32 |   color: #0070f3;
 33 |   text-decoration: none;
 34 | }
 35 | 
 36 | .title a:hover,
 37 | .title a:focus,
 38 | .title a:active {
 39 |   text-decoration: underline;
 40 | }
 41 | 
 42 | .title {
 43 |   margin: 0;
 44 |   line-height: 1.15;
 45 |   font-size: 4rem;
 46 | }
 47 | 
 48 | .title,
 49 | .description {
 50 |   text-align: center;
 51 | }
 52 | 
 53 | .description {
 54 |   margin: 4rem 0;
 55 |   line-height: 1.5;
 56 |   font-size: 1.5rem;
 57 | }
 58 | 
 59 | .code {
 60 |   background: #fafafa;
 61 |   border-radius: 5px;
 62 |   padding: 0.75rem;
 63 |   font-size: 1.1rem;
 64 |   font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 65 |     Bitstream Vera Sans Mono, Courier New, monospace;
 66 | }
 67 | 
 68 | .grid {
 69 |   display: flex;
 70 |   align-items: center;
 71 |   justify-content: center;
 72 |   flex-wrap: wrap;
 73 |   max-width: 800px;
 74 | }
 75 | 
 76 | .card {
 77 |   margin: 1rem;
 78 |   padding: 1.5rem;
 79 |   text-align: left;
 80 |   color: inherit;
 81 |   text-decoration: none;
 82 |   border: 1px solid #eaeaea;
 83 |   border-radius: 10px;
 84 |   transition: color 0.15s ease, border-color 0.15s ease;
 85 |   max-width: 300px;
 86 | }
 87 | 
 88 | .card:hover,
 89 | .card:focus,
 90 | .card:active {
 91 |   color: #0070f3;
 92 |   border-color: #0070f3;
 93 | }
 94 | 
 95 | .card h2 {
 96 |   margin: 0 0 1rem 0;
 97 |   font-size: 1.5rem;
 98 | }
 99 | 
100 | .card p {
101 |   margin: 0;
102 |   font-size: 1.25rem;
103 |   line-height: 1.5;
104 | }
105 | 
106 | .logo {
107 |   height: 1em;
108 |   margin-left: 0.5rem;
109 | }
110 | 
111 | @media (max-width: 600px) {
112 |   .grid {
113 |     width: 100%;
114 |     flex-direction: column;
115 |   }
116 | }
117 | 
118 | @media (prefers-color-scheme: dark) {
119 |   .card,
120 |   .footer {
121 |     border-color: #222;
122 |   }
123 |   .code {
124 |     background: #111;
125 |   }
126 |   .logo img {
127 |     filter: invert(1);
128 |   }
129 | }
130 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | html,
 5 | body {
 6 |   padding: 0;
 7 |   margin: 0;
 8 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 9 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
10 | }
11 | 
12 | a {
13 |   color: inherit;
14 |   text-decoration: none;
15 | }
16 | 
17 | * {
18 |   box-sizing: border-box;
19 | }
20 | 
21 | @media (prefers-color-scheme: dark) {
22 |   html {
23 |     color-scheme: dark;
24 |   }
25 |   body {
26 |     color: white;
27 |     background: black;
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 5 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 7 |  
 8 |     // Or if using `src` directory:
 9 |     "./src/**/*.{js,ts,jsx,tsx,mdx}",
10 |   ],
11 |   theme: {
12 |     extend: {},
13 |   },
14 |   plugins: [],
15 | }


--------------------------------------------------------------------------------