├── .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 |
138 |
139 | );
140 | }
141 |
142 | export default Form;
143 |
--------------------------------------------------------------------------------
/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function Footer() {
4 | return (
5 |
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 |
14 |

router.push('/')}
19 | />
20 |
21 |
27 | {!session?
34 | :}
41 | {session?
42 | router.push('/profile')}
44 | width={40} height={40} />:null}
45 |
46 |
47 |
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 |
11 | {games?.map((item)=>(
12 |
onGamePress(item.name)}
14 | className='flex flex-col
15 | items-center cursor-pointer
16 | '>
17 |

21 |
{item.name}
22 |
23 | ))}
24 |
25 | )
26 | }
27 |
28 | export default GameList
--------------------------------------------------------------------------------
/components/Home/Hero.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function Hero() {
4 | return (
5 |
6 |
7 | Find & Discover Players
8 |
Near You
9 |
10 | Best Free Website to find and Discover game
11 | partner/player near you for your fav game
12 |
13 |
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 |
12 |
13 |

17 |
18 |
19 |
20 |
23 | {post.title}
24 |
25 |
26 |
27 | {post.date}
28 |
29 |
31 |
32 | {post.location}
33 |
34 |
37 | {post.desc}
38 |
39 | {!modal?
:null}
40 | {modal?
41 |
47 | :null}
48 |
49 |
: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 |
8 |
9 |
17 |
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 |
12 |
13 |
18 | {posts.map((item,index) => (
19 |
20 | {window.my_modal_1.showModal();setPost(item)}}>
21 |
22 |
23 | ))}
24 |
25 |
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 |
10 |
11 |
12 |
19 |
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 |
31 |
32 |
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 |
8 |
Posted By :
9 |
10 |
11 |
12 | {user?.userImage?
:null}
14 |
15 |
{user?.userName}
16 | {user?.email}
17 |
18 |
19 |
20 |
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 |
10 |
11 |
{msg}
12 |
16 |
17 |
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 |
9 |
10 |
11 |
12 |
13 |
14 |
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 |
18 |
19 |
CREATE POST
21 |
Create Post and Discover/Invite new Friends and Player
22 |
23 |
24 |
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 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | {posts?
:null}
56 |
57 |
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 |
41 | {showToast ? (
42 |
43 | setShowToast(false)}
46 | />
47 |
48 | ) : null}
49 |
Profile
51 |
Manage Your Post
52 |
55 | {userPost&&userPost?.map((item,index)=>(
56 |
57 |
58 |
61 |
62 | ))}
63 |
64 |
65 |
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 |
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------