Mystry box

[Jenish1103]

// Mystery Box PWA - Main App Entry import React from 'react'; import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom'; import { AuthProvider } from './contexts/AuthContext'; import Home from './pages/Home'; import Login from './pages/Login'; import Inventory from './pages/Inventory'; import OpenBox from './pages/OpenBox'; import Navbar from './components/Navbar'; import './index.css';
export default function App() { return ( ); }
// src/firebase.js // Firebase configuration file import { initializeApp } from 'firebase/app'; import { getAuth } from 'firebase/auth'; import { getFirestore } from 'firebase/firestore';
const firebaseConfig = { apiKey: 'YOUR_API_KEY', authDomain: 'YOUR_AUTH_DOMAIN', projectId: 'YOUR_PROJECT_ID', storageBucket: 'YOUR_STORAGE_BUCKET', messagingSenderId: 'YOUR_MESSAGING_SENDER_ID', appId: 'YOUR_APP_ID', };
const app = initializeApp(firebaseConfig); export const auth = getAuth(app); export const db = getFirestore(app);
// src/contexts/AuthContext.js import React, { createContext, useContext, useEffect, useState } from 'react'; import { auth } from '../firebase'; import { onAuthStateChanged, signInWithEmailAndPassword, signOut } from 'firebase/auth';
const AuthContext = createContext();
export function AuthProvider({ children }) { const [currentUser, setCurrentUser] = useState(null);
useEffect(() => { const unsub = onAuthStateChanged(auth, user => setCurrentUser(user)); return () => unsub(); }, []);
return ( <AuthContext.Provider value={{ currentUser, signInWithEmailAndPassword, signOut }}> {children} </AuthContext.Provider> ); }
export const useAuth = () => useContext(AuthContext);
// src/pages/Home.js import React from 'react'; import { Link } from 'react-router-dom';
const boxes = [ { id: 'common', name: 'Common Box', price: 5 }, { id: 'rare', name: 'Rare Box', price: 15 }, { id: 'epic', name: 'Epic Box', price: 30 }, ];
export default function Home() { return (

Mystery Boxes

{boxes.map(box => (

{box.name}

${box.price}
))}

); }
// src/pages/Login.js import React, { useState } from 'react'; import { useAuth } from '../contexts/AuthContext';
export default function Login() { const { signInWithEmailAndPassword } = useAuth(); const [email, setEmail] = useState(''); const [password, setPassword] = useState('');
const handleLogin = async (e) => { e.preventDefault(); try { await signInWithEmailAndPassword(auth, email, password); } catch (err) { alert('Login failed'); } };
return (

Login

<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" className="block w-full p-2 mb-2 border rounded" required /> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" className="block w-full p-2 mb-2 border rounded" required /> Login ); }
// src/pages/Inventory.js import React from 'react';
export default function Inventory() { return (

Your Inventory

You don't have any items yet.

); }
// src/pages/OpenBox.js import React from 'react'; import { useParams } from 'react-router-dom';
const items = { common: ['Sticker', 'Keychain', 'Pen'], rare: ['T-Shirt', 'Bluetooth Speaker', 'Power Bank'], epic: ['Smartwatch', 'Headphones', 'Tablet'], };
export default function OpenBox() { const { boxId } = useParams(); const rewards = items[boxId] || []; const reward = rewards[Math.floor(Math.random() * rewards.length)];
return (

You opened a {boxId} box!

🎁 {reward} 🎁

); }
// src/components/Navbar.js import React from 'react'; import { Link } from 'react-router-dom'; import { useAuth } from '../contexts/AuthContext';
export default function Navbar() { const { currentUser, signOut } = useAuth(); return (

MysteryBox

Inventory {currentUser ? ( <button onClick={() => signOut(auth)} className="text-red-500">Logout ) : ( Login )}

); }