Nextjs + Firebase + Material UI Study

Author: genesisneo

.env.example

@@ -0,0 +1,7 @@
+FIREBASE_API_KEY=
+FIREBASE_AUTH_DOMAIN=
+FIREBASE_DATABASE_URL=
+FIREBASE_PROJECT_ID=
+FIREBASE_STORAGE_BUCKET=
+FIREBASE_MESSAGING_SENDER_ID=
+FIREBASE_APP_ID=

.eslintignore

@@ -0,0 +1,11 @@
+# Directories
+
+.next/
+build/
+dist/
+node_modules/
+
+# Files
+
+.DS_Store
+.env

.eslintrc

@@ -0,0 +1,15 @@
+{
+  "extends": "airbnb",
+  "parser": "babel-eslint",
+  "globals": {
+    "React": "writable",
+    "window": true,
+    "document": true,
+    "webkit": true
+  },
+  "rules": {
+    "react/jsx-filename-extension": "off",
+    "react/prop-types": "off",
+    "react/jsx-props-no-spreading": "off"
+  }
+}

.gitignore

@@ -0,0 +1,11 @@
+# Directories
+
+.next/
+build/
+dist/
+node_modules/
+
+# Files
+
+.DS_Store
+.env

README.md

@@ -1,2 +1,61 @@
 # nextjs-firebase-materialui-study
-Nextjs + Firebase + Material UI Study
+
+This is a simple set up for Firebase for client side applications.
+
+The firebase app is initialized in `firebase/clientApp.js`, to use you just have to import it anywhere in the app
+
+The React Context API is used to provide user state.
+
+### Configuration
+
+- [Create a Firebase project](https://console.firebase.google.com/u/0/) and add a new app to it.
+
+- 🔑 Firebase Authentication
+
+<img src="./public/firebase/firebase-01.jpg">
+
+- 👨 Firebase Databse (`users`)
+
+<img src="./public/firebase/firebase-02.jpg">
+
+- 📄 Firebase Database (`database`)
+
+<img src="./public/firebase/firebase-03.jpg">
+
+- ⚙️ Firebase Database Rules
+
+<img src="./public/firebase/firebase-04.jpg">
+
+- Create a `.env` file and copy the contents of `.env.example` into it.
+
+```bash
+cp .env.example .env
+```
+
+- Set each variable on `.env` with your Firebase Configuration (found in "Project settings").
+
+- Install it and run the application
+
+```bash
+npm install
+npm run dev
+
+# or
+
+yarn
+yarn dev
+```
+
+### Notes:
+
+If you will use [Vercel](https://vercel.com/), keys will be coming from Vercel Secret keys.
+
+```
+"@firebase-api-key"
+"@firebase-auth-domain"
+"@firebase-database-url"
+"@firebase-project-id"
+"@firebase-storage-bucket"
+"@firebase-messaging-sender-id"
+"@firebase-app-id"
+```

components/AppBar/AppBar.js

@@ -0,0 +1,128 @@
+import { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import NoteAddIcon from '@material-ui/icons/NoteAdd';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@material-ui/core/Menu';
+import Modal from '@material-ui/core/Modal';
+import SignIn from '../SignIn/SignIn';
+import Document from '../Document/Document';
+import firebase from '../../firebase/clientApp';
+import { useUser } from '../../firebase/userContext';
+
+const useStyles = makeStyles(() => ({
+  appbar: {
+    flexGrow: 1,
+  },
+  title: {
+    flexGrow: 1,
+  },
+  modal: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+}));
+
+export default () => {
+  const classes = useStyles();
+  const { user } = useUser();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [activeModal, setActiveModal] = useState(null);
+
+  // menu
+  const handleAccountMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleAccountMenuClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSignIn = () => {
+    setAnchorEl(null);
+    setActiveModal('signIn');
+  };
+  const handleSignOut = () => {
+    firebase.auth().signOut();
+    setAnchorEl(null);
+  };
+  const handleNewDocument = () => {
+    setActiveModal('newDocument');
+  };
+
+  // modal
+  const handleModalClose = () => {
+    setActiveModal(null);
+  };
+
+  return (
+    <div className={classes.appbar}>
+
+      {/* Appbar */}
+      <AppBar position="static">
+        <Toolbar>
+          <Typography variant="h6" className={classes.title}>
+            {user ? `${user.firstName} ${user.lastName}` : 'Nextjs + Firebase + Material UI Study' }
+          </Typography>
+          <div>
+            {user && (
+              <IconButton
+                aria-label="add document"
+                onClick={handleNewDocument}
+                color="inherit"
+              >
+                <NoteAddIcon />
+              </IconButton>
+            )}
+            <IconButton
+              aria-label="account"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleAccountMenu}
+              color="inherit"
+            >
+              <AccountCircle />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorEl}
+              anchorOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              open={Boolean(anchorEl)}
+              onClose={handleAccountMenuClose}
+            >
+              {!user && <MenuItem onClick={handleSignIn}>Sign In</MenuItem>}
+              {user && <MenuItem onClick={handleSignOut}>Sign Out</MenuItem>}
+            </Menu>
+          </div>
+        </Toolbar>
+      </AppBar>
+
+      {/* Modal */}
+      {activeModal && (
+        <Modal
+          className={classes.modal}
+          open={Boolean(activeModal)}
+          onClose={handleModalClose}
+          aria-labelledby="modal title"
+          aria-describedby="modal description"
+        >
+          <>
+            {activeModal === 'signIn' && <SignIn setActiveModal={setActiveModal} />}
+            {activeModal === 'newDocument' && <Document newDocument setActiveModal={setActiveModal} />}
+          </>
+        </Modal>
+      )}
+    </div>
+  );
+};