├── server ├── .gitignore ├── .Procfile ├── .env.example ├── models │ ├── streamer.js │ ├── user.js │ ├── notipinMessage.js │ └── videoniMessage.js ├── routes │ ├── users.js │ ├── notipin.js │ ├── streamer.js │ └── videoni.js ├── sockets │ └── socket.js ├── package.json ├── controllers │ ├── streamer.js │ ├── notipin.js │ ├── videoni.js │ └── user.js └── index.js ├── client ├── public │ ├── _redirects │ ├── robots.txt │ ├── favicon.ico │ ├── hotemoji.png │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── .env.example ├── src │ ├── Audios │ │ └── audioNotif.wav │ ├── Component │ │ ├── Layout │ │ │ ├── Layout.css │ │ │ └── Layout.js │ │ ├── Account │ │ │ ├── Account.css │ │ │ └── Account.js │ │ ├── Dashboard │ │ │ ├── Dashboard.css │ │ │ └── Dashboard.js │ │ ├── Auth │ │ │ ├── AuthForm │ │ │ │ ├── AuthForm.css │ │ │ │ └── AuthForm.js │ │ │ ├── Auth.css │ │ │ └── Auth.js │ │ ├── Sidebar │ │ │ ├── Sidebar.css │ │ │ └── Sidebar.js │ │ ├── Notipin │ │ │ ├── Notipin.css │ │ │ └── Notipin.js │ │ ├── Footer │ │ │ ├── Footer.css │ │ │ └── Footer.js │ │ ├── Card │ │ │ ├── Card.js │ │ │ └── Card.css │ │ ├── Videoni │ │ │ ├── Videoni.css │ │ │ └── Videoni.js │ │ ├── Link │ │ │ ├── Link.css │ │ │ └── Link.js │ │ ├── Popup │ │ │ ├── Popup.css │ │ │ ├── Popupvideoni.js │ │ │ └── PopupNotipin.js │ │ ├── Result │ │ │ ├── ResultNotipin.js │ │ │ ├── Result.css │ │ │ └── ResultVideoni.js │ │ ├── Home │ │ │ ├── Home.css │ │ │ └── Home.js │ │ └── Nav │ │ │ ├── Nav.js │ │ │ └── Nav.css │ ├── reducers │ │ ├── index.js │ │ ├── notipin.js │ │ ├── videoni.js │ │ ├── streamer.js │ │ └── auth.js │ ├── App.css │ ├── constants │ │ └── constants.js │ ├── index.js │ ├── actions │ │ ├── notipin.js │ │ ├── videoni.js │ │ ├── streamer.js │ │ └── auth.js │ ├── api │ │ └── index.js │ └── App.js ├── .gitignore ├── package.json └── README.md └── README.md /server/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env -------------------------------------------------------------------------------- /client/public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /server/.Procfile: -------------------------------------------------------------------------------- 1 | web: npm run start 2 | -------------------------------------------------------------------------------- /client/.env.example: -------------------------------------------------------------------------------- 1 | SERVER_URL = "API URL" 2 | -------------------------------------------------------------------------------- /server/.env.example: -------------------------------------------------------------------------------- 1 | PORT = "PORT" 2 | 3 | CONNECTION_URL = "MONGO URL STRING" -------------------------------------------------------------------------------- /client/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IrPanK/stream-gift/HEAD/client/public/favicon.ico -------------------------------------------------------------------------------- /client/public/hotemoji.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IrPanK/stream-gift/HEAD/client/public/hotemoji.png -------------------------------------------------------------------------------- /client/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IrPanK/stream-gift/HEAD/client/public/logo192.png -------------------------------------------------------------------------------- /client/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IrPanK/stream-gift/HEAD/client/public/logo512.png -------------------------------------------------------------------------------- /client/src/Audios/audioNotif.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IrPanK/stream-gift/HEAD/client/src/Audios/audioNotif.wav -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # stream-gift 2 | ## Sorry this project currently not working 3 | Try my project here : https://streamgift.netlify.app/ 4 | -------------------------------------------------------------------------------- /client/src/Component/Layout/Layout.css: -------------------------------------------------------------------------------- 1 | .layout-footer { 2 | width: 100%; 3 | margin-top: 4rem; 4 | } 5 | 6 | .layout-content { 7 | min-height: 100vh; 8 | } 9 | -------------------------------------------------------------------------------- /server/models/streamer.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | 3 | const streamerSchema = mongoose.Schema({ 4 | name: String, 5 | idStreamer: String, 6 | }); 7 | 8 | export default mongoose.model("Streamer", streamerSchema); 9 | -------------------------------------------------------------------------------- /server/routes/users.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | 3 | import { signin, signup } from "../controllers/user.js"; 4 | 5 | const router = express.Router(); 6 | 7 | router.post("/signin", signin); 8 | router.post("/signup", signup); 9 | 10 | export default router; 11 | -------------------------------------------------------------------------------- /client/src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from "redux"; 2 | 3 | import notipin from "./notipin"; 4 | import videoni from "./videoni"; 5 | import auth from "./auth"; 6 | import streamer from "./streamer"; 7 | 8 | export default combineReducers({ notipin, auth, videoni, streamer }); 9 | -------------------------------------------------------------------------------- /server/routes/notipin.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | 3 | import { getNotipin, createNotipin } from "../controllers/notipin.js"; 4 | 5 | const router = express.Router(); 6 | 7 | router.get("/", getNotipin); 8 | router.post("/", createNotipin); 9 | 10 | export default router; 11 | -------------------------------------------------------------------------------- /server/routes/streamer.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | 3 | import { getSteamer, createStreamer } from "../controllers/streamer.js"; 4 | 5 | const router = express.Router(); 6 | 7 | router.get("/", getSteamer); 8 | router.post("/", createStreamer); 9 | 10 | export default router; 11 | -------------------------------------------------------------------------------- /server/routes/videoni.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | 3 | import { createVideoni, getVideoni } from "../controllers/videoni.js"; 4 | 5 | const router = express.Router(); 6 | 7 | router.get("/", getVideoni); 8 | router.post("/", createVideoni); 9 | 10 | export default router; 11 | -------------------------------------------------------------------------------- /client/src/App.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap"); 2 | 3 | * { 4 | font-family: "Poppins", sans-serif; 5 | box-sizing: border-box; 6 | padding: 0; 7 | margin: 0; 8 | scroll-behavior: smooth; 9 | } 10 | -------------------------------------------------------------------------------- /client/src/Component/Account/Account.css: -------------------------------------------------------------------------------- 1 | .account-container { 2 | display: grid; 3 | grid-template-columns: 1fr 1fr; 4 | gap: 2rem; 5 | max-width: 80%; 6 | margin-inline: auto; 7 | } 8 | 9 | @media (max-width: 55em) { 10 | .account-container { 11 | grid-template-columns: 1fr; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /server/models/user.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | 3 | const userSchema = mongoose.Schema({ 4 | name: { type: String, required: true }, 5 | email: { type: String, required: true }, 6 | password: { type: String, required: true }, 7 | id: { type: String }, 8 | }); 9 | 10 | export default mongoose.model("User", userSchema); 11 | -------------------------------------------------------------------------------- /client/src/Component/Dashboard/Dashboard.css: -------------------------------------------------------------------------------- 1 | .dashboard-container { 2 | display: grid; 3 | grid-template-columns: 1fr 1fr; 4 | gap: 2rem; 5 | max-width: 80%; 6 | margin-inline: auto; 7 | margin-bottom: 5rem; 8 | } 9 | 10 | @media (max-width: 55em) { 11 | .dashboard-container { 12 | grid-template-columns: 1fr; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /server/models/notipinMessage.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | 3 | const notipinSchema = mongoose.Schema( 4 | { 5 | creator: String, 6 | message: String, 7 | destination: String, 8 | }, 9 | { timestamps: true } 10 | ); 11 | 12 | const NotipinMessage = mongoose.model("NotipinMessage", notipinSchema); 13 | 14 | export default NotipinMessage; 15 | -------------------------------------------------------------------------------- /client/.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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env 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 | -------------------------------------------------------------------------------- /server/models/videoniMessage.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | 3 | const videoniSchema = mongoose.Schema( 4 | { 5 | creator: String, 6 | message: String, 7 | url: String, 8 | start: String, 9 | duration: String, 10 | destination: String, 11 | }, 12 | { timestamps: true } 13 | ); 14 | 15 | export default mongoose.model("VideoniMessage", videoniSchema); 16 | -------------------------------------------------------------------------------- /client/src/reducers/notipin.js: -------------------------------------------------------------------------------- 1 | import { CREATE, FETCH_ALL } from "../constants/constants"; 2 | 3 | // eslint-disable-next-line import/no-anonymous-default-export 4 | export default (notipin = [], action) => { 5 | switch (action.type) { 6 | case FETCH_ALL: 7 | return action.payload; 8 | case CREATE: 9 | return [...notipin, action.payload]; 10 | default: 11 | return notipin; 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /client/src/reducers/videoni.js: -------------------------------------------------------------------------------- 1 | import { CREATE_VIDEO, FETCH_ALL_VIDEO } from "../constants/constants"; 2 | 3 | // eslint-disable-next-line import/no-anonymous-default-export 4 | export default (videoni = [], action) => { 5 | switch (action.type) { 6 | case FETCH_ALL_VIDEO: 7 | return action.payload; 8 | case CREATE_VIDEO: 9 | return [...videoni, action.payload]; 10 | default: 11 | return videoni; 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /client/src/Component/Layout/Layout.js: -------------------------------------------------------------------------------- 1 | import Footer from "../Footer/Footer"; 2 | import Nav from "../Nav/Nav"; 3 | 4 | import "./Layout.css"; 5 | 6 | const Layout = ({ content }) => { 7 | return ( 8 |
9 |
15 | ); 16 | }; 17 | 18 | export default Layout; 19 | -------------------------------------------------------------------------------- /client/src/constants/constants.js: -------------------------------------------------------------------------------- 1 | export const FETCH_ALL = "FETCH_ALL"; 2 | export const CREATE = "CREATE"; 3 | 4 | export const FETCH_ALL_VIDEO = "FETCH_ALL_VIDEO"; 5 | export const CREATE_VIDEO = "CREATE_VIDEO"; 6 | 7 | export const FETCH_ALL_STREAMER = "FETCH_ALL_STREAMER"; 8 | export const CREATE_STREAMER = "CREATE_STREAMER"; 9 | 10 | export const AUTH = "AUTH"; 11 | export const LOGOUT = "LOGOUT"; 12 | export const FETCH_USER = "FETCH_USER"; 13 | export const USER_LOGOUT = "USER_LOGOUT"; 14 | -------------------------------------------------------------------------------- /client/src/reducers/streamer.js: -------------------------------------------------------------------------------- 1 | import { CREATE_STREAMER, FETCH_ALL_STREAMER } from "../constants/constants"; 2 | 3 | // eslint-disable-next-line import/no-anonymous-default-export 4 | export default (streamer = [], action) => { 5 | switch (action.type) { 6 | case FETCH_ALL_STREAMER: 7 | return action.payload; 8 | case CREATE_STREAMER: 9 | return [...streamer, action.payload]; 10 | default: 11 | return streamer; 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /client/src/Component/Auth/AuthForm/AuthForm.css: -------------------------------------------------------------------------------- 1 | .auth-label { 2 | font-size: 1.3rem; 3 | margin-left: 0.3rem; 4 | } 5 | 6 | .auth-input { 7 | display: block; 8 | height: 33px; 9 | border: 1px solid rgba(0, 0, 0, 0.5); 10 | border-radius: 6px; 11 | padding: 0.3rem 0.5rem; 12 | font-family: "Poppins", sans-serif; 13 | width: 100%; 14 | } 15 | 16 | .button-pass { 17 | position: absolute; 18 | top: 67%; 19 | right: 3%; 20 | font-size: 1rem; 21 | cursor: pointer; 22 | } 23 | -------------------------------------------------------------------------------- /client/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { Provider } from "react-redux"; 4 | import { createStore, applyMiddleware, compose } from "redux"; 5 | import thunk from "redux-thunk"; 6 | 7 | import reducers from "./reducers"; 8 | 9 | import App from "./App.js"; 10 | 11 | const store = createStore(reducers, compose(applyMiddleware(thunk))); 12 | 13 | const root = ReactDOM.createRoot(document.getElementById("root")); 14 | 15 | root.render( 16 | 17 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /server/sockets/socket.js: -------------------------------------------------------------------------------- 1 | const rootSocket = (io) => 2 | io.on("connection", (socket) => { 3 | // console.log("connect!!"); 4 | 5 | socket.on("notipin", ({ notipinData }) => { 6 | socket.broadcast.emit("popupNotipin", { notipinData }); 7 | }); 8 | 9 | socket.on("videoni", ({ videoniData }) => { 10 | socket.broadcast.emit("popupVideoni", { videoniData }); 11 | }); 12 | 13 | socket.on("disconnect", () => { 14 | // console.log("LEFT!"); 15 | }); 16 | }); 17 | 18 | export default rootSocket; 19 | -------------------------------------------------------------------------------- /client/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 | -------------------------------------------------------------------------------- /server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "start": "node index.js" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "bcryptjs": "^2.4.3", 15 | "body-parser": "^1.20.0", 16 | "cors": "^2.8.5", 17 | "dotenv": "^16.0.1", 18 | "express": "^4.18.1", 19 | "jsonwebtoken": "^8.5.1", 20 | "mongoose": "^6.3.5", 21 | "nodemon": "^2.0.16", 22 | "socket.io": "^4.5.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /client/src/actions/notipin.js: -------------------------------------------------------------------------------- 1 | import * as api from "../api"; 2 | import { CREATE, FETCH_ALL } from "../constants/constants"; 3 | 4 | export const getNotipin = () => async (dispatch) => { 5 | try { 6 | const { data } = await api.fetchNotipin(); 7 | 8 | dispatch({ type: FETCH_ALL, payload: data }); 9 | } catch (error) { 10 | console.log(error); 11 | } 12 | }; 13 | 14 | export const createNotipin = (notipin) => async (dispatch) => { 15 | try { 16 | const { data } = await api.createNotipin(notipin); 17 | 18 | dispatch({ type: CREATE, payload: data }); 19 | } catch (error) { 20 | console.log(error); 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /client/src/actions/videoni.js: -------------------------------------------------------------------------------- 1 | import * as api from "../api"; 2 | import { CREATE_VIDEO, FETCH_ALL_VIDEO } from "../constants/constants"; 3 | 4 | export const getVideoni = () => async (dispatch) => { 5 | try { 6 | const { data } = await api.fetchVideoni(); 7 | 8 | dispatch({ type: FETCH_ALL_VIDEO, payload: data }); 9 | } catch (error) { 10 | console.log(error); 11 | } 12 | }; 13 | 14 | export const createVideoni = (videoni) => async (dispatch) => { 15 | try { 16 | const { data } = await api.createVideoni(videoni); 17 | 18 | dispatch({ type: CREATE_VIDEO, payload: data }); 19 | } catch (error) { 20 | console.log(error); 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /client/src/actions/streamer.js: -------------------------------------------------------------------------------- 1 | import * as api from "../api"; 2 | 3 | import { CREATE_STREAMER, FETCH_ALL_STREAMER } from "../constants/constants"; 4 | 5 | export const getStreamer = () => async (dispatch) => { 6 | try { 7 | const { data } = await api.fetchStreamer(); 8 | 9 | dispatch({ type: FETCH_ALL_STREAMER, payload: data }); 10 | } catch (error) { 11 | console.log(error); 12 | } 13 | }; 14 | 15 | export const createStreamer = (streamer) => async (dispatch) => { 16 | try { 17 | const { data } = await api.createStreamer(streamer); 18 | 19 | dispatch({ type: CREATE_STREAMER, payload: data }); 20 | } catch (error) { 21 | console.log(error); 22 | } 23 | }; 24 | -------------------------------------------------------------------------------- /server/controllers/streamer.js: -------------------------------------------------------------------------------- 1 | import Streamer from "../models/streamer.js"; 2 | 3 | export const getSteamer = async (req, res) => { 4 | try { 5 | const streamerId = await Streamer.find(); 6 | 7 | res.status(200).json(streamerId); 8 | } catch (error) { 9 | res.status(404).json({ message: error.message }); 10 | } 11 | }; 12 | 13 | export const createStreamer = async (req, res) => { 14 | const streamerId = req.body; 15 | 16 | const newStreamer = new Streamer(streamerId); 17 | 18 | try { 19 | await newStreamer.save(); 20 | 21 | res.status(201).json(newStreamer); 22 | } catch (error) { 23 | res.status(409).json({ message: error.message }); 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /server/controllers/notipin.js: -------------------------------------------------------------------------------- 1 | import NotipinMessage from "../models/notipinMessage.js"; 2 | 3 | export const getNotipin = async (req, res) => { 4 | try { 5 | const notipinMessages = await NotipinMessage.find(); 6 | 7 | res.status(200).json(notipinMessages); 8 | } catch (error) { 9 | res.status(404).json({ message: error.message }); 10 | } 11 | }; 12 | 13 | export const createNotipin = async (req, res) => { 14 | const notipin = req.body; 15 | 16 | const newNotipin = new NotipinMessage(notipin); 17 | 18 | try { 19 | await newNotipin.save(); 20 | 21 | res.status(201).json(newNotipin); 22 | } catch (error) { 23 | res.status(409).json({ message: error.message }); 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /server/controllers/videoni.js: -------------------------------------------------------------------------------- 1 | import VideoniMessage from "../models/videoniMessage.js"; 2 | 3 | export const getVideoni = async (req, res) => { 4 | try { 5 | const videoniMessages = await VideoniMessage.find(); 6 | 7 | res.status(200).json(videoniMessages); 8 | } catch (error) { 9 | res.status(404).json({ message: error.message }); 10 | } 11 | }; 12 | 13 | export const createVideoni = async (req, res) => { 14 | const videoni = req.body; 15 | 16 | const newVideoni = new VideoniMessage(videoni); 17 | 18 | try { 19 | await newVideoni.save(); 20 | 21 | res.status(201).json(newVideoni); 22 | } catch (error) { 23 | res.status(409).json({ message: error.message }); 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /client/src/Component/Account/Account.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useParams } from "react-router"; 3 | import Card from "../Card/Card"; 4 | 5 | import "./Account.css"; 6 | 7 | const Account = () => { 8 | const params = useParams(); 9 | 10 | return ( 11 |
12 | 18 | 24 |
25 | ); 26 | }; 27 | 28 | export default Account; 29 | -------------------------------------------------------------------------------- /client/src/reducers/auth.js: -------------------------------------------------------------------------------- 1 | import { AUTH, FETCH_USER, LOGOUT, USER_LOGOUT } from "../constants/constants"; 2 | 3 | // eslint-disable-next-line import/no-anonymous-default-export 4 | export default (state = { authData: null }, action) => { 5 | switch (action.type) { 6 | case AUTH: 7 | localStorage.setItem( 8 | "profile", 9 | JSON.stringify({ ...action?.data }) 10 | ); 11 | return { ...state, authData: action?.data }; 12 | 13 | case LOGOUT: 14 | localStorage.clear(); 15 | 16 | return { ...state, authData: null }; 17 | 18 | case FETCH_USER: 19 | return action.data; 20 | 21 | case USER_LOGOUT: 22 | return { ...state, authData: null }; 23 | 24 | default: 25 | return state; 26 | } 27 | }; 28 | -------------------------------------------------------------------------------- /client/src/api/index.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | const API = axios.create({ 4 | // baseURL: "https://stream-gift-production.up.railway.app/", 5 | baseURL: process.env.SERVER_URL, 6 | }); 7 | // const API = axios.create({ baseURL: "http://localhost:5000" }); 8 | 9 | export const fetchNotipin = () => API.get("/notipin"); 10 | export const createNotipin = (newNotipin) => API.post("/notipin", newNotipin); 11 | 12 | export const fetchVideoni = () => API.get("/videoni"); 13 | export const createVideoni = (newVideoni) => API.post("/videoni", newVideoni); 14 | 15 | export const fetchStreamer = () => API.get("/streamer"); 16 | export const createStreamer = (newStreamer) => 17 | API.post("/streamer", newStreamer); 18 | 19 | export const signIn = (formData) => API.post("/user/signin", formData); 20 | export const signUp = (formData) => API.post("/user/signup", formData); 21 | -------------------------------------------------------------------------------- /client/src/Component/Sidebar/Sidebar.css: -------------------------------------------------------------------------------- 1 | .sidebar-container ul li { 2 | list-style-type: none; 3 | margin-top: 2rem; 4 | margin-right: 2rem; 5 | margin-inline: auto; 6 | } 7 | 8 | .sidebar-nav a { 9 | color: black; 10 | text-decoration: none; 11 | background-color: #e69bfe; 12 | border-radius: 8px; 13 | padding: 1rem; 14 | width: 100%; 15 | display: block; 16 | box-shadow: 7px 7px #691f82; 17 | transition: background-color 0.2s, box-shadow 0.2s; 18 | } 19 | 20 | .sidebar-nav a:hover { 21 | background-color: #eabbfa; 22 | box-shadow: 7px 7px rgb(218, 151, 240); 23 | } 24 | 25 | .sidebar-active a { 26 | background-color: #7a488a; 27 | color: #3f0054; 28 | text-decoration: none; 29 | border-radius: 8px; 30 | padding: 1rem; 31 | width: 100%; 32 | display: block; 33 | cursor: not-allowed; 34 | box-shadow: 7px 7px #3f0054; 35 | } 36 | -------------------------------------------------------------------------------- /client/src/Component/Dashboard/Dashboard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useSelector } from "react-redux"; 3 | import Card from "../Card/Card"; 4 | 5 | import "./Dashboard.css"; 6 | 7 | const Dashboard = () => { 8 | const { userId } = useSelector((state) => state.auth); 9 | 10 | return ( 11 |
12 | 17 | 22 | 27 | 32 |
33 | ); 34 | }; 35 | 36 | export default Dashboard; 37 | -------------------------------------------------------------------------------- /client/src/Component/Notipin/Notipin.css: -------------------------------------------------------------------------------- 1 | .notipin-container { 2 | max-width: 80%; 3 | margin-inline: auto; 4 | display: grid; 5 | grid-template-columns: 0.3fr 1fr; 6 | gap: 5rem; 7 | margin-top: 6rem; 8 | } 9 | 10 | .notipin-form { 11 | width: 80%; 12 | margin-inline: auto; 13 | } 14 | 15 | .notipin-input { 16 | height: 33px; 17 | border: 1px solid rgba(0, 0, 0, 0.5); 18 | border-radius: 6px; 19 | padding: 0.3rem 0.5rem; 20 | font-family: "Poppins", sans-serif; 21 | width: 100%; 22 | margin-bottom: 3rem; 23 | } 24 | 25 | .text-area { 26 | width: 100%; 27 | height: 50%; 28 | padding: 0.3rem 0.5rem; 29 | border-radius: 6px; 30 | } 31 | 32 | .notipin-submit { 33 | width: 100%; 34 | border: none; 35 | border-radius: 5px; 36 | padding: 0.5rem; 37 | background-color: #e294fd; 38 | transition: background-color 0.2s; 39 | cursor: pointer; 40 | font-weight: 600; 41 | letter-spacing: 0.07rem; 42 | margin-bottom: 3rem; 43 | } 44 | 45 | .notipin-submit:hover { 46 | background-color: #eab1fd; 47 | } 48 | 49 | @media (max-width: 43.75em) { 50 | .notipin-container { 51 | grid-template-columns: 1fr; 52 | margin-top: 6rem; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /client/src/Component/Footer/Footer.css: -------------------------------------------------------------------------------- 1 | .footer-container { 2 | text-align: center; 3 | width: 100%; 4 | padding: 1rem; 5 | background-color: #eabbfa; 6 | } 7 | 8 | .footer-contact-box { 9 | width: fit-content; 10 | margin-inline: auto; 11 | display: flex; 12 | margin-bottom: 0.8rem; 13 | gap: 3rem; 14 | } 15 | 16 | .footer-icon-box { 17 | display: flex; 18 | justify-content: start; 19 | gap: 1.5rem; 20 | padding: 0.3rem; 21 | } 22 | 23 | .footer-icon { 24 | font-size: 25px; 25 | cursor: pointer; 26 | transition: all 0.2s; 27 | } 28 | 29 | .footer-icon:hover { 30 | color: #ca7ae4; 31 | } 32 | 33 | .footer-email { 34 | color: black; 35 | text-decoration: none; 36 | cursor: pointer; 37 | margin-top: 0.2rem; 38 | transition: all 0.2s; 39 | } 40 | 41 | .footer-email:hover { 42 | color: #ca7ae4; 43 | } 44 | 45 | .footer-email-box { 46 | text-align: left; 47 | } 48 | 49 | .footer-bold { 50 | font-weight: 600; 51 | } 52 | 53 | @media (max-width: 26.875em) { 54 | .footer-contact-box { 55 | display: block; 56 | } 57 | 58 | .footer-bold { 59 | text-align: center; 60 | } 61 | 62 | .footer-email { 63 | margin-bottom: 0.8rem; 64 | } 65 | 66 | .footer-icon-box { 67 | justify-content: center; 68 | gap: 1.5rem; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /client/src/Component/Card/Card.js: -------------------------------------------------------------------------------- 1 | import { useNavigate } from "react-router"; 2 | 3 | import "./Card.css"; 4 | 5 | const Card = ({ title, desc, disable, goto }) => { 6 | let navigate = useNavigate(); 7 | 8 | const moveTo = (props) => { 9 | navigate(`${props.target.id}`); 10 | }; 11 | 12 | return ( 13 |
18 |

28 | {title} 29 |

30 |
40 | {desc} 41 |
42 |
43 | ); 44 | }; 45 | 46 | export default Card; 47 | -------------------------------------------------------------------------------- /client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stream-gift", 3 | "version": "0.1.0", 4 | "private": true, 5 | "proxy": "http://localhost:5000", 6 | "dependencies": { 7 | "@react-oauth/google": "^0.2.6", 8 | "@testing-library/jest-dom": "^5.16.4", 9 | "@testing-library/react": "^13.3.0", 10 | "@testing-library/user-event": "^13.5.0", 11 | "axios": "^0.27.2", 12 | "jwt-decode": "^3.1.2", 13 | "moment": "^2.29.3", 14 | "react": "^18.1.0", 15 | "react-dom": "^18.1.0", 16 | "react-icons": "^4.4.0", 17 | "react-player": "^2.10.1", 18 | "react-redux": "^8.0.2", 19 | "react-router": "^6.3.0", 20 | "react-router-dom": "^6.3.0", 21 | "react-scripts": "5.0.1", 22 | "redux": "^4.2.0", 23 | "redux-thunk": "^2.4.1", 24 | "socket.io-client": "^4.5.1", 25 | "web-vitals": "^2.1.4" 26 | }, 27 | "scripts": { 28 | "start": "react-scripts start", 29 | "build": "react-scripts build", 30 | "test": "react-scripts test", 31 | "eject": "react-scripts eject" 32 | }, 33 | "eslintConfig": { 34 | "extends": [ 35 | "react-app", 36 | "react-app/jest" 37 | ] 38 | }, 39 | "browserslist": { 40 | "production": [ 41 | ">0.2%", 42 | "not dead", 43 | "not op_mini all" 44 | ], 45 | "development": [ 46 | "last 1 chrome version", 47 | "last 1 firefox version", 48 | "last 1 safari version" 49 | ] 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /client/src/Component/Auth/AuthForm/AuthForm.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { FiEye, FiEyeOff } from "react-icons/fi"; 3 | 4 | import "./AuthForm.css"; 5 | 6 | const AuthForm = ({ 7 | name, 8 | label, 9 | type, 10 | className, 11 | handleChange, 12 | seePassword, 13 | }) => { 14 | const [showPassword, setShowPassword] = useState(false); 15 | 16 | return ( 17 |
18 | 21 | 29 | {seePassword ? ( 30 |
34 | setShowPassword((prevShowPassword) => !prevShowPassword) 35 | } 36 | > 37 | {showPassword ? : } 38 |
39 | ) : null} 40 |
41 | ); 42 | }; 43 | 44 | export default AuthForm; 45 | -------------------------------------------------------------------------------- /client/src/Component/Videoni/Videoni.css: -------------------------------------------------------------------------------- 1 | .videoni-container { 2 | max-width: 80%; 3 | margin-inline: auto; 4 | display: grid; 5 | grid-template-columns: 0.3fr 1fr; 6 | gap: 5rem; 7 | margin-top: 6rem; 8 | } 9 | 10 | .videoni-form { 11 | width: 80%; 12 | margin-inline: auto; 13 | } 14 | 15 | .videoni-input { 16 | height: 33px; 17 | border: 1px solid rgba(0, 0, 0, 0.5); 18 | border-radius: 6px; 19 | padding: 0.3rem 0.5rem; 20 | font-family: "Poppins", sans-serif; 21 | width: 100%; 22 | margin-bottom: 3rem; 23 | } 24 | 25 | .videoni-setting { 26 | display: grid; 27 | grid-template-columns: 1fr 1fr; 28 | grid-gap: 2rem; 29 | } 30 | 31 | .videoni-submit { 32 | width: 100%; 33 | border: none; 34 | border-radius: 5px; 35 | padding: 0.5rem; 36 | background-color: #e294fd; 37 | transition: background-color 0.2s; 38 | cursor: pointer; 39 | font-weight: 600; 40 | letter-spacing: 0.07rem; 41 | margin-bottom: 3rem; 42 | } 43 | 44 | .videoni-submit:hover { 45 | background-color: #eab1fd; 46 | } 47 | 48 | @media (max-width: 43.75em) { 49 | .videoni-container { 50 | grid-template-columns: 1fr; 51 | margin-top: 1rem; 52 | } 53 | } 54 | 55 | @media (max-width: 49.375em) { 56 | .videoni-setting { 57 | grid-template-columns: 1fr; 58 | grid-gap: 0; 59 | } 60 | 61 | .videoni-container { 62 | margin-top: 6rem; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /client/src/Component/Link/Link.css: -------------------------------------------------------------------------------- 1 | .link-container { 2 | max-width: 80%; 3 | margin-inline: auto; 4 | display: grid; 5 | grid-template-columns: 1fr 1fr 1fr; 6 | gap: 1rem; 7 | margin-top: 1rem; 8 | margin-bottom: 5rem; 9 | } 10 | 11 | .link-box { 12 | text-align: center; 13 | } 14 | 15 | .link-text { 16 | font-size: 1.6rem; 17 | margin-top: 1.5rem; 18 | } 19 | 20 | .link-putbut { 21 | height: 2rem; 22 | } 23 | 24 | .link-input { 25 | width: 80%; 26 | height: 100%; 27 | padding: 0 0.5rem; 28 | border-top-left-radius: 10px; 29 | border-bottom-left-radius: 10px; 30 | border-top-right-radius: 0; 31 | border-bottom-right-radius: 0; 32 | border: 2px solid black; 33 | border-right: none; 34 | } 35 | 36 | .link-button { 37 | font-weight: 500; 38 | border: none; 39 | height: 100%; 40 | padding: 0 0.5rem; 41 | background-color: #eabbfa; 42 | cursor: pointer; 43 | transition: background-color 0.15s; 44 | border-top-left-radius: 0; 45 | border-bottom-left-radius: 0; 46 | border-top-right-radius: 10px; 47 | border-bottom-right-radius: 10px; 48 | border: 2px solid black; 49 | border-left: none; 50 | } 51 | 52 | .link-button:hover { 53 | background-color: #ca79e4; 54 | } 55 | 56 | .link-span { 57 | font-size: 1rem; 58 | color: rgb(83, 83, 83); 59 | } 60 | 61 | @media (max-width: 84.375em) { 62 | .link-container { 63 | grid-template-columns: 1fr; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /client/src/Component/Card/Card.css: -------------------------------------------------------------------------------- 1 | .card { 2 | border: 2px solid black; 3 | border-radius: 8px; 4 | padding: 1.5rem 2.5rem; 5 | height: 100%; 6 | cursor: pointer; 7 | transition: background-color 0.2s; 8 | } 9 | 10 | .card:hover { 11 | background-color: rgb(253, 253, 141); 12 | } 13 | 14 | .card-desc { 15 | font-weight: 400; 16 | margin-top: 0; 17 | margin-bottom: 3rem; 18 | } 19 | 20 | .card-desc-streamer { 21 | font-weight: 100; 22 | font-size: 1.3rem; 23 | margin-top: 0; 24 | text-align: center; 25 | color: rgb(100, 100, 100); 26 | /* margin-bottom: 3rem; */ 27 | } 28 | 29 | .card-title { 30 | margin-bottom: 1rem; 31 | } 32 | 33 | .card-title-streamer { 34 | margin-bottom: 1rem; 35 | font-size: 2.5rem; 36 | text-align: center; 37 | } 38 | 39 | .card-disable { 40 | cursor: no-drop; 41 | background-color: rgb(183, 183, 183); 42 | border: 2px solid rgb(145, 145, 145); 43 | color: rgb(98, 98, 98); 44 | } 45 | 46 | .card-disable:hover { 47 | background-color: rgb(183, 183, 183); 48 | } 49 | 50 | @media (max-width: 27.5em) { 51 | .card-title { 52 | font-size: 3rem; 53 | } 54 | 55 | .card-desc { 56 | font-size: 1.2rem; 57 | } 58 | 59 | .card-title-streamer { 60 | font-size: 1.7rem; 61 | } 62 | 63 | .card-desc-streamer { 64 | font-size: 1rem; 65 | padding: 0 0.5rem; 66 | } 67 | 68 | .card { 69 | padding: 0.5rem 0; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /client/src/Component/Popup/Popup.css: -------------------------------------------------------------------------------- 1 | .popup-container { 2 | border: 2px solid black; 3 | border-radius: 8px; 4 | margin: 1rem 2rem; 5 | padding: 0.5rem; 6 | max-height: 490px; 7 | background-color: #ca79e4; 8 | box-shadow: 10px 10px #3b3b3b; 9 | } 10 | 11 | .popup-text { 12 | text-align: center; 13 | font-size: 3.5rem; 14 | } 15 | 16 | .popup-message { 17 | font-size: 2.5rem; 18 | margin-bottom: 0.5rem; 19 | line-height: 1.2; 20 | } 21 | 22 | .popup-span { 23 | color: rgb(99, 35, 124); 24 | } 25 | 26 | .popin { 27 | position: relative; 28 | animation: popIn 0.5s 1; 29 | } 30 | 31 | .audio { 32 | visibility: hidden; 33 | } 34 | 35 | .video { 36 | display: flex; 37 | width: 90%; 38 | aspect-ratio: 16 / 9; 39 | margin-inline: auto; 40 | } 41 | 42 | @keyframes popIn { 43 | from { 44 | top: -600px; 45 | } 46 | to { 47 | top: 0px; 48 | } 49 | } 50 | 51 | .popup-notloggedin-container { 52 | width: 80%; 53 | margin-inline: auto; 54 | text-align: center; 55 | margin-top: 5rem; 56 | } 57 | 58 | .popup-notloggedin-container h1 { 59 | text-align: center; 60 | margin-bottom: 1rem; 61 | } 62 | 63 | .popup-notloggedin-button { 64 | color: black; 65 | text-decoration: none; 66 | background-color: #e294fd; 67 | border-radius: 8px; 68 | padding: 0.5rem 1rem; 69 | transition: all 0.2s ease-in-out; 70 | } 71 | 72 | .popup-notloggedin-button:hover { 73 | background-color: #eab1fd; 74 | } 75 | -------------------------------------------------------------------------------- /client/src/actions/auth.js: -------------------------------------------------------------------------------- 1 | import decode from "jwt-decode"; 2 | import * as api from "../api"; 3 | import { AUTH, FETCH_USER, LOGOUT } from "../constants/constants"; 4 | 5 | export const signin = (formData, navigate) => async (dispatch) => { 6 | try { 7 | const { data } = await api.signIn(formData); 8 | 9 | dispatch({ type: AUTH, data }); 10 | dispatch(getUser()); 11 | 12 | navigate("/"); 13 | } catch (error) { 14 | alert(error.response.data.message); 15 | console.log(error); 16 | } 17 | }; 18 | 19 | export const signup = (formData, navigate) => async (dispatch) => { 20 | try { 21 | const { data } = await api.signUp(formData); 22 | 23 | dispatch({ type: AUTH, data }); 24 | dispatch(getUser()); 25 | 26 | navigate("/"); 27 | } catch (error) { 28 | console.log(error); 29 | console.log(error.response.data); 30 | } 31 | }; 32 | 33 | export const getUser = () => async (dispatch) => { 34 | try { 35 | const user = JSON.parse(localStorage.getItem("profile")); 36 | 37 | if (user) { 38 | const token = user?.token; 39 | 40 | const decodedToken = decode(token); 41 | 42 | if (decodedToken.exp * 1000 < new Date().getTime()) { 43 | dispatch({ type: LOGOUT }); 44 | } 45 | 46 | const userId = decodedToken?.sub || decodedToken?.existingUser?._id; 47 | const name = decodedToken?.name || decodedToken?.existingUser?.name; 48 | 49 | dispatch({ type: FETCH_USER, data: { userId, name } }); 50 | } 51 | } catch (error) { 52 | console.log(error); 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /server/index.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import bodyParser from "body-parser"; 3 | import mongoose from "mongoose"; 4 | import cors from "cors"; 5 | import dotenv from "dotenv"; 6 | import { createServer } from "http"; 7 | import { Server } from "socket.io"; 8 | 9 | import notipinRoutes from "./routes/notipin.js"; 10 | import videoniRoutes from "./routes/videoni.js"; 11 | import userRoutes from "./routes/users.js"; 12 | import streamerRoutes from "./routes/streamer.js"; 13 | import rootSocket from "./sockets/socket.js"; 14 | 15 | const app = express(); 16 | const server = createServer(app); 17 | const io = new Server(server); 18 | dotenv.config(); 19 | 20 | app.use(bodyParser.json({ limit: "30mb", extended: true })); 21 | app.use(bodyParser.urlencoded({ limit: "30mb", extended: true })); 22 | app.use(cors()); 23 | 24 | app.use("/notipin", notipinRoutes); 25 | app.use("/videoni", videoniRoutes); 26 | app.use("/user", userRoutes); 27 | app.use("/streamer", streamerRoutes); 28 | 29 | // greeting 30 | app.get("/", (req, res) => { 31 | res.send("Hello to stream gift API"); 32 | res.setHeader("Access-Control-Allow-Origin", "*"); 33 | res.setHeader("Access-Control-Allow-Credentials", "true"); 34 | res.setHeader("Access-Control-Max-Age", "1800"); 35 | res.setHeader("Access-Control-Allow-Headers", "content-type"); 36 | res.setHeader( 37 | "Access-Control-Allow-Methods", 38 | "PUT, POST, GET, DELETE, PATCH, OPTIONS" 39 | ); 40 | }); 41 | 42 | const PORT = process.env.PORT || 5000; 43 | 44 | server.listen(PORT, () => console.log(`Server running on port: ${PORT}`)); 45 | 46 | mongoose 47 | .connect(process.env.CONNECTION_URL) 48 | .then() 49 | .catch((error) => console.log(error)); 50 | 51 | rootSocket(io); 52 | -------------------------------------------------------------------------------- /client/src/Component/Result/ResultNotipin.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useSelector } from "react-redux"; 3 | import moment from "moment"; 4 | import Sidebar from "../Sidebar/Sidebar"; 5 | 6 | import "./Result.css"; 7 | import { useNavigate } from "react-router"; 8 | 9 | const ResultNotipin = () => { 10 | const navigate = useNavigate(); 11 | 12 | const { userId } = useSelector((state) => state.auth); 13 | const notipin = useSelector((state) => state.notipin); 14 | 15 | return ( 16 | <> 17 |
navigate(`/dashboard/`)} 20 | > 21 | Streamer Dashboard 22 |
23 |
24 | 25 |
26 | {notipin 27 | .filter((e) => e.destination === userId) 28 | .map((notip) => ( 29 |
30 |

31 | {notip.creator} 32 |

33 |
34 | {notip.message} 35 |
36 |
37 | {moment(notip.createdAt).fromNow()} 38 |
39 |
40 | ))} 41 |
42 |
43 | 44 | ); 45 | }; 46 | 47 | export default ResultNotipin; 48 | -------------------------------------------------------------------------------- /server/controllers/user.js: -------------------------------------------------------------------------------- 1 | import bcrypt from "bcryptjs"; 2 | import jwt from "jsonwebtoken"; 3 | 4 | import User from "../models/user.js"; 5 | 6 | export const signin = async (req, res) => { 7 | const { email, password } = req.body; 8 | 9 | try { 10 | const existingUser = await User.findOne({ email }); 11 | 12 | if (!existingUser) 13 | return res.status(404).json({ message: "User doesn't exist." }); 14 | 15 | const isPasswordCorrect = await bcrypt.compare( 16 | password, 17 | existingUser.password 18 | ); 19 | 20 | if (!isPasswordCorrect) 21 | return res.status(400).json({ message: "Invalid credentials." }); 22 | 23 | const token = jwt.sign({ existingUser }, "test", { expiresIn: "1h" }); 24 | 25 | res.status(200).json({ token }); 26 | } catch (error) { 27 | res.status(500).json({ message: "Something went wrong" }); 28 | } 29 | }; 30 | 31 | export const signup = async (req, res) => { 32 | const { email, password, confirmPass, firstName, lastName } = req.body; 33 | 34 | try { 35 | const existingUser = await User.findOne({ email }); 36 | 37 | if (existingUser) 38 | return res.status(400).json({ message: "User already exist." }); 39 | 40 | if (password !== confirmPass) 41 | return res.status(400).json({ message: "Password don't match." }); 42 | 43 | const hashedPass = await bcrypt.hash(password, 12); 44 | 45 | const result = await User.create({ 46 | email, 47 | password: hashedPass, 48 | name: `${firstName} ${lastName}`, 49 | }); 50 | 51 | const token = jwt.sign({ result }, "test", { expiresIn: "1h" }); 52 | 53 | res.status(200).json({ token }); 54 | } catch (error) { 55 | res.status(500).json({ message: "Something went wrong" }); 56 | } 57 | }; 58 | -------------------------------------------------------------------------------- /client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Stream Gift 28 | 33 | 34 | 35 | 36 |
37 | 47 | 48 | -------------------------------------------------------------------------------- /client/src/Component/Result/Result.css: -------------------------------------------------------------------------------- 1 | .result-container { 2 | max-width: 80%; 3 | margin-inline: auto; 4 | display: grid; 5 | grid-template-columns: 0.3fr 1fr; 6 | gap: 5rem; 7 | margin-top: 1rem; 8 | margin-bottom: 5rem; 9 | } 10 | 11 | @media (max-width: 43.75em) { 12 | .result-container { 13 | grid-template-columns: 1fr; 14 | } 15 | } 16 | 17 | .result-outer { 18 | display: flex; 19 | flex-direction: column-reverse; 20 | width: 100%; 21 | } 22 | 23 | .result-box { 24 | border: 2px solid black; 25 | padding: 2rem; 26 | margin-bottom: 5rem; 27 | min-width: 80%; 28 | margin-inline: auto; 29 | } 30 | 31 | .result-creator { 32 | margin: 0; 33 | font-size: 3rem; 34 | } 35 | 36 | .result-message { 37 | margin: 0; 38 | font-size: 1.5rem; 39 | font-weight: 500; 40 | /* color: rgb(95, 95, 95); */ 41 | } 42 | 43 | @media (max-width: 48em) { 44 | .result-creator { 45 | font-size: 2rem; 46 | } 47 | 48 | .result-message { 49 | font-size: 1rem; 50 | } 51 | } 52 | 53 | @media (max-width: 23.4375em) { 54 | .result-creator { 55 | font-size: 1.5rem; 56 | } 57 | 58 | .result-message { 59 | font-size: 0.9rem; 60 | } 61 | } 62 | 63 | .result-moment { 64 | margin: 0; 65 | color: grey; 66 | font-size: 1rem; 67 | font-weight: 100; 68 | } 69 | 70 | .result-url { 71 | font-size: 1.3rem; 72 | cursor: pointer; 73 | } 74 | 75 | .result-url:hover { 76 | color: #ca79e4; 77 | } 78 | 79 | .result-setting { 80 | font-size: 1rem; 81 | display: inline; 82 | color: rgb(79, 79, 79); 83 | margin-right: 2rem; 84 | } 85 | 86 | @media (max-width: 48em) { 87 | .result-url { 88 | font-size: 1rem; 89 | } 90 | } 91 | 92 | @media (max-width: 26.5625em) { 93 | .result-url { 94 | font-size: 0.65rem; 95 | } 96 | 97 | .result-setting { 98 | font-size: 0.7rem; 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /client/src/Component/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { SiInstagram, SiYoutube } from "react-icons/si"; 3 | import { Link } from "react-router-dom"; 4 | import "./Footer.css"; 5 | 6 | const Footer = () => { 7 | return ( 8 |
9 |
10 |
11 |

Contact Me

12 |
14 | window.open( 15 | "mailto:irfannkamill@gmail.com", 16 | "_blank" 17 | ) 18 | } 19 | className="footer-email" 20 | > 21 | irfannkamill@gmail.com 22 |
23 |
24 |
25 |

