├── src
├── index.css
├── pages
│ ├── Contact.jsx
│ ├── Home.jsx
│ ├── About.jsx
│ └── Login.jsx
├── main.jsx
├── Componets
│ ├── Developer
│ │ └── Developer.jsx
│ ├── State
│ │ └── State.jsx
│ ├── FetchingData
│ │ └── FetchingData.jsx
│ ├── CreateDeveloper
│ │ └── CreateDeveloper.jsx
│ └── Navbar
│ │ └── Navbar.jsx
├── App.jsx
├── config
│ └── firebase.js
└── App.scss
├── public
├── assets
│ ├── login.jpg
│ ├── ian-scargill-O-CQq6A5Qjw-unsplash.jpg
│ └── react.svg
└── vite.svg
├── vite.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
└── package.json
/src/index.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/assets/login.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/olingomaxwell1999/vite-react/HEAD/public/assets/login.jpg
--------------------------------------------------------------------------------
/src/pages/Contact.jsx:
--------------------------------------------------------------------------------
1 | const Contact = () => {
2 | return Contact
;
3 | };
4 |
5 | export default Contact;
6 |
--------------------------------------------------------------------------------
/public/assets/ian-scargill-O-CQq6A5Qjw-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/olingomaxwell1999/vite-react/HEAD/public/assets/ian-scargill-O-CQq6A5Qjw-unsplash.jpg
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App.jsx";
4 | import "./index.css";
5 | import { BrowserRouter } from "react-router-dom";
6 |
7 | ReactDOM.createRoot(document.getElementById("root")).render(
8 |
9 |
10 |
11 |
12 |
13 | );
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 | src/config/firebase.js
10 | src/config/.env
11 |
12 | node_modules
13 | dist
14 | dist-ssr
15 | *.local
16 |
17 | # Editor directories and files
18 | .vscode/*
19 | !.vscode/extensions.json
20 | .idea
21 | .DS_Store
22 | *.suo
23 | *.ntvs*
24 | *.njsproj
25 | *.sln
26 | *.sw?
27 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/src/Componets/Developer/Developer.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | const Developer = ({ name, age, married, id, profession }) => {
3 | return (
4 |
5 |
{name}
6 | {profession}
7 | {age}
8 |
9 | );
10 | };
11 |
12 | Developer.propTypes = {
13 | name: PropTypes.string,
14 | age: PropTypes.number,
15 | married: PropTypes.bool,
16 | id: PropTypes.string,
17 | profession: PropTypes.string,
18 | };
19 |
20 | export default Developer;
21 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { Route, Routes } from "react-router-dom";
2 | import "./App.scss";
3 | // import FetchingData from "./Componets/FetchingData/FetchingData";
4 | import Navbar from "./Componets/Navbar/Navbar";
5 | // import State from "./Componets/State/State";
6 | import About from "./pages/About";
7 | import Contact from "./pages/Contact";
8 | import Home from "./pages/Home";
9 | import Login from "./pages/Login";
10 |
11 | function App() {
12 | return (
13 | <>
14 |
15 |
16 | } />
17 | } />
18 | } />
19 | } />
20 |
21 |
22 | {/*
23 | */}
24 |
25 | );
26 | }
27 |
28 | export default App;
29 |
--------------------------------------------------------------------------------
/src/pages/Home.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import FetchingData from "../Componets/FetchingData/FetchingData";
3 |
4 | const Home = () => {
5 | const [team, setTeam] = useState("");
6 |
7 | const handleTeamChange = (team) => {
8 | setTeam(team);
9 | };
10 |
11 | useEffect(() => {
12 | // Run only on mount
13 | console.log("Component mounted");
14 | }, []);
15 |
16 | return (
17 | <>
18 |
19 |
My favorite team is {team}
20 |
21 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | );
33 | };
34 |
35 | export default Home;
36 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vite-react",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "bootstrap": "^5.3.2",
14 | "firebase": "^10.6.0",
15 | "prop-types": "^15.8.1",
16 | "react": "^18.2.0",
17 | "react-bootstrap": "^2.9.1",
18 | "react-dom": "^18.2.0",
19 | "react-icons": "^4.12.0",
20 | "react-router-dom": "^6.18.0",
21 | "sass": "^1.69.5"
22 | },
23 | "devDependencies": {
24 | "@types/react": "^18.2.15",
25 | "@types/react-dom": "^18.2.7",
26 | "@vitejs/plugin-react": "^4.0.3",
27 | "eslint": "^8.45.0",
28 | "eslint-plugin-react": "^7.32.2",
29 | "eslint-plugin-react-hooks": "^4.6.0",
30 | "eslint-plugin-react-refresh": "^0.4.3",
31 | "vite": "^4.4.5"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/config/firebase.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 | import {
5 | FacebookAuthProvider,
6 | GoogleAuthProvider,
7 | getAuth,
8 | } from "firebase/auth";
9 | import { getFirestore } from "firebase/firestore";
10 |
11 | const firebaseConfig = {
12 | apiKey: "AIzaSyB3n4kZ43Sp-yecqKDkZ0DqB1ms0sCz37s",
13 | authDomain: "first-firebase-app-31bd8.firebaseapp.com",
14 | projectId: "first-firebase-app-31bd8",
15 | storageBucket: "first-firebase-app-31bd8.appspot.com",
16 | messagingSenderId: "983894644937",
17 | appId: "1:983894644937:web:9370ab377d2876f7715518",
18 | measurementId: "G-LLQFQG5MHN",
19 | };
20 |
21 | // Initialize Firebase
22 | const app = initializeApp(firebaseConfig);
23 | const analytics = getAnalytics(app);
24 | export const auth = getAuth(app);
25 | export const provider = new GoogleAuthProvider();
26 | export const db = getFirestore(app);
27 | export const facebookProvider = new FacebookAuthProvider();
28 |
--------------------------------------------------------------------------------
/src/Componets/State/State.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Button, ButtonGroup } from "react-bootstrap";
3 |
4 | const State = () => {
5 | const [mood, setMood] = useState("angry");
6 |
7 | const handleHappy = () => {
8 | setMood("happy");
9 | };
10 |
11 | const handleSad = () => {
12 | setMood("sad");
13 | };
14 |
15 | const handleAngry = () => {
16 | setMood("angry");
17 | };
18 |
19 | const handleBored = () => {
20 | setMood("bored");
21 | };
22 |
23 | return (
24 |
25 |
I am in a {mood} mood
26 |
27 |
28 |
31 |
34 |
37 |
40 |
41 |
42 | );
43 | };
44 |
45 | export default State;
46 |
--------------------------------------------------------------------------------
/src/Componets/FetchingData/FetchingData.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { useState } from "react";
3 |
4 | const apiUrl = "https://api.chucknorris.io/jokes/random";
5 | const githubApi = "https://api.github.com/users";
6 | function FetchingData() {
7 | const [jokes, setJokes] = useState([]);
8 | const [users, setUsers] = useState([]);
9 |
10 | const fetchJokes = () => {
11 | fetch(apiUrl)
12 | .then((response) => response.json())
13 | .then((data) => setJokes(data.value));
14 | };
15 |
16 | const fetchUsers = () => {
17 | fetch(githubApi)
18 | .then((response) => response.json())
19 | .then((info) => setUsers(info));
20 | };
21 |
22 | useEffect(() => {
23 | fetchJokes();
24 | fetchUsers();
25 | }, []);
26 |
27 | console.log(jokes);
28 | console.log(users);
29 | return (
30 |
31 |
Chuck Norris Jokes
32 |
{jokes}
33 | {users.map((user) => (
34 |
35 |
36 |
37 |
38 |
39 |
{user.login}
40 |
{user.type}
41 |
42 |
43 | ))}
44 |
30 | {developers.map((developer) => (
31 |
39 | ))}
40 |
41 |
42 |
43 | );
44 | };
45 |
46 | export default About;
47 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Componets/CreateDeveloper/CreateDeveloper.jsx:
--------------------------------------------------------------------------------
1 | import { addDoc, collection } from "firebase/firestore";
2 | import { useState } from "react";
3 | import { db } from "../../config/firebase";
4 |
5 | const CreateDeveloper = () => {
6 | const [name, setName] = useState("");
7 | const [profession, setProfession] = useState("");
8 | const [age, setAge] = useState(0);
9 | const [married, setMarried] = useState(false);
10 |
11 | const developersDB = collection(db, "developers");
12 |
13 | const handleName = (e) => {
14 | e.preventDefault();
15 | setName(e.target.value);
16 | };
17 |
18 | const handleProfession = (e) => {
19 | e.preventDefault();
20 | setProfession(e.target.value);
21 | };
22 |
23 | const handleAge = (e) => {
24 | e.preventDefault();
25 | setAge(Number(e.target.value));
26 | };
27 |
28 | const handleMarried = (e) => {
29 | e.preventDefault();
30 | setMarried(e.target.checked);
31 | };
32 |
33 | const createDeveloper = async () => {
34 | try {
35 | await addDoc(developersDB, {
36 | name: name,
37 | profession: profession,
38 | age: age,
39 | married: married,
40 | });
41 | } catch (err) {
42 | console.error(err);
43 | }
44 | };
45 | return (
46 |
47 |
52 |
57 |
62 |
68 |
69 |
70 |
71 | );
72 | };
73 |
74 | export default CreateDeveloper;
75 |
--------------------------------------------------------------------------------
/src/Componets/Navbar/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import Button from "react-bootstrap/Button";
2 | import Container from "react-bootstrap/Container";
3 | import Form from "react-bootstrap/Form";
4 | import Nav from "react-bootstrap/Nav";
5 | import Navbar from "react-bootstrap/Navbar";
6 | import NavDropdown from "react-bootstrap/NavDropdown";
7 |
8 | function NavbarMain() {
9 | return (
10 |
11 |
12 | FIREBASE APP
13 |
14 |
15 |
39 | {/* */}
48 |
49 |
50 |
51 |
52 | );
53 | }
54 |
55 | export default NavbarMain;
56 |
--------------------------------------------------------------------------------
/src/App.scss:
--------------------------------------------------------------------------------
1 | @import 'bootstrap/dist/css/bootstrap.min.css';
2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
3 |
4 | :root{
5 | --main-red: rgba(122,0,33,255);
6 | }
7 |
8 | *{
9 | margin: 0;
10 | padding: 0;
11 | box-sizing: border-box;
12 | overflow: hidden;
13 | font-family: 'Poppins', sans-serif;
14 | }
15 |
16 | .loginPageArea{
17 | display: grid;
18 | grid-template-columns: repeat(2, 1fr);
19 | // gap: 20px;
20 | background-color: var(--main-red);
21 | height: 100vh;
22 | color: #fff;
23 |
24 | .loginSide{
25 | display: flex;
26 | flex-direction: column;
27 | gap: 10px;
28 | padding: 30px 40px;
29 | width: 80%;
30 | margin: auto;
31 |
32 | .text-top{
33 | display: flex;
34 | flex-direction: column;
35 | gap: 10px;
36 | // padding-top: 20px;
37 |
38 | h1{
39 | font-weight: 400;
40 | font-size: 30px;
41 | }
42 |
43 | h3{
44 | font-weight: 300;
45 | font-size: 20px;
46 | }
47 | }
48 |
49 | .input-area{
50 | display: flex;
51 | flex-direction: column;
52 | gap: 20px;
53 |
54 | label{
55 | font-size: 20px;
56 | font-weight: 300;
57 | }
58 |
59 | input{
60 | padding: 10px;
61 | height: 50px;
62 | border-radius: 10px;
63 | }
64 |
65 | .submitBtn{
66 | height: 50px;
67 | border-radius: 10px;
68 | background-color: #fff;
69 | color: var(--main-red);
70 | }
71 | }
72 |
73 | .social-login{
74 | display: flex;
75 | margin: auto;
76 | gap: 20px;
77 |
78 | .social-icon{
79 | font-size: 40px;
80 | background-color: #fff;
81 | color: var(--main-red);
82 | padding: 10px;
83 | border-radius: 50%;
84 | cursor: pointer;
85 | outline: none;
86 | }
87 | }
88 | }
89 |
90 | .imgSide{
91 | width: 100%;
92 | height: 100%;
93 | display: flex;
94 | justify-content: center;
95 | align-items: center;
96 | }
97 | }
--------------------------------------------------------------------------------
/public/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/Login.jsx:
--------------------------------------------------------------------------------
1 | // import GoogleButton from "react-google-button";
2 | import { auth, provider, facebookProvider } from "../config/firebase";
3 | import { FcGoogle } from "react-icons/fc";
4 | import { FaTwitter } from "react-icons/fa6";
5 | import { BiLogoInstagramAlt } from "react-icons/bi";
6 | import { LiaFacebookF } from "react-icons/lia";
7 | import { VscGithubAlt } from "react-icons/vsc";
8 | import { createUserWithEmailAndPassword, signInWithPopup } from "firebase/auth";
9 | import { useNavigate } from "react-router-dom";
10 | import { useState } from "react";
11 |
12 | const Login = () => {
13 | const navigate = useNavigate();
14 | const handleGoogle = async () => {
15 | try {
16 | await signInWithPopup(auth, provider);
17 | navigate("/home");
18 | } catch (err) {
19 | console.error(err);
20 | }
21 | };
22 |
23 | const handleFacebook = async () => {
24 | try {
25 | await signInWithPopup(auth, facebookProvider);
26 | navigate("/home");
27 | } catch (err) {
28 | console.error(err);
29 | }
30 | };
31 |
32 | const handleGithub = async () => {
33 | try {
34 | await signInWithPopup(auth, provider);
35 | navigate("/home");
36 | } catch (err) {
37 | console.error(err);
38 | }
39 | };
40 |
41 | const handleInstagram = async () => {
42 | try {
43 | await signInWithPopup(auth, provider);
44 | navigate("/home");
45 | } catch (err) {
46 | console.error(err);
47 | }
48 | };
49 |
50 | const handleTwitter = async () => {
51 | try {
52 | await signInWithPopup(auth, provider);
53 | navigate("/home");
54 | } catch (err) {
55 | console.error(err);
56 | }
57 | };
58 |
59 | // const handleSignOut = async () => {
60 | // await signOut(auth);
61 | // navigate("/");
62 | // };
63 |
64 | const [email, setEmail] = useState("");
65 | const [password, setPassword] = useState("");
66 |
67 | const handleEmailChange = (e) => {
68 | e.preventDefault();
69 | setEmail(e.target.value);
70 | // setEmail("");
71 | };
72 |
73 | const handlePasswordChange = (e) => {
74 | e.preventDefault();
75 | setPassword(e.target.value);
76 | // setPassword("");
77 | };
78 |
79 | console.log(email, password);
80 |
81 | const handleLogin = async () => {
82 | try {
83 | await createUserWithEmailAndPassword(auth, email, password);
84 | navigate("/home");
85 | } catch (err) {
86 | console.error(err);
87 | }
88 | };
89 |
90 | return (
91 |
92 |
93 |
94 |
Welcome Back!
95 | The Faster You Fill this Form The Faster You Enjoy!
96 |
97 |
98 |
99 |
106 |
107 |
114 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
127 |
128 |
129 |
130 |
131 |
132 |
137 |
138 |