https://github.com/zeeshandev15/Discover-players-Full-Stack-App
Discover Players is a full-stack app built with Next.js , React, and Tailwind CSS, enabling users to explore and connect with athletes across various sports. It leverages Firebase for real-time data management and NextAuth for secure authentication, ensuring a seamless experience. The responsive design allows easy access on all devices, making it
https://github.com/zeeshandev15/Discover-players-Full-Stack-App
firebase googlecloud next-js nextauth react reacthookform tailwind-css yup-validation
Last synced: 3 months ago
JSON representation
Discover Players is a full-stack app built with Next.js , React, and Tailwind CSS, enabling users to explore and connect with athletes across various sports. It leverages Firebase for real-time data management and NextAuth for secure authentication, ensuring a seamless experience. The responsive design allows easy access on all devices, making it
- Host: GitHub
- URL: https://github.com/zeeshandev15/Discover-players-Full-Stack-App
- Owner: Hi-Dear-486
- Created: 2024-10-17T06:23:41.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-01T15:20:58.000Z (about 1 year ago)
- Last Synced: 2025-01-21T01:55:32.591Z (11 months ago)
- Topics: firebase, googlecloud, next-js, nextauth, react, reacthookform, tailwind-css, yup-validation
- Language: JavaScript
- Homepage: https://discover-players-full-stack-app.vercel.app
- Size: 1.14 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Discover players
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🕸️ [Snippets (Code to Copy)](#snippets)
6. 🔗 [Assets](#links)
7. 🚀 [More](#more)
This project allows users to find and connect with nearby players by creating posts. The app ensures secure authentication using Google OAuth and manages user-generated content efficiently.
If you're getting started and need assistance or face any bugs, join our active Discord community with over **34k+** members. It's a place where people help each other out.
- **Frontend:** React, Next.js, Tailwind CSS
- **Authentication:** NextAuth (Google OAuth)
- **Database & Storage:** Firebase
- **Forms & Validation:** React Hook Form, Yup
- **Hosting & Cloud:** Google Cloud, Vercel
## 🔋 Features
👉 **User Authentication**: Google OAuth via NextAuth.
👉 **Post Creation**: Users can create and manage posts.
👉 **Secure & Fast**: Firebase for real-time data handling.
👉 **Complete Responsiveness**: The application works seamlessly on all device types and screen sizes.
👉 **Form Validation **: React Hook Form & Yup for seamless UX.
and many more, including code architecture and reusability
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [Yarn](https://www.yarnpkg.com/) (Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/zeeshan-develop/Discover-players-Full-Stack-App.git
cd ./
```
**Installation**
Install the project dependencies using yarn:
```bash
yarn add
```
**Set Up Environment Variables**
Create a new file named `.env` in the root of your project and add the following content:
```env
# googleCloud
GOOGLE_Client_ID=
GOOGLE_CLIENT_SECRET=
# firebase
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
# nextauth
NEXTAUTH_SECRET=
NEXTAUTH_URL=
```
Replace the placeholder values with your actual TMDB credentials. You can obtain these credentials by signing up on the [Google Cloud Console](https://console.cloud.google.com/)
**Running the Project**
```bash
yarn run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.
## 🕸️ Snippets
tailwind.config.js
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/flowbite/**/*.js",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [require("flowbite/plugin")],
};
```
app/globals.css
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ========================================== TAILWIND STYLES */
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}
}```
app/shared/Data.js
```javascript
import cricket from "@/images/cricket.png";
import pingpong from "@/images/pingpong.png";
import puzzle from "@/images/puzzle.jpg";
import trekking from "@/images/trikking.png";
import Badminton from "@/images/badminton.jpeg";
import Football from "@/images/football.jpg";
export const GameListsData = [
{ id: 1, name: "Badminton", image: Badminton },
{ id: 2, name: "Cricket", image: cricket },
{ id: 3, name: "PingPong", image: pingpong },
{ id: 4, name: "Puzzle", image: puzzle },
{ id: 5, name: "Trekking", image: trekking },
{ id: 6, name: "FootBall", image: Football },
];
```
app/shared/FirebaseConfig.js
```javascript
import { initializeApp } from "firebase/app";
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export default app;
```
context/PostsContext.js
```javascript
"use client";
import React, {
createContext,
useContext,
useState,
useEffect,
useCallback,
} from "react";
import { getFirestore, collection, getDocs } from "firebase/firestore";
import app from "../shared/FirebaseConfig";
import Swal from "sweetalert2";
const PostsContext = createContext();
export const PostsProvider = ({ children }) => {
const [posts, setPosts] = useState([]);
const db = getFirestore(app);
const getPost = useCallback(async () => {
try {
const querySnapshot = await getDocs(collection(db, "posts"));
const postsArray = [];
querySnapshot.forEach((doc) => {
postsArray.push({ id: doc.id, ...doc.data() });
});
setPosts(postsArray);
} catch (error) {
Swal.fire({
icon: "error",
title: "Error getting documents",
text: error.message,
confirmButtonText: "Ok",
});
}
}, [db]);
useEffect(() => {
getPost();
}, [getPost]);
const postData = {
posts,
getPost,
};
return (
{children}
);
};
export const usePosts = () => {
return useContext(PostsContext);
};
```
## 🔗 Assets
Public assets used in the project can be found [here](https://github.com/zeeshan-develop/Discover-players-Full-Stack-App/tree/master/images)
## 🚀 More
**Advance your skills with Next.js**
Enjoyed creating this project? Dive deeper for a richer learning adventure. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!
#