Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit d88fd46

Browse files
pramit-maratthapramit-marattha
authored
Merge branch 'master' into code-editor
2 parents ad38e57 + 89b37a1 commit d88fd46

22 files changed

+27920
-1
lines changed

‎README.md

+20
Original file line numberDiff line numberDiff line change
@@ -1 +1,21 @@
11
![under_construction](https://user-images.githubusercontent.com/37651620/93677983-a7942e00-facc-11ea-8b6d-b57e73dc73bf.png)
2+
3+
---
4+
## 1) Mini Code Editor
5+
![code_editor](https://user-images.githubusercontent.com/37651620/93988236-32647980-fda8-11ea-9052-3238ea4a42b2.png)
6+
7+
<span>Code inside the above image is from <a href="https://codepen.io/nocni_sovac/pen/poyabaB">
8+
Codepen </a> by Zarko Rvovic (<a href="https://codepen.io/nocni_sovac">@nocni_sovac</a>)
9+
on <a href="https://codepen.io">CodePen</a>.</span>
10+
11+
12+
## It's Live 🎉 Visit here ==> https://mini-code-editor.netlify.app/
13+
## Checkout the Issue ==>http://bit.ly/mini-code-editor
14+
---
15+
16+
## 2) Community Chat App with react and firebase
17+
![community_chat](https://user-images.githubusercontent.com/37651620/94143516-a7f74500-fe8f-11ea-9105-188e31f1d62a.png)
18+
19+
## It's Live 🎉 Visit here ==> https://community-chat-app.netlify.app/
20+
## Checkout the Issue ==> http://bit.ly/community-chat
21+
---

‎community-chat-react-web-app-project/README.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
![under_construction](https://user-images.githubusercontent.com/37651620/93677983-a7942e00-facc-11ea-8b6d-b57e73dc73bf.png)
1+
![community_chat_home](https://user-images.githubusercontent.com/37651620/94143544-b2194380-fe8f-11ea-94e1-d05728ca8899.png)
2+
![community_chat](https://user-images.githubusercontent.com/37651620/94143516-a7f74500-fe8f-11ea-9105-188e31f1d62a.png)
3+
4+
## It's Live 🎉 Visit here ==> https://community-chat-app.netlify.app/
25

36
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
47

‎community-chat-react-web-app-project/package-lock.json

+16,579
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎community-chat-react-web-app-project/package.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "community-chat-react-web-app-project",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@testing-library/jest-dom": "^4.2.4",
7+
"@testing-library/react": "^9.3.2",
8+
"@testing-library/user-event": "^7.1.2",
9+
"firebase": "^7.21.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+
}

‎community-chat-react-web-app-project/public/favicon.ico

15 KB
Binary file not shown.

‎community-chat-react-web-app-project/public/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13+
14+
<title>Community Chat App</title>
15+
</head>
16+
<body>
17+
<noscript>You need to enable JavaScript to run this app.</noscript>
18+
<div id="root"></div>
19+
</body>
20+
</html>

‎community-chat-react-web-app-project/public/manifest.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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+
}

‎community-chat-react-web-app-project/public/robots.txt

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎community-chat-react-web-app-project/src/App.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from "react";
2+
import "./styles/App.css";
3+
import firebase from "firebase/app";
4+
import "firebase/firestore";
5+
import "firebase/auth";
6+
import { useAuthState } from "react-firebase-hooks/auth";
7+
import ChatRoom from "./components/ChatRoom";
8+
import SignIn from "./components/SignIn";
9+
import SignOut from "./components/SignOut";
10+
11+
firebase.initializeApp({
12+
// Go to projectConsole --> project Setting -->add web app --> copy all the config
13+
// apiKey: "", // Insert Your key Here
14+
// authDomain: "", // Insert Your authDomain Here
15+
// databaseURL: "", // Insert Your databaseURL Here
16+
// projectId: "", // Insert Your projectId Here
17+
// storageBucket: "", // Insert Your storageBucket Here
18+
// messagingSenderId: "", // Insert Your messagingSenderId Here
19+
// appId: "", // Insert Your appId Here
20+
// measurementId: "", // Insert Your measurementId Here
21+
});
22+
23+
const auth = firebase.auth();
24+
// const [user] = useAuthState(auth);
25+
26+
function App() {
27+
const [user] = useAuthState(auth);
28+
29+
return (
30+
<div className="App">
31+
<header>
32+
<h1>
33+
<span role="img" aria-label="message">
34+
Community Chat App 💬
35+
</span>
36+
</h1>
37+
<SignOut />
38+
</header>
39+
40+
<section>{user ? <ChatRoom /> : <SignIn />}</section>
41+
</div>
42+
);
43+
}
44+
45+
export default App;

‎community-chat-react-web-app-project/src/components/ChatMessage.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from "react";
2+
import "firebase/firestore";
3+
import "firebase/auth";
4+
import firebase from "firebase/app";
5+
6+
export default function ChatMessge(props) {
7+
const { text, uid, photoURL } = props.message;
8+
9+
const messageClass =
10+
uid === firebase.auth().currentUser.uid ? "sent" : "received";
11+
12+
return (
13+
<>
14+
<div className={`message ${messageClass}`}>
15+
<img
16+
src={
17+
photoURL ||
18+
"https://png.pngtree.com/png-vector/20190217/ourlarge/pngtree-vector-chat-icon-png-image_555480.jpg"
19+
}
20+
alt="profile_pic"
21+
/>
22+
<p>{text}</p>
23+
</div>
24+
</>
25+
);
26+
}

‎community-chat-react-web-app-project/src/components/ChatRoom.js

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, { useState, useRef } from "react";
2+
import firebase from "firebase/app";
3+
import "firebase/firestore";
4+
import "firebase/auth";
5+
import { useCollectionData } from "react-firebase-hooks/firestore";
6+
import ChatMessage from "./ChatMessage";
7+
8+
export default function ChatRoom() {
9+
const auth = firebase.auth();
10+
const firestore = firebase.firestore();
11+
const dummy = useRef();
12+
const messagesRef = firestore.collection("chatmessage");
13+
const query = messagesRef.orderBy("createdAt").limit(25);
14+
15+
const [chatmessage] = useCollectionData(query, { idField: "id" });
16+
17+
const [formValue, setFormValue] = useState("");
18+
19+
const sendMessage = async (e) => {
20+
e.preventDefault();
21+
22+
const { uid, photoURL } = auth.currentUser;
23+
24+
await messagesRef.add({
25+
text: formValue,
26+
createdAt: firebase.firestore.FieldValue.serverTimestamp(),
27+
uid,
28+
photoURL,
29+
});
30+
31+
setFormValue("");
32+
dummy.current.scrollIntoView({ behavior: "smooth" });
33+
};
34+
return (
35+
<>
36+
<main>
37+
{chatmessage &&
38+
chatmessage.map((msg) => <ChatMessage key={msg.id} message={msg} />)}
39+
40+
<span ref={dummy}></span>
41+
</main>
42+
43+
<form onSubmit={sendMessage}>
44+
<input
45+
value={formValue}
46+
onChange={(e) => setFormValue(e.target.value)}
47+
placeholder="let's Chat"
48+
/>
49+
50+
<button type="submit" disabled={!formValue}>
51+
<span role="img" aria-label="message">
52+
💌{" "}
53+
</span>
54+
Send
55+
</button>
56+
</form>
57+
</>
58+
);
59+
}

‎community-chat-react-web-app-project/src/components/SignIn.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
import firebase from "firebase/app";
3+
import "firebase/firestore";
4+
import "firebase/auth";
5+
6+
export default function SignIn() {
7+
const googleSignInOption = () => {
8+
const provider = new firebase.auth.GoogleAuthProvider();
9+
firebase.auth().signInWithPopup(provider);
10+
};
11+
12+
return (
13+
<>
14+
<button className="sign-in" onClick={googleSignInOption}>
15+
Sign in
16+
</button>
17+
<div className="main-start-font">Welcome! To the Community Chat App.</div>
18+
</>
19+
);
20+
}

‎community-chat-react-web-app-project/src/components/SignOut.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react";
2+
import firebase from "firebase/app";
3+
4+
export default function SignOut() {
5+
return (
6+
firebase.auth().currentUser && (
7+
<button className="sign-out" onClick={() => firebase.auth().signOut()}>
8+
Log Out
9+
</button>
10+
)
11+
);
12+
}

‎community-chat-react-web-app-project/src/index.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
body {
2+
margin: 0;
3+
}
4+
5+
code {
6+
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
7+
monospace;
8+
}

‎community-chat-react-web-app-project/src/index.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import "./index.css";
4+
import App from "./App";
5+
6+
ReactDOM.render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>,
10+
document.getElementById("root")
11+
);

‎community-chat-react-web-app-project/src/styles/App.css

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
2+
@import url("https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap");
3+
@import "./Body.css";
4+
@import "./Button.css";
5+
@import "./Form.css";
6+
@import "./Input.css";
7+
@import "./Message.css";
8+
9+
.App {
10+
text-align: center;
11+
max-width: 100%;
12+
margin: 0 auto;
13+
}
14+
15+
.App header {
16+
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
17+
background-size: 400% 400%;
18+
animation: gradient 15s ease infinite;
19+
font-family: "Finger Paint", cursive;
20+
font-size: 12px;
21+
height: 10vh;
22+
min-height: 50px;
23+
color: white;
24+
position: fixed;
25+
width: 100%;
26+
max-width: 100%;
27+
top: 0;
28+
display: flex;
29+
align-items: center;
30+
justify-content: space-between;
31+
z-index: 99;
32+
padding: 10px;
33+
box-sizing: border-box;
34+
}
35+
36+
.App section {
37+
display: flex;
38+
flex-direction: column;
39+
justify-content: center;
40+
min-height: 100vh;
41+
background-color: rgb(50, 46, 69);
42+
}
43+
44+
@keyframes gradient {
45+
0% {
46+
background-position: 0% 50%;
47+
}
48+
50% {
49+
background-position: 100% 50%;
50+
}
51+
100% {
52+
background-position: 0% 50%;
53+
}
54+
}

‎community-chat-react-web-app-project/src/styles/Body.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
body {
2+
background-color: #af4eae;
3+
font-family: "Share Tech Mono", monospace;
4+
}
5+
6+
main {
7+
padding: 10px;
8+
height: 80vh;
9+
margin: 10vh 0 10vh;
10+
overflow-y: scroll;
11+
display: flex;
12+
flex-direction: column;
13+
}
14+
15+
main::-webkit-scrollbar {
16+
width: 0.25rem;
17+
}
18+
19+
main::-webkit-scrollbar-track {
20+
background: #1e1e24;
21+
}
22+
23+
main::-webkit-scrollbar-thumb {
24+
background: #6649b8;
25+
}

0 commit comments

Comments
 (0)