Social Media

26 |
27 | 30 | window.open( 31 | "https://www.instagram.com/irpantech/", 32 | "_blank" 33 | ) 34 | } 35 | /> 36 | 39 | window.open( 40 | "https://www.youtube.com/@irpantech1226", 41 | "_blank" 42 | ) 43 | } 44 | /> 45 |
46 |
47 |
48 |
49 |

made with ❤ by Irfan Kamil

50 |
51 |
52 | ); 53 | }; 54 | 55 | export default Footer; 56 | -------------------------------------------------------------------------------- /client/src/Component/Auth/Auth.css: -------------------------------------------------------------------------------- 1 | .auth-firstName { 2 | grid-area: firstName; 3 | } 4 | .auth-lastName { 5 | grid-area: lastName; 6 | } 7 | .auth-email { 8 | grid-area: email; 9 | } 10 | .auth-password { 11 | grid-area: password; 12 | position: relative; 13 | } 14 | .auth-confirmPass { 15 | grid-area: confirmPass; 16 | margin-bottom: 1rem; 17 | } 18 | 19 | .auth-container { 20 | margin-top: 6rem; 21 | margin-bottom: 3rem; 22 | max-width: 25rem; 23 | margin-inline: auto; 24 | display: grid; 25 | grid-template-areas: 26 | "firstName lastName" 27 | "email email" 28 | "password password" 29 | "confirmPass confirmPass" 30 | "button button" 31 | "google google" 32 | "isSignUp isSignUp"; 33 | grid-gap: 0.5rem; 34 | } 35 | 36 | .auth-button { 37 | grid-area: button; 38 | width: 100%; 39 | background-color: rgb(107, 107, 107); 40 | color: white; 41 | border: none; 42 | border-radius: 5px; 43 | padding: 0.4rem; 44 | cursor: pointer; 45 | transition: background-color 0.2s; 46 | } 47 | 48 | .auth-button:hover { 49 | background-color: rgb(35, 35, 35); 50 | } 51 | 52 | .auth-google { 53 | grid-area: google; 54 | border: none; 55 | background: none; 56 | margin-inline: auto; 57 | } 58 | 59 | .auth-issignup { 60 | grid-area: isSignUp; 61 | border: none; 62 | background-color: transparent; 63 | text-align: center; 64 | margin-top: 0.2rem; 65 | cursor: pointer; 66 | } 67 | 68 | .auth-issignup:hover { 69 | color: #ca79e4; 70 | } 71 | 72 | .auth-issignup::before { 73 | content: ""; 74 | display: block; 75 | width: 5%; 76 | height: 3px; 77 | border-radius: 50px; 78 | background-color: rgb(107, 107, 107); 79 | margin-bottom: 0.3rem; 80 | margin-inline: auto; 81 | } 82 | 83 | @media (max-width: 28.75em) { 84 | .auth-container { 85 | grid-template-areas: 86 | "firstName firstName" 87 | "lastName lastName" 88 | "email email" 89 | "password password" 90 | "confirmPass confirmPass" 91 | "button button" 92 | "google google" 93 | "isSignUp isSignUp"; 94 | margin: 1rem; 95 | margin-top: 6rem; 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /client/src/Component/Notipin/Notipin.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useDispatch } from "react-redux"; 3 | import { useParams } from "react-router"; 4 | import { createNotipin } from "../../actions/notipin"; 5 | 6 | import Sidebar from "../Sidebar/Sidebar"; 7 | import "./Notipin.css"; 8 | 9 | const Notipin = ({ currentSocket }) => { 10 | const params = useParams(); 11 | const dispatch = useDispatch(); 12 | 13 | const [notipinData, setNotipinData] = useState({ 14 | creator: "", 15 | message: "", 16 | destination: params.id, 17 | }); 18 | 19 | const handleSubmit = (e) => { 20 | e.preventDefault(); 21 | 22 | dispatch(createNotipin(notipinData)); 23 | 24 | setNotipinData({ ...notipinData, creator: "", message: "" }); 25 | 26 | currentSocket.emit("notipin", { notipinData }); 27 | }; 28 | 29 | const handleChange = (e) => { 30 | setNotipinData({ ...notipinData, [e.target.name]: e.target.value }); 31 | }; 32 | 33 | const handleKey = (e) => { 34 | if (e.key === "Enter") { 35 | handleSubmit(e); 36 | } 37 | }; 38 | 39 | return ( 40 |
41 | 42 |
43 | 44 | 54 | 55 | 64 | 67 |
68 |
69 | ); 70 | }; 71 | 72 | export default Notipin; 73 | -------------------------------------------------------------------------------- /client/src/Component/Result/ResultVideoni.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useSelector } from "react-redux"; 3 | import moment from "moment"; 4 | import Sidebar from "../Sidebar/Sidebar"; 5 | 6 | import "./Result.css"; 7 | import { useNavigate } from "react-router"; 8 | 9 | const ResultVideoni = () => { 10 | const navigate = useNavigate(); 11 | 12 | const { userId } = useSelector((state) => state.auth); 13 | const videoni = useSelector((state) => state.videoni); 14 | 15 | return ( 16 | <> 17 |
navigate(`/dashboard`)} 20 | > 21 | Streamer Dashboard 22 |
23 |
24 | 25 |
26 | {videoni 27 | .filter((e) => e.destination === userId) 28 | .map((video) => ( 29 |
30 |

31 | {video.creator} 32 |

33 |
34 | {video.message} 35 |
36 |

window.open(video.url)} 39 | > 40 | {video.url} 41 |

42 |

43 | Start:   {video.start} 44 |

45 |

46 | Duration:   {video.duration} 47 |

48 |
49 | {moment(video.createdAt).fromNow()} 50 |
51 |
52 | ))} 53 |
54 |
55 | 56 | ); 57 | }; 58 | 59 | export default ResultVideoni; 60 | -------------------------------------------------------------------------------- /client/src/Component/Popup/Popupvideoni.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ReactPlayer from "react-player"; 3 | import { io } from "socket.io-client"; 4 | import { Link, useLocation } from "react-router-dom"; 5 | 6 | import "./Popup.css"; 7 | 8 | const Popupvideoni = () => { 9 | const { search } = useLocation(); 10 | const parameters = new URLSearchParams(search); 11 | 12 | const [videoni, setVideoni] = useState(""); 13 | const [duration, setDuration] = useState(0); 14 | const [play, setPlay] = useState(0); 15 | const [popupData, setPopupData] = useState(""); 16 | const [userId, setUser] = useState(parameters.get("user")); 17 | 18 | const ENDPOINT = process.env.SERVER_URL; 19 | 20 | useEffect(() => { 21 | const socket = io(ENDPOINT); 22 | socket.on("popupVideoni", ({ videoniData }) => { 23 | if (videoniData.destination === userId) { 24 | setVideoni(videoniData); 25 | setDuration(Number(`${videoniData.duration}000`)); 26 | setPlay(Number(videoniData.start)); 27 | } 28 | }); 29 | 30 | if (popupData === "") { 31 | setPopupData(videoni); 32 | } 33 | }, [videoni]); 34 | 35 | useEffect(() => { 36 | setTimeout(() => { 37 | setVideoni(""); 38 | setPopupData(""); 39 | }, duration); 40 | }, [popupData]); 41 | 42 | return ( 43 |
44 | {userId ? ( 45 | popupData ? ( 46 |
47 | 61 |
62 |

63 | {popupData.creator} 64 |   65 | curhat 66 |

67 |

68 | {popupData.message} 69 |

70 |
71 |
72 | ) : null 73 | ) : ( 74 |
75 |

You're Not Logged Yet

76 | 77 | Sign In 78 | 79 |
80 | )} 81 |
82 | ); 83 | }; 84 | 85 | export default Popupvideoni; 86 | -------------------------------------------------------------------------------- /client/src/Component/Sidebar/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link, useParams } from "react-router-dom"; 3 | 4 | import "./Sidebar.css"; 5 | 6 | const Sidebar = ({ active }) => { 7 | const params = useParams(); 8 | 9 | return ( 10 |
11 | 79 |
80 | ); 81 | }; 82 | 83 | export default Sidebar; 84 | -------------------------------------------------------------------------------- /client/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /client/src/Component/Popup/PopupNotipin.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { io } from "socket.io-client"; 3 | import { Link, useLocation } from "react-router-dom"; 4 | 5 | import "./Popup.css"; 6 | import audio from "../../Audios/audioNotif.wav"; 7 | 8 | const PopupNotipin = ({ currentSocket }) => { 9 | const { search } = useLocation(); 10 | const parameters = new URLSearchParams(search); 11 | 12 | const [popupData, setPopupData] = useState([]); 13 | const [popupMessage, setPopupMessage] = useState(""); 14 | const [creator, setCreator] = useState(""); 15 | const [message, setMessage] = useState(""); 16 | const [userId, setUser] = useState(parameters.get("user")); 17 | 18 | const ENDPOINT = process.env.SERVER_URL; 19 | 20 | useEffect(() => { 21 | if (popupMessage === "") { 22 | const socket = io(ENDPOINT); 23 | socket.on("popupNotipin", ({ notipinData }) => { 24 | if (notipinData.destination === userId) { 25 | setCreator(notipinData.creator); 26 | setMessage(notipinData.message); 27 | } 28 | }); 29 | 30 | setPopupData([ 31 | ...popupData, 32 | { 33 | creator, 34 | message, 35 | }, 36 | ]); 37 | } 38 | }, [creator, message]); 39 | 40 | useEffect(() => { 41 | if (creator) { 42 | setPopupMessage( 43 | `${popupData[popupData.length - 1]?.creator} curhat ${ 44 | popupData[popupData.length - 1]?.message 45 | }` 46 | ); 47 | } 48 | 49 | return () => { 50 | let timer; 51 | clearTimeout(timer); 52 | timer = setTimeout(() => setPopupMessage(""), 10000); 53 | }; 54 | }, [popupData]); 55 | 56 | return ( 57 |
58 | {userId ? ( 59 | popupMessage === "" ? null : ( 60 |
61 |
66 |

67 | {popupMessage.split("curhat")[0]}{" "} 68 | curhat 69 |

70 |

71 | {popupMessage.split("curhat")[1].length >= 200 72 | ? `${popupMessage 73 | .split("curhat")[1] 74 | .substr(0, 200)}...` 75 | : popupMessage.split("curhat")[1]} 76 |

77 |
78 | 79 | 82 |
83 | ) 84 | ) : ( 85 |
86 |

You're Not Logged Yet

87 | 88 | Sign In 89 | 90 |
91 | )} 92 |
93 | ); 94 | }; 95 | 96 | export default PopupNotipin; 97 | -------------------------------------------------------------------------------- /client/src/Component/Home/Home.css: -------------------------------------------------------------------------------- 1 | .home-container { 2 | display: grid; 3 | grid-template-columns: 1fr 1fr 1fr 1fr; 4 | gap: 2rem; 5 | max-width: 80%; 6 | margin-inline: auto; 7 | margin-top: 1.5rem; 8 | } 9 | 10 | .home-container-not-login { 11 | max-width: 80%; 12 | margin-inline: auto; 13 | margin-top: 6rem; 14 | } 15 | 16 | @media (max-width: 97.5em) { 17 | .home-container { 18 | grid-template-columns: 1fr 1fr 1fr; 19 | } 20 | } 21 | 22 | @media (max-width: 75em) { 23 | .home-container { 24 | grid-template-columns: 1fr 1fr; 25 | } 26 | } 27 | 28 | @media (max-width: 55em) { 29 | .home-container { 30 | grid-template-columns: 1fr; 31 | } 32 | } 33 | 34 | .streamer-quest { 35 | max-width: 80%; 36 | margin-inline: auto; 37 | text-align: center; 38 | border-radius: 5px; 39 | padding: 0.15rem; 40 | cursor: pointer; 41 | background-color: rgb(202, 202, 202); 42 | transition: background-color 0.15s; 43 | } 44 | 45 | .streamer-quest:hover { 46 | background-color: rgb(168, 168, 168); 47 | } 48 | 49 | .margintop { 50 | margin-top: 6rem; 51 | } 52 | 53 | .invicible { 54 | position: absolute; 55 | visibility: hidden; 56 | } 57 | 58 | .streamer-modal { 59 | width: 80%; 60 | margin: auto; 61 | z-index: 3; 62 | background-color: pink; 63 | padding: 1.5rem; 64 | } 65 | 66 | .blur-back { 67 | position: fixed; 68 | z-index: 1; 69 | padding-top: 100px; 70 | left: 0; 71 | top: 0; 72 | height: 100%; 73 | width: 100%; 74 | overflow: auto; 75 | backdrop-filter: blur(6px); 76 | background-color: rgb(0, 0, 0); 77 | background-color: rgba(0, 0, 0, 0.4); 78 | } 79 | 80 | .streamer-choice { 81 | display: flex; 82 | justify-content: space-between; 83 | width: 50%; 84 | margin-inline: auto; 85 | margin-top: 2rem; 86 | font-size: 2rem; 87 | } 88 | 89 | .streamer-option { 90 | text-align: center; 91 | width: 100%; 92 | margin-inline: 2.5rem; 93 | background-color: rgb(255, 161, 177); 94 | color: rgb(245, 245, 245); 95 | border: none; 96 | border-radius: 5px; 97 | padding: 0.4rem; 98 | cursor: pointer; 99 | transition: background-color 0.2s; 100 | } 101 | 102 | .streamer-option:hover { 103 | background-color: rgb(253, 110, 134); 104 | } 105 | 106 | @media (max-width: 56.25em) { 107 | .streamer-option { 108 | margin-inline: 2rem; 109 | } 110 | } 111 | @media (max-width: 46.875em) { 112 | .streamer-option { 113 | margin-inline: 1rem; 114 | } 115 | } 116 | @media (max-width: 34.375em) { 117 | .streamer-option { 118 | margin-inline: 0.5rem; 119 | } 120 | 121 | .streamer-choice { 122 | width: 100%; 123 | } 124 | } 125 | 126 | .home-search { 127 | max-width: 80%; 128 | margin-inline: auto; 129 | margin-top: 1.5rem; 130 | display: flex; 131 | align-items: center; 132 | } 133 | 134 | .home-button-search { 135 | height: 100%; 136 | font-weight: 500; 137 | padding: 0.2rem 0.7rem; 138 | border-radius: 5px; 139 | background-color: #eabbfa; 140 | border: none; 141 | cursor: pointer; 142 | transition: background-color 0.15s; 143 | } 144 | 145 | .home-button-search:hover { 146 | background-color: #ca79e4; 147 | } 148 | 149 | .home-text-search { 150 | margin-left: 1.5rem; 151 | font-size: 1.3rem; 152 | color: grey; 153 | } 154 | 155 | .home-result-search { 156 | font-size: 2rem; 157 | color: black; 158 | margin-left: 0.5rem; 159 | } 160 | 161 | @media (max-width: 36.875em) { 162 | .home-search { 163 | display: block; 164 | } 165 | 166 | .home-button-search { 167 | width: 100%; 168 | } 169 | 170 | .home-text-search { 171 | display: block; 172 | margin-left: 0; 173 | margin-top: 0.3rem; 174 | } 175 | } 176 | 177 | @media (max-width: 30.625em) { 178 | .home-result-search { 179 | font-size: 1.3rem; 180 | } 181 | } 182 | 183 | @media (max-width: 27.3125em) { 184 | .home-result-search { 185 | margin-left: 0; 186 | } 187 | } 188 | -------------------------------------------------------------------------------- /client/src/Component/Videoni/Videoni.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useDispatch } from "react-redux"; 3 | import { useParams } from "react-router"; 4 | import { createVideoni } from "../../actions/videoni"; 5 | 6 | import Sidebar from "../Sidebar/Sidebar"; 7 | import "./Videoni.css"; 8 | 9 | const initialState = { 10 | creator: "", 11 | message: "", 12 | url: "", 13 | start: "", 14 | duration: "", 15 | destination: "", 16 | }; 17 | 18 | const Videoni = ({ currentSocket }) => { 19 | const dispatch = useDispatch(); 20 | const params = useParams(); 21 | 22 | const [videoniData, setVideoniData] = useState({ 23 | ...initialState, 24 | destination: params.id, 25 | }); 26 | 27 | const handleSubmit = (e) => { 28 | e.preventDefault(); 29 | 30 | dispatch(createVideoni(videoniData)); 31 | 32 | setVideoniData({ ...initialState, destination: params.id }); 33 | 34 | currentSocket.emit("videoni", { videoniData }); 35 | }; 36 | 37 | const handleChange = (e) => { 38 | setVideoniData({ ...videoniData, [e.target.name]: e.target.value }); 39 | }; 40 | 41 | return ( 42 |
43 | 44 |
45 | 46 | 56 | 57 | 67 | 68 | 78 |
79 |
80 | 81 | 91 |
92 |
93 | 94 | 105 |
106 |
107 | 110 |
111 |
112 | ); 113 | }; 114 | 115 | export default Videoni; 116 | -------------------------------------------------------------------------------- /client/src/Component/Link/Link.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useSelector } from "react-redux"; 3 | import { useNavigate, useParams } from "react-router"; 4 | 5 | import "./Link.css"; 6 | 7 | const Link = () => { 8 | const navigate = useNavigate(); 9 | 10 | const [copySuccess, setCopySuccess] = useState(""); 11 | const [message, setMessage] = useState(false); 12 | const [notipin, setNotipin] = useState(false); 13 | const [videoni, setVideoni] = useState(false); 14 | 15 | // const CLIENT_URL = "https://streamgift.netlify.app"; 16 | const CLIENT_URL = "http://localhost:3000"; 17 | 18 | const { userId } = useSelector((state) => state.auth); 19 | 20 | const copyToClipBoard = async (copyMe) => { 21 | try { 22 | await navigator.clipboard.writeText(copyMe); 23 | setCopySuccess("Copied!"); 24 | setInterval(() => { 25 | setMessage(false); 26 | setNotipin(false); 27 | setVideoni(false); 28 | }, 2000); 29 | } catch (err) { 30 | setCopySuccess("Failed to copy!"); 31 | } 32 | }; 33 | 34 | return ( 35 |
36 |
navigate(`/dashboard`)} 39 | > 40 | Streamer Dashboard 41 |
42 | 43 |
44 |
45 |

