├── functions
├── .gitignore
├── package.json
├── index.js
└── package-lock.json
├── .firebaserc
├── public
├── robots.txt
├── favicon.ico
├── logo192.png
├── logo512.png
├── manifest.json
└── index.html
├── .github
└── FUNDING.yml
├── README.md
├── src
├── setupTests.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── App.css
├── App.js
└── serviceWorker.js
├── firebase.json
├── .gitignore
└── package.json
/functions/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 | "projects": {
3 | "default": "fireship-demos"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fireship-io/react-firebase-chat/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fireship-io/react-firebase-chat/HEAD/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fireship-io/react-firebase-chat/HEAD/public/logo512.png
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: [codediodeio]
4 | custom: ['https://fireship.io/pro']
5 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Firebase Super Chat
2 |
3 | A simple fullstack chat demo with React and Firebase.
4 |
5 | Watch on full [React Firebase Chat Tutorial](https://youtu.be/zQyrwxMPm88) on YouTube.
6 |
7 | [Live demo](https://fireship-demos.web.app/)
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
1 | {
2 | "hosting": {
3 | "public": "build",
4 | "ignore": [
5 | "firebase.json",
6 | "**/.*",
7 | "**/node_modules/**"
8 | ],
9 | "rewrites": [
10 | {
11 | "source": "**",
12 | "destination": "/index.html"
13 | }
14 | ]
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
6 | const { getByText } = render();
7 | const linkElement = getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
10 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/.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 | .firebase
8 |
9 | # testing
10 | /coverage
11 |
12 | # production
13 | /build
14 |
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 |
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |
7 | ReactDOM.render(
8 |
9 |
10 | ,
11 | document.getElementById('root')
12 | );
13 |
14 | // If you want your app to work offline and load faster, you can change
15 | // unregister() to register() below. Note this comes with some pitfalls.
16 | // Learn more about service workers: https://bit.ly/CRA-PWA
17 | serviceWorker.unregister();
18 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/functions/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "functions",
3 | "description": "Cloud Functions for Firebase",
4 | "scripts": {
5 | "serve": "firebase emulators:start --only functions",
6 | "shell": "firebase functions:shell",
7 | "start": "npm run shell",
8 | "deploy": "firebase deploy --only functions",
9 | "logs": "firebase functions:log"
10 | },
11 | "engines": {
12 | "node": "10"
13 | },
14 | "dependencies": {
15 | "bad-words": "^3.0.3",
16 | "firebase-admin": "^8.10.0",
17 | "firebase-functions": "^3.6.1"
18 | },
19 | "devDependencies": {
20 | "firebase-functions-test": "^0.2.0"
21 | },
22 | "private": true
23 | }
24 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-chat",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.5.0",
8 | "@testing-library/user-event": "^7.2.1",
9 | "firebase": "^7.20.0",
10 | "react": "^16.13.1",
11 | "react-dom": "^16.13.1",
12 | "react-firebase-hooks": "^2.2.0",
13 | "react-scripts": "3.4.3"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test",
19 | "eject": "react-scripts eject"
20 | },
21 | "eslintConfig": {
22 | "extends": "react-app"
23 | },
24 | "browserslist": {
25 | "production": [
26 | ">0.2%",
27 | "not dead",
28 | "not op_mini all"
29 | ],
30 | "development": [
31 | "last 1 chrome version",
32 | "last 1 firefox version",
33 | "last 1 safari version"
34 | ]
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/functions/index.js:
--------------------------------------------------------------------------------
1 | const functions = require('firebase-functions');
2 | const Filter = require('bad-words');
3 | const admin = require('firebase-admin');
4 | admin.initializeApp();
5 |
6 | const db = admin.firestore();
7 |
8 | exports.detectEvilUsers = functions.firestore
9 | .document('messages/{msgId}')
10 | .onCreate(async (doc, ctx) => {
11 |
12 | const filter = new Filter();
13 | const { text, uid } = doc.data();
14 |
15 |
16 | if (filter.isProfane(text)) {
17 |
18 | const cleaned = filter.clean(text);
19 | await doc.ref.update({text: `🤐 I got BANNED for life for saying... ${cleaned}`});
20 |
21 | await db.collection('banned').doc(uid).set({});
22 | }
23 |
24 | const userRef = db.collection('users').doc(uid)
25 |
26 | const userData = (await userRef.get()).data();
27 |
28 | if (userData.msgCount >= 7) {
29 | await db.collection('banned').doc(uid).set({});
30 | } else {
31 | await userRef.set({ msgCount: (userData.msgCount || 0) + 1 })
32 | }
33 |
34 | });
35 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
15 |
16 |
20 |
21 |
30 | React Firebase Superchat
31 |
32 |
33 |
34 |
35 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #282c34;
3 | }
4 |
5 | .App {
6 | text-align: center;
7 | max-width: 728px;
8 | margin: 0 auto;
9 | }
10 |
11 | .App header {
12 | background-color: #181717;
13 | height: 10vh;
14 | min-height: 50px;
15 | color: white;
16 | position: fixed;
17 | width: 100%;
18 | max-width: 728px;
19 | top: 0;
20 | display: flex;
21 | align-items: center;
22 | justify-content: space-between;
23 | z-index: 99;
24 | padding: 10px;
25 | box-sizing: border-box;
26 | }
27 |
28 | .App section {
29 | display: flex;
30 | flex-direction: column;
31 | justify-content: center;
32 | min-height: 100vh;
33 | background-color: rgb(40, 37, 53);
34 | }
35 |
36 | main {
37 | padding: 10px;
38 | height: 80vh;
39 | margin: 10vh 0 10vh;
40 | overflow-y: scroll;
41 | display: flex;
42 | flex-direction: column;
43 | }
44 |
45 | main::-webkit-scrollbar {
46 | width: 0.25rem;
47 | }
48 |
49 | main::-webkit-scrollbar-track {
50 | background: #1e1e24;
51 | }
52 |
53 | main::-webkit-scrollbar-thumb {
54 | background: #6649b8;
55 | }
56 |
57 | form {
58 | height: 10vh;
59 | position: fixed;
60 | bottom: 0;
61 | background-color: rgb(24, 23, 23);
62 | width: 100%;
63 | max-width: 728px;
64 | display: flex;
65 | font-size: 1.5rem;
66 | }
67 |
68 | form button {
69 | width: 20%;
70 | background-color: rgb(56, 56, 143);
71 | }
72 |
73 |
74 | input {
75 | line-height: 1.5;
76 | width: 100%;
77 | font-size: 1.5rem;
78 | background: rgb(58, 58, 58);
79 | color: white;
80 | outline: none;
81 | border: none;
82 | padding: 0 10px;
83 | }
84 |
85 | button {
86 | background-color: #282c34; /* Green */
87 | border: none;
88 | color: white;
89 | padding: 15px 32px;
90 | text-align: center;
91 | text-decoration: none;
92 | display: inline-block;
93 | cursor: pointer;
94 | font-size: 1.25rem;
95 | }
96 |
97 | button:disabled {
98 | opacity: 0.5;
99 | cursor: not-allowed;
100 | }
101 |
102 |
103 | .sign-in {
104 | color: #282c34;
105 | background: white;
106 | max-width: 400px;
107 | margin: 0 auto;
108 | }
109 |
110 |
111 |
112 |
113 | ul, li {
114 | text-align: left;
115 | list-style: none;
116 | }
117 |
118 | p {
119 | max-width: 500px;
120 | margin-bottom: 12px;
121 | line-height: 24px;
122 | padding: 10px 20px;
123 | border-radius: 25px;
124 | position: relative;
125 | color: white;
126 | text-align: center;
127 | }
128 |
129 | .message {
130 | display: flex;
131 | align-items: center;
132 | }
133 |
134 |
135 | .sent {
136 | flex-direction: row-reverse;
137 | }
138 |
139 | .sent p {
140 | color: white;
141 | background: #0b93f6;
142 | align-self: flex-end;
143 | }
144 | .received p {
145 | background: #e5e5ea;
146 | color: black;
147 | }
148 |
149 | img {
150 | width: 40px;
151 | height: 40px;
152 | border-radius: 50%;
153 | margin: 2px 5px;
154 | }
155 |
156 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from 'react';
2 | import './App.css';
3 |
4 | import firebase from 'firebase/app';
5 | import 'firebase/firestore';
6 | import 'firebase/auth';
7 | import 'firebase/analytics';
8 |
9 | import { useAuthState } from 'react-firebase-hooks/auth';
10 | import { useCollectionData } from 'react-firebase-hooks/firestore';
11 |
12 | firebase.initializeApp({
13 | // your config
14 | })
15 |
16 | const auth = firebase.auth();
17 | const firestore = firebase.firestore();
18 | const analytics = firebase.analytics();
19 |
20 |
21 | function App() {
22 |
23 | const [user] = useAuthState(auth);
24 |
25 | return (
26 |
27 |
31 |
32 |
35 |
36 |
37 | );
38 | }
39 |
40 | function SignIn() {
41 |
42 | const signInWithGoogle = () => {
43 | const provider = new firebase.auth.GoogleAuthProvider();
44 | auth.signInWithPopup(provider);
45 | }
46 |
47 | return (
48 | <>
49 |
50 | Do not violate the community guidelines or you will be banned for life!
51 |
52 | )
53 |
54 | }
55 |
56 | function SignOut() {
57 | return auth.currentUser && (
58 |
59 | )
60 | }
61 |
62 |
63 | function ChatRoom() {
64 | const dummy = useRef();
65 | const messagesRef = firestore.collection('messages');
66 | const query = messagesRef.orderBy('createdAt').limit(25);
67 |
68 | const [messages] = useCollectionData(query, { idField: 'id' });
69 |
70 | const [formValue, setFormValue] = useState('');
71 |
72 |
73 | const sendMessage = async (e) => {
74 | e.preventDefault();
75 |
76 | const { uid, photoURL } = auth.currentUser;
77 |
78 | await messagesRef.add({
79 | text: formValue,
80 | createdAt: firebase.firestore.FieldValue.serverTimestamp(),
81 | uid,
82 | photoURL
83 | })
84 |
85 | setFormValue('');
86 | dummy.current.scrollIntoView({ behavior: 'smooth' });
87 | }
88 |
89 | return (<>
90 |
91 |
92 | {messages && messages.map(msg => )}
93 |
94 |
95 |
96 |
97 |
98 |
105 | )
106 | }
107 |
108 |
109 | function ChatMessage(props) {
110 | const { text, uid, photoURL } = props.message;
111 |
112 | const messageClass = uid === auth.currentUser.uid ? 'sent' : 'received';
113 |
114 | return (<>
115 |
116 |
117 |
{text}
118 |