Link Ngirim Pesan/Video

46 |
47 | 51 | 62 |
63 | {message && copySuccess} 64 |
65 |
66 |

Link Overlay Notipin

67 |
68 | 72 | 83 |
84 | {notipin && copySuccess} 85 |
86 |
87 |

Link Overlay Videoni

88 |
89 | 93 | 104 |
105 | {videoni && copySuccess} 106 |
107 |
108 |
109 | ); 110 | }; 111 | 112 | export default Link; 113 | -------------------------------------------------------------------------------- /client/src/Component/Nav/Nav.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { useDispatch } from "react-redux"; 3 | import { useNavigate, useLocation } from "react-router-dom"; 4 | import { Link } from "react-router-dom"; 5 | import { LOGOUT, USER_LOGOUT } from "../../constants/constants"; 6 | import { HiMenuAlt3, HiOutlineX } from "react-icons/hi"; 7 | 8 | import "./Nav.css"; 9 | 10 | const Nav = () => { 11 | const dispatch = useDispatch(); 12 | const navigate = useNavigate(); 13 | const location = useLocation(); 14 | 15 | const [navActive, setNavActive] = useState(false); 16 | const [searchState, setSearchState] = useState(""); 17 | const [user, setUser] = useState( 18 | JSON.parse(localStorage.getItem("profile")) 19 | ); 20 | const [searchActive, setSearchActive] = useState(false); 21 | const [mobileActive, setMobileActive] = useState(false); 22 | 23 | const handleSignOut = () => { 24 | dispatch({ type: USER_LOGOUT }); 25 | dispatch({ type: LOGOUT }); 26 | 27 | navigate("/"); 28 | 29 | setUser(null); 30 | }; 31 | 32 | useEffect(() => { 33 | setUser(JSON.parse(localStorage.getItem("profile"))); 34 | }, [location]); 35 | 36 | function changeNavbar() { 37 | if (window.scrollY > 70) { 38 | setNavActive(true); 39 | } else { 40 | setNavActive(false); 41 | } 42 | } 43 | 44 | window.addEventListener("scroll", changeNavbar); 45 | 46 | const seacrhSubmit = (e) => { 47 | e.preventDefault(); 48 | 49 | navigate("/", { state: { searchState } }); 50 | }; 51 | 52 | return ( 53 |
54 |
setMobileActive((e) => !e)} 57 | > 58 | {mobileActive ? : } 59 |
60 | 61 |
64 |
65 |
66 | 72 | setSearchState(e.target.value)} 78 | value={searchState} 79 | maxLength="16" 80 | /> 81 |
82 |
83 | setSearchState("")} 86 | > 87 |
88 | 89 |
103 | 121 |
122 |
123 | ); 124 | }; 125 | 126 | export default Nav; 127 | -------------------------------------------------------------------------------- /client/src/Component/Auth/Auth.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import jwt_decode from "jwt-decode"; 3 | import { useDispatch } from "react-redux"; 4 | import { useNavigate } from "react-router-dom"; 5 | import { signin, signup } from "../../actions/auth"; 6 | 7 | import AuthForm from "./AuthForm/AuthForm"; 8 | 9 | import "./Auth.css"; 10 | import { AUTH } from "../../constants/constants"; 11 | 12 | const initialState = { 13 | firstName: "", 14 | lastName: "", 15 | email: "", 16 | password: "", 17 | confirmPass: "", 18 | }; 19 | 20 | const Auth = () => { 21 | const [isSignup, setIsSignup] = useState(false); 22 | const [showPassword, setShowPassword] = useState(false); 23 | const [formData, setFormData] = useState(initialState); 24 | const dispatch = useDispatch(); 25 | const navigate = useNavigate(); 26 | 27 | const handleCallbackResponse = (res) => { 28 | const token = res.credential; 29 | 30 | dispatch({ type: AUTH, data: { token } }); 31 | 32 | navigate("/"); 33 | }; 34 | 35 | useEffect(() => { 36 | /* global google */ 37 | google.accounts.id.initialize({ 38 | client_id: 39 | "1074214648578-391aqfjv4huoumm0hj37plfvqtffj4ge.apps.googleusercontent.com", 40 | callback: handleCallbackResponse, 41 | }); 42 | 43 | google.accounts.id.renderButton( 44 | document.getElementById("auth-google"), 45 | { 46 | theme: "outline", 47 | size: "medium", 48 | text: "Sign in with Google", 49 | logo_alignment: "center", 50 | } 51 | ); 52 | }, []); 53 | 54 | const handleSubmit = (e) => { 55 | e.preventDefault(); 56 | 57 | if (isSignup) { 58 | dispatch(signup(formData, navigate)); 59 | } else { 60 | dispatch(signin(formData, navigate)); 61 | } 62 | }; 63 | 64 | const handleChange = (e) => { 65 | setFormData({ ...formData, [e.target.name]: e.target.value }); 66 | }; 67 | 68 | return ( 69 |
70 |
71 | {isSignup && ( 72 | <> 73 | 80 | 87 | 88 | )} 89 | 96 | 105 | {isSignup && ( 106 | 113 | )} 114 | 117 | 118 | 127 | 128 |
129 | ); 130 | }; 131 | 132 | export default Auth; 133 | -------------------------------------------------------------------------------- /client/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 3 | import { useDispatch } from "react-redux"; 4 | import { io } from "socket.io-client"; 5 | 6 | import { getNotipin } from "./actions/notipin"; 7 | import Home from "./Component/Home/Home"; 8 | import Layout from "./Component/Layout/Layout"; 9 | import Notipin from "./Component/Notipin/Notipin"; 10 | import Auth from "./Component/Auth/Auth"; 11 | import Videoni from "./Component/Videoni/Videoni"; 12 | import ResultNotipin from "./Component/Result/ResultNotipin"; 13 | import ResultVideoni from "./Component/Result/ResultVideoni"; 14 | import { getVideoni } from "./actions/videoni"; 15 | import PopupNotipin from "./Component/Popup/PopupNotipin"; 16 | import Popupvideoni from "./Component/Popup/Popupvideoni"; 17 | 18 | import "./App.css"; 19 | import { getStreamer } from "./actions/streamer"; 20 | import Account from "./Component/Account/Account"; 21 | import Dashboard from "./Component/Dashboard/Dashboard"; 22 | import Link from "./Component/Link/Link"; 23 | import { getUser } from "./actions/auth"; 24 | 25 | const App = () => { 26 | const [currentSocket, setCurrentSocket] = useState(null); 27 | 28 | const dispatch = useDispatch(); 29 | const ENDPOINT = process.env.SERVER_URL; 30 | 31 | // * dibawah ini bisa menyebabkan hal aneh 32 | // masukkin di sebelah ENDPOINT 33 | // const secondValue = { transports: ["websocket", "polling", "flashsocket"] }; 34 | 35 | useEffect(() => { 36 | const socket = io(ENDPOINT); 37 | setCurrentSocket(socket); 38 | 39 | dispatch(getNotipin()); 40 | dispatch(getVideoni()); 41 | dispatch(getStreamer()); 42 | dispatch(getUser()); 43 | 44 | return () => { 45 | socket.disconnect(); 46 | }; 47 | }, [dispatch, currentSocket?.id]); 48 | 49 | return ( 50 | 51 | 52 | } />} /> 53 | 59 | } 60 | /> 61 | } 62 | /> 63 | 69 | } 70 | /> 71 | } 72 | /> 73 | } 78 | /> 79 | } 80 | /> 81 | } 86 | /> 87 | } 88 | /> 89 | } 94 | /> 95 | } 96 | /> 97 | } 102 | /> 103 | } 104 | /> 105 | 111 | } 112 | /> 113 | } 114 | /> 115 | } 120 | /> 121 | } 122 | /> 123 | } 126 | /> 127 | } 130 | /> 131 | 132 | 133 | ); 134 | }; 135 | 136 | export default App; 137 | -------------------------------------------------------------------------------- /client/src/Component/Nav/Nav.css: -------------------------------------------------------------------------------- 1 | .nav { 2 | display: flex; 3 | justify-content: space-between; 4 | list-style-type: none; 5 | padding: 0; 6 | max-width: 80%; 7 | margin-inline: auto; 8 | align-items: center; 9 | height: 4.5rem; 10 | } 11 | 12 | .nav-container { 13 | position: fixed; 14 | top: 0; 15 | left: 0; 16 | width: 100%; 17 | margin-inline: auto; 18 | transition: 0.5s; 19 | z-index: 999; 20 | } 21 | 22 | .nav-active { 23 | background: rgba(255, 255, 255, 0.553); 24 | border-bottom: 1px solid rgba(128, 128, 128, 0.281); 25 | backdrop-filter: blur(3px); 26 | transition: background 0.5s ease, backdrop-filter 0.5s ease; 27 | } 28 | 29 | .nav li a { 30 | text-decoration: none; 31 | color: black; 32 | padding: 0.3rem 0.7rem; 33 | border-radius: 8px; 34 | display: block; 35 | transition: background-color 0.2s; 36 | } 37 | 38 | .nav li a:hover { 39 | background-color: #eabbfa; 40 | border-radius: 8px; 41 | } 42 | 43 | .signout { 44 | cursor: pointer; 45 | } 46 | 47 | .two-left { 48 | display: flex; 49 | justify-content: space-between; 50 | align-items: center; 51 | } 52 | 53 | .nav-right { 54 | justify-content: flex-end; 55 | } 56 | 57 | .nav-input { 58 | position: relative; 59 | left: 30px; 60 | top: 1px; 61 | width: 150px; 62 | border: none; 63 | background-color: transparent; 64 | outline: none; 65 | } 66 | 67 | .nav-search { 68 | position: fixed; 69 | left: 17%; 70 | top: 22px; 71 | background-color: #eabbfa; 72 | border-radius: 60px; 73 | width: 30px; 74 | height: 30px; 75 | transition: 0.3s ease-in-out; 76 | z-index: 1000; 77 | } 78 | 79 | @media (max-width: 93.75em) { 80 | .nav-search { 81 | left: 18%; 82 | } 83 | } 84 | @media (max-width: 84.375em) { 85 | .nav-search { 86 | left: 19%; 87 | } 88 | } 89 | @media (max-width: 75em) { 90 | .nav-search { 91 | left: 20%; 92 | } 93 | } 94 | @media (max-width: 65.625em) { 95 | .nav-search { 96 | left: 21%; 97 | } 98 | } 99 | @media (max-width: 59.375em) { 100 | .nav-search { 101 | left: 23%; 102 | } 103 | } 104 | @media (max-width: 46.875em) { 105 | .nav-search { 106 | left: 25%; 107 | } 108 | } 109 | @media (max-width: 40.625em) { 110 | .nav-search { 111 | left: 28%; 112 | } 113 | } 114 | 115 | .nav-search .nav-icon { 116 | cursor: pointer; 117 | } 118 | 119 | .nav-search .nav-icon::before { 120 | content: ""; 121 | position: absolute; 122 | width: 10px; 123 | height: 10px; 124 | border: 2px solid black; 125 | border-radius: 50%; 126 | transform: translate(7px, 7px); 127 | } 128 | 129 | .nav-search .nav-icon::after { 130 | content: ""; 131 | position: absolute; 132 | width: 2px; 133 | height: 7px; 134 | background-color: black; 135 | transform: translate(19px, 17px) rotate(315deg); 136 | } 137 | 138 | .nav-search-active { 139 | width: 200px; 140 | } 141 | 142 | .nav-search-clear { 143 | position: absolute; 144 | top: 50%; 145 | transform: translateY(-50%); 146 | width: 15px; 147 | height: 15px; 148 | right: 4px; 149 | cursor: pointer; 150 | } 151 | 152 | .nav-search-clear::before { 153 | position: absolute; 154 | content: ""; 155 | width: 1px; 156 | height: 12px; 157 | background-color: rgb(65, 65, 65); 158 | transform: translate(7px, 2px) rotate(45deg); 159 | } 160 | 161 | .nav-search-clear::after { 162 | position: absolute; 163 | content: ""; 164 | width: 1px; 165 | height: 12px; 166 | background-color: rgb(65, 65, 65); 167 | transform: translate(7px, 2px) rotate(315deg); 168 | } 169 | 170 | .nav-burger { 171 | visibility: hidden; 172 | } 173 | 174 | .navbar { 175 | position: relative; 176 | } 177 | 178 | @media (max-width: 31.25em) { 179 | .nav { 180 | visibility: hidden; 181 | } 182 | 183 | .nav-search { 184 | left: 10%; 185 | } 186 | 187 | .nav-burger { 188 | visibility: visible; 189 | font-size: 1.3rem; 190 | position: fixed; 191 | z-index: 1019; 192 | top: 22px; 193 | right: 10%; 194 | } 195 | 196 | .nav-mobile-active { 197 | visibility: visible; 198 | display: block; 199 | transition: 0.5s; 200 | } 201 | 202 | .nav-mobile-active ul { 203 | margin-top: 5rem; 204 | } 205 | 206 | .nav-mobile-active li { 207 | padding-bottom: 1rem; 208 | } 209 | 210 | .nav-mobile-active-fixed { 211 | background-color: rgb(202, 255, 200); 212 | padding-bottom: 3rem; 213 | } 214 | } 215 | 216 | .nav-sign { 217 | display: flex; 218 | justify-content: flex-end; 219 | list-style-type: none; 220 | padding: 0; 221 | max-width: 80%; 222 | margin-inline: auto; 223 | align-items: center; 224 | height: 4.5rem; 225 | } 226 | 227 | .nav-sign a { 228 | text-decoration: none; 229 | color: black; 230 | padding: 0.3rem 0.7rem; 231 | border-radius: 8px; 232 | display: block; 233 | transition: background-color 0.2s; 234 | } 235 | 236 | .nav-sign a:hover { 237 | background-color: #eabbfa; 238 | border-radius: 8px; 239 | } 240 | -------------------------------------------------------------------------------- /client/src/Component/Home/Home.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { useDispatch, useSelector } from "react-redux"; 3 | import { useNavigate, useLocation } from "react-router-dom"; 4 | 5 | import Card from "../Card/Card"; 6 | import "./Home.css"; 7 | import { createStreamer } from "../../actions/streamer"; 8 | import { getUser } from "../../actions/auth"; 9 | 10 | const Home = () => { 11 | const location = useLocation(); 12 | const navigate = useNavigate(); 13 | const dispatch = useDispatch(); 14 | 15 | const [tobeStreamer, setTobeStreamer] = useState(false); 16 | const [sureStreamer, setSureStreamer] = useState(false); 17 | const [streamerAccount, setStreamerAccount] = useState(""); 18 | const [searchState, setSearchState] = useState( 19 | location?.state?.searchState 20 | ); 21 | const [user, setUser] = useState( 22 | JSON.parse(localStorage.getItem("profile")) 23 | ); 24 | 25 | const { userId, name } = useSelector((state) => state.auth); 26 | const streamerList = useSelector((state) => state.streamer); 27 | 28 | useEffect(() => { 29 | dispatch(getUser()); 30 | }, []); 31 | 32 | useEffect(() => { 33 | setSearchState(location?.state?.searchState); 34 | setUser(JSON.parse(localStorage.getItem("profile"))); 35 | }, [location]); 36 | 37 | useEffect(() => { 38 | setStreamerAccount(streamerList.find((e) => e.idStreamer === userId)); 39 | }, [streamerList, userId]); 40 | 41 | const streamer = () => { 42 | setTobeStreamer(true); 43 | }; 44 | 45 | const close = () => { 46 | setTobeStreamer(false); 47 | setSureStreamer(false); 48 | }; 49 | 50 | const next = () => { 51 | setSureStreamer(true); 52 | }; 53 | 54 | const makeIt = () => { 55 | dispatch(createStreamer({ userId, name })); 56 | setTobeStreamer(false); 57 | }; 58 | 59 | return ( 60 |
61 |
62 |
63 |
64 | {!sureStreamer 65 | ? "Are You Sure Change Your Account To Streamer Account?" 66 | : "Ciyusss???"} 67 |
68 |
69 |
70 | No 71 |
72 |
76 | Yes 77 |
78 |
79 |
80 |
81 | {user ? ( 82 | userId !== streamerAccount?.idStreamer ? ( 83 |
87 | Ingin Jadi Streamer? Klik Saya 88 |
89 | ) : ( 90 |
navigate(`/dashboard/`)} 93 | > 94 | Streamer Dashboard 95 |
96 | ) 97 | ) : ( 98 |
navigate(`/auth`)} 101 | > 102 | Click To Sign In 103 |
104 | )} 105 | 106 | {searchState && ( 107 |
108 | 114 |

115 | Result of{" "} 116 | 117 | {searchState} 118 | 119 |

120 |
121 | )} 122 | 123 |
124 | {streamerList 125 | .filter((val) => { 126 | if (!searchState) { 127 | return val; 128 | } else if ( 129 | val.name 130 | .split(" ") 131 | .join("") 132 | .toLowerCase() 133 | .includes( 134 | searchState 135 | .split(" ") 136 | .join("") 137 | .toLowerCase() 138 | ) 139 | ) { 140 | return val; 141 | } 142 | }) 143 | .map((streamer) => ( 144 |
145 | 150 |
151 | ))} 152 |
153 |
154 | ); 155 | }; 156 | 157 | export default Home; 158 | --------------------------------------------------------------------------------