├── .firebase └── hosting.YnVpbGQ.cache ├── .firebaserc ├── .gitignore ├── README.md ├── firebase.json ├── package-lock.json ├── package.json ├── public ├── icon1.png ├── icon4.png ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── Main └── Main.js ├── Route ├── PrivetRoute.js └── Route.js ├── components ├── Card │ ├── Card.css │ └── Card.js ├── Footer │ ├── Footer.css │ └── Footer.js ├── Navbar │ ├── Navbar.css │ ├── Navbar.js │ ├── icon1.png │ ├── icon3.png │ └── icon4.png └── SideBar │ ├── Sidebar.css │ └── Sidebar.js ├── context └── UserContext.js ├── firebase └── firebase.config.js ├── index.css ├── index.js ├── logo.svg ├── page ├── Blog │ ├── Blog.css │ └── Blog.js ├── CheckOut │ └── CheckOut.js ├── Error │ └── Error.js ├── Faq │ ├── Faq.js │ └── img │ │ └── faq.png ├── Home │ ├── Home.css │ ├── Home.js │ ├── admission.png │ ├── background2.jpg │ └── exam2.jpg ├── Login │ ├── Login.css │ └── Login.js ├── ProgramDetails │ ├── ProgramDetails.css │ ├── ProgramDetails.js │ └── img │ │ ├── 1.png │ │ └── 2.png ├── Programs │ └── Programs.js └── Register │ ├── Register.js │ └── register.jpg ├── reportWebVitals.js └── setupTests.js /.firebase/hosting.YnVpbGQ.cache: -------------------------------------------------------------------------------- 1 | icon1.png,1666659253530,646770055a1ce1c80b567ceec8d1a03d0a2d3afd428800f7da10371a1771adaa 2 | icon4.png,1666660412375,4d2d72b1476543505900f74ef5c3e3c950680ed08d21a7d59dcf75014fc647f5 3 | logo192.png,499162500000,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b 4 | logo512.png,499162500000,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331 5 | manifest.json,499162500000,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a 6 | robots.txt,499162500000,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49 7 | asset-manifest.json,1666861300035,80ef1b4cbca7cb7634e35ba20460cd68e7154eb914376e6a0c7507369b6bad4b 8 | static/css/main.060c3684.css,1666861300024,76caf1aad92a9a2b572a0889e0e0c435ef2fe7c887f8d8300bb1e7959effce2e 9 | index.html,1666861300021,ee7bf870b9637db556c71599f8246674b363c8a62d6b9835845716df3808cb4a 10 | static/js/236.15a35e75.chunk.js.LICENSE.txt,1666861300024,2396ecbf0fd5cabdafa2bda8c7f34f244ecac9a8d61ff28597b2bf99a0ac20df 11 | static/css/main.060c3684.css.map,1666861300024,4469a7c2f4b1823657c00bfaf15a6a81ca9389700755dba8ca82e8778cff95e3 12 | static/js/703.421e14ee.chunk.js.LICENSE.txt,1666861300024,cfbae90292fb506144e442142fcfcdb77242a5491dbc74a361cd61c3e8b608ed 13 | static/js/703.421e14ee.chunk.js,1666861300024,236a367b28979942cae850fa549cb4b81b8ddb8d2bd6c7e37da4dddb14f76712 14 | static/js/787.41f61377.chunk.js,1666861300024,22bd10db0b5a53986c10e5d513efbbb083d9d1bdf9993a19fce890f2f594ebcf 15 | static/js/787.41f61377.chunk.js.map,1666861300035,4867a141ca2927e1b30bbd84d21a2737056e7d09f6d05da7734640a3c88961c4 16 | static/js/main.66c32e60.js.LICENSE.txt,1666861300024,d2356ff1fd626655f9b04364db179c178af2218a21659a960e6f8eb990f4785b 17 | static/media/exam2.2558f576e4645da9b247.jpg,1666861300024,c06fc9c65edc1e88714e9ff9f6f0785d4b84944f90b566d1a07236d684913348 18 | static/js/703.421e14ee.chunk.js.map,1666861300035,dab42f345c93bd5de6ea8fc8ddbf82660841b0c6985ffbe981f5ace9cb96c439 19 | static/js/513.f33ad652.chunk.js,1666861300024,457665ce67f926f89282d915d08ea443ca1e4a53403b4f12c8cb413371a0e7ad 20 | static/js/236.15a35e75.chunk.js,1666861300024,0ec507662c53182f9d463392c58b72453b818bf054bd1a1df0ee4d9f163d5139 21 | static/media/register.843cb80eefc74161ba87.jpg,1666861300024,8b450703dde3ba6d96fb78d0a2ab6e204f70e09442cb6629f408853f0093ac8d 22 | static/media/faq.555b3c313cb591b4de27.png,1666861300024,6fe962b7dd85ce9ed94fbeae9154fc79a92d09da101a204e609110002d1ac803 23 | static/js/513.f33ad652.chunk.js.map,1666861300036,05550f8335a2ec5eeb2c58fe96d3951cc9aacf7322ea307d29a88c784b78584b 24 | static/js/main.66c32e60.js,1666861300025,ddac3a0c3f5dedefb3663481cf255724bf2a422ddd9678112f5d9b718a7f7db7 25 | static/js/236.15a35e75.chunk.js.map,1666861300035,fb2184ec4ddd5a8b3d6e6c0ea554e71297f9a719706b7083a84624a90639fe6d 26 | static/media/admission.3be034dae83df94e5fe8.png,1666861300026,89221a67ede0afe62a81cc22f99caa59ee3ac7d78cd862611cc0c281d3c7db43 27 | static/js/main.66c32e60.js.map,1666861300034,2dafcaf48dc6374acb7f38945edd0eabab1df4abf99df9911fe36d4cc1944499 28 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "educator-fd15d" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.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.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Eductor 2 | 3 | Live website link [Eductor](https://educator-fd15d.web.app/). 4 | 5 | ## Project Description 6 | 7 | --- 8 | 9 | Description of project: 10 | 11 | - In Educator project, user can taking programs according their choice. 12 | - User can Register with email and Password. Google SignIn,GitHub SignIn Facility also available. 13 | - Download Details about the programs curriculums. 14 | - If someone need to purchase the program then the user must go through the primium access option which is protected. 15 | - User can see their image after login and also see the name hovering the image. 16 | 17 | ## Technologies used in Project 18 | 19 | --- 20 | 21 | Technologies: 22 | 23 | - Front-End :- 24 | 25 | 1. Css FrameWork = Bootstrap 26 | 2. Js Library = React Js 27 | 3. Authentication System = Firebase Auth 28 | 4. Client Side Routing = React Router Dom 29 | 5. Create Pdf Documents = React-to-pdf Npm package 30 | 6. Icons = Fontawsome 31 | 7. Hosting = Firebase Hosting 32 | 33 | - Back-End :- 34 | 35 | 1. RESTful APIs = Express Js 36 | 2. Allow Access with Middleware = Cors Node.js package 37 | 3. Backend Hosting = Vercel 38 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "build", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "rewrites": [ 10 | { 11 | "source": "**", 12 | "destination": "/index.html" 13 | } 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "educator", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "firebase": "^9.12.1", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-router-dom": "^6.4.2", 13 | "react-scripts": "5.0.1", 14 | "react-to-pdf": "0.0.14", 15 | "web-vitals": "^2.1.4" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /public/icon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohaimenur1/educator-client-react/81cd5bb1400513c12f4e9e931166a2d388013bc1/public/icon1.png -------------------------------------------------------------------------------- /public/icon4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohaimenur1/educator-client-react/81cd5bb1400513c12f4e9e931166a2d388013bc1/public/icon4.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 19 | 20 | 26 | 27 | 28 | 32 | 41 | Educator - The Best Online Teaching 42 | 43 | 44 | 45 |
46 | 56 | 57 | 58 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohaimenur1/educator-client-react/81cd5bb1400513c12f4e9e931166a2d388013bc1/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohaimenur1/educator-client-react/81cd5bb1400513c12f4e9e931166a2d388013bc1/public/logo512.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: rgba(238, 234, 234, 0.607); 3 | color: rgb(60, 50, 50); 4 | } 5 | 6 | h1, 7 | h2, 8 | h3, 9 | h4, 10 | h5, 11 | h6, 12 | p, 13 | i { 14 | color: rgb(12, 20, 46); 15 | } 16 | 17 | .link-text-color { 18 | color: rgb(211, 96, 70); 19 | text-decoration: none; 20 | } 21 | 22 | .App { 23 | text-align: center; 24 | } 25 | 26 | .App-logo { 27 | height: 40vmin; 28 | pointer-events: none; 29 | } 30 | 31 | @media (prefers-reduced-motion: no-preference) { 32 | .App-logo { 33 | animation: App-logo-spin infinite 20s linear; 34 | } 35 | } 36 | 37 | .App-header { 38 | background-color: #282c34; 39 | min-height: 100vh; 40 | display: flex; 41 | flex-direction: column; 42 | align-items: center; 43 | justify-content: center; 44 | font-size: calc(10px + 2vmin); 45 | color: white; 46 | } 47 | 48 | .App-link { 49 | color: #61dafb; 50 | } 51 | 52 | @keyframes App-logo-spin { 53 | from { 54 | transform: rotate(0deg); 55 | } 56 | to { 57 | transform: rotate(360deg); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import { router } from "./Route/Route"; 3 | import { RouterProvider } from "react-router-dom"; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/Main/Main.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Navbar from "../components/Navbar/Navbar"; 3 | import { Outlet } from "react-router-dom"; 4 | import Footer from "../components/Footer/Footer"; 5 | 6 | const Main = () => { 7 | return ( 8 |
9 | 10 | 11 |
12 |
13 | ); 14 | }; 15 | 16 | export default Main; 17 | -------------------------------------------------------------------------------- /src/Route/PrivetRoute.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import { Navigate, useLocation } from "react-router-dom"; 3 | import { AuthContext } from "../context/UserContext"; 4 | 5 | const PrivetRoute = ({ children }) => { 6 | const { user, loading } = useContext(AuthContext); 7 | const location = useLocation(); 8 | 9 | if (loading) { 10 | return ( 11 |
12 |
17 | Loading... 18 |
19 |
20 | ); 21 | } 22 | 23 | if (!user) { 24 | return ; 25 | } 26 | return children; 27 | }; 28 | 29 | export default PrivetRoute; 30 | -------------------------------------------------------------------------------- /src/Route/Route.js: -------------------------------------------------------------------------------- 1 | import { createBrowserRouter } from "react-router-dom"; 2 | import Main from "../Main/Main"; 3 | import Blog from "../page/Blog/Blog"; 4 | import CheckOut from "../page/CheckOut/CheckOut"; 5 | import Error from "../page/Error/Error"; 6 | import Faq from "../page/Faq/Faq"; 7 | import Home from "../page/Home/Home"; 8 | import Login from "../page/Login/Login"; 9 | import ProgramDetails from "../page/ProgramDetails/ProgramDetails"; 10 | import Programs from "../page/Programs/Programs"; 11 | import Register from "../page/Register/Register"; 12 | import PrivetRoute from "./PrivetRoute"; 13 | 14 | export const router = createBrowserRouter([ 15 | { 16 | path: "/", 17 | element:
, 18 | children: [ 19 | { 20 | path: "/", 21 | element: , 22 | loader: async () => { 23 | return fetch("https://educator-server.vercel.app/programs"); 24 | }, 25 | }, 26 | { 27 | path: "/programs", 28 | loader: async () => { 29 | return fetch("https://educator-server.vercel.app/programs"); 30 | }, 31 | element: , 32 | }, 33 | { 34 | path: "/programs/:pId", 35 | loader: async ({ params }) => { 36 | console.log(params); 37 | return fetch( 38 | `https://educator-server.vercel.app/programs/${params.pId}` 39 | ); 40 | }, 41 | element: , 42 | }, 43 | { 44 | path: "/login", 45 | element: , 46 | }, 47 | { 48 | path: "/register", 49 | element: , 50 | }, 51 | { 52 | path: "/checkout/:cId", 53 | loader: async ({ params }) => { 54 | console.log(params); 55 | return fetch( 56 | `https://educator-server.vercel.app/programs/${params.cId}` 57 | ); 58 | }, 59 | element: ( 60 | 61 | 62 | 63 | ), 64 | }, 65 | { 66 | path: "/blogs", 67 | element: , 68 | }, 69 | { 70 | path: "/faq", 71 | element: , 72 | }, 73 | ], 74 | }, 75 | { 76 | path: "*", 77 | element: , 78 | }, 79 | ]); 80 | -------------------------------------------------------------------------------- /src/components/Card/Card.css: -------------------------------------------------------------------------------- 1 | .card { 2 | outline: none; 3 | border: none; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/Card/Card.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import "./Card.css"; 4 | 5 | const Card = ({ program }) => { 6 | return ( 7 |
8 |
9 | ... 10 |
11 |
12 |
{program.pragram_name}
13 | Credit: {program.topic} 14 |
15 |

{program.description}

16 |
17 | Students: {program.student} 18 | price: {program.price} 19 |
20 | 21 |
22 | 26 | Details 27 | 28 |
29 |
30 |
31 |
32 | ); 33 | }; 34 | 35 | export default Card; 36 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.css: -------------------------------------------------------------------------------- 1 | .bg-footer { 2 | /* background-color: rgb(211, 96, 70); */ 3 | color: black; 4 | background: rgb(226, 113, 88); 5 | background: linear-gradient( 6 | 90deg, 7 | rgba(226, 113, 88, 0.5158438375350141) 11%, 8 | rgba(74, 212, 237, 0.2861519607843137) 87% 9 | ); 10 | } 11 | 12 | .bg-sub-footer { 13 | background-color: rgba(238, 234, 234, 0.607); 14 | } 15 | 16 | .icon-text { 17 | color: white; 18 | } 19 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import "./Footer.css"; 4 | 5 | const Footer = () => { 6 | return ( 7 |
8 |
9 |
10 | 11 |
12 |
13 |
14 |
15 |
16 | Educator 17 |
18 |

19 | Here you can find your expected program. Educator is not only 20 | the best course provider but also no one give that much amount 21 | of course to the student. Our target is to reach the highest 22 | amount of students who can beat anywhere. 23 |

24 |
25 | 26 |
27 |
Links
28 |

29 | 30 | Home 31 | 32 |

33 |

34 | 35 | Programs 36 | 37 |

38 |

39 | 40 | Blog 41 | 42 |

43 |

44 | 45 | Register 46 | 47 |

48 |
49 | 50 |
51 |
Contact
52 |

53 | Mirpur, Dhaka 54 |

55 |

56 | 57 | educator@edu.com 58 |

59 |

60 | + 01 234 567 88 61 |

62 |

63 | + 01 234 567 89 64 |

65 |
66 |
67 |
68 |
69 |
70 | Get connected with us on social networks: 71 |
72 | {/* */} 92 | 97 | 98 | 99 | 100 | 105 | 106 | 107 | 108 | 113 | 114 | 115 | 116 | 121 | 122 | 123 | 124 | 129 | 130 | 131 | 132 | 137 | 138 | 139 |
140 |
141 | 142 |
143 | © 2021 Copyright: 144 | Educator by Rahi 145 |
146 |
147 |
148 | ); 149 | }; 150 | 151 | export default Footer; 152 | -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.css: -------------------------------------------------------------------------------- 1 | .navbar-bg { 2 | /* background-color: #3f4e4f; */ 3 | background: rgb(226, 113, 88); 4 | background: linear-gradient( 5 | 90deg, 6 | rgba(226, 113, 88, 0.5158438375350141) 11%, 7 | rgba(74, 212, 237, 0.2861519607843137) 87% 8 | ); 9 | } 10 | 11 | /* .tooltip { 12 | position: relative; 13 | display: inline-block; 14 | font-size: 16px; 15 | } */ 16 | 17 | .tooltiptext { 18 | visibility: hidden; 19 | background-color: black; 20 | color: #fff; 21 | text-align: center; 22 | padding: 5px 0; 23 | border-radius: 6px; 24 | position: absolute; 25 | z-index: 1; 26 | width: 120px; 27 | top: 100%; 28 | left: 50%; 29 | margin-left: -60px; 30 | font-size: 12px; 31 | } 32 | 33 | .tooltip:hover .tooltiptext { 34 | visibility: visible; 35 | } 36 | -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useState } from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { AuthContext } from "../../context/UserContext"; 4 | import NavImg from "./icon1.png"; 5 | import "./Navbar.css"; 6 | 7 | const Navbar = () => { 8 | const [toggle, setToggle] = useState(false); 9 | const { user, logout } = useContext(AuthContext); 10 | 11 | const handleLogOut = () => { 12 | logout() 13 | .then(() => {}) 14 | .catch((error) => console.log(error)); 15 | }; 16 | 17 | const handleToggleClick = () => { 18 | setToggle(!toggle); 19 | }; 20 | 21 | return ( 22 |
23 |
157 | 158 | 159 | ); 160 | }; 161 | 162 | export default Navbar; 163 | -------------------------------------------------------------------------------- /src/components/Navbar/icon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohaimenur1/educator-client-react/81cd5bb1400513c12f4e9e931166a2d388013bc1/src/components/Navbar/icon1.png -------------------------------------------------------------------------------- /src/components/Navbar/icon3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohaimenur1/educator-client-react/81cd5bb1400513c12f4e9e931166a2d388013bc1/src/components/Navbar/icon3.png -------------------------------------------------------------------------------- /src/components/Navbar/icon4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohaimenur1/educator-client-react/81cd5bb1400513c12f4e9e931166a2d388013bc1/src/components/Navbar/icon4.png -------------------------------------------------------------------------------- /src/components/SideBar/Sidebar.css: -------------------------------------------------------------------------------- 1 | .list-gp { 2 | border: 1px solid #d55e43; 3 | /* border: 1px solid white; */ 4 | padding: 10px; 5 | border-radius: 5px; 6 | font-weight: bold; 7 | /* color: white; */ 8 | } 9 | 10 | .list-group-hover:hover { 11 | background-color: #d55e43 !important; 12 | color: white !important; 13 | border: none; 14 | } 15 | -------------------------------------------------------------------------------- /src/components/SideBar/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import "./Sidebar.css"; 4 | 5 | const Sidebar = ({ category }) => { 6 | // const handleClick = (id) => { 7 | // console.log("sidebar buttn click" + id); 8 | // }; 9 | console.log(category.id); 10 | return ( 11 |
12 |
13 |
18 | 27 | {category.pragram_name} 28 | 29 |
30 |
31 |
32 | ); 33 | }; 34 | 35 | export default Sidebar; 36 | -------------------------------------------------------------------------------- /src/context/UserContext.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | 3 | import { createContext } from "react"; 4 | import app from "../firebase/firebase.config"; 5 | import { 6 | createUserWithEmailAndPassword, 7 | getAuth, 8 | onAuthStateChanged, 9 | signInWithEmailAndPassword, 10 | signInWithPopup, 11 | signOut, 12 | updateProfile, 13 | } from "firebase/auth"; 14 | 15 | export const AuthContext = createContext(); 16 | 17 | const auth = getAuth(app); 18 | 19 | const UserContext = ({ children }) => { 20 | const [user, setUser] = useState(null); 21 | const [loading, setLoading] = useState(true); 22 | //register using email and password 23 | const register = (email, password) => { 24 | setLoading(true); 25 | return createUserWithEmailAndPassword(auth, email, password); 26 | }; 27 | 28 | //google sign in option 29 | const googleLogin = (provider) => { 30 | setLoading(true); 31 | return signInWithPopup(auth, provider); 32 | }; 33 | 34 | //login 35 | const login = (email, password) => { 36 | setLoading(true); 37 | return signInWithEmailAndPassword(auth, email, password); 38 | }; 39 | 40 | //update user profile 41 | const updateUserProfile = (profile) => { 42 | return updateProfile(auth.currentUser, profile); 43 | }; 44 | 45 | //github login 46 | const githubLogin = (githubProvider) => { 47 | setLoading(true); 48 | return signInWithPopup(auth, githubProvider); 49 | }; 50 | 51 | //logut 52 | const logout = () => { 53 | setLoading(true); 54 | return signOut(auth); 55 | }; 56 | 57 | useEffect(() => { 58 | const unsbscribe = onAuthStateChanged(auth, (currentUser) => { 59 | console.log(currentUser); 60 | setUser(currentUser); 61 | setLoading(false); 62 | }); 63 | return () => { 64 | unsbscribe(); 65 | }; 66 | }, []); 67 | 68 | const authInfo = { 69 | user, 70 | register, 71 | login, 72 | logout, 73 | googleLogin, 74 | loading, 75 | updateUserProfile, 76 | githubLogin, 77 | }; 78 | 79 | return ( 80 | {children} 81 | ); 82 | }; 83 | 84 | export default UserContext; 85 | -------------------------------------------------------------------------------- /src/firebase/firebase.config.js: -------------------------------------------------------------------------------- 1 | // Import the functions you need from the SDKs you need 2 | import { initializeApp } from "firebase/app"; 3 | // TODO: Add SDKs for Firebase products that you want to use 4 | // https://firebase.google.com/docs/web/setup#available-libraries 5 | 6 | // Your web app's Firebase configuration 7 | const firebaseConfig = { 8 | apiKey: process.env.REACT_APP_apiKey, 9 | authDomain: process.env.REACT_APP_authDomain, 10 | projectId: process.env.REACT_APP_projectId, 11 | storageBucket: process.env.REACT_APP_storageBucket, 12 | messagingSenderId: process.env.REACT_APP_messagingSenderId, 13 | appId: process.env.REACT_APP_appId, 14 | }; 15 | 16 | // Initialize Firebase 17 | const app = initializeApp(firebaseConfig); 18 | 19 | export default app; 20 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | import UserContext from "./context/UserContext"; 7 | 8 | const root = ReactDOM.createRoot(document.getElementById("root")); 9 | root.render( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | // If you want to start measuring performance in your app, pass a function 18 | // to log results (for example: reportWebVitals(console.log)) 19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 20 | reportWebVitals(); 21 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/page/Blog/Blog.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap"); 2 | 3 | .blog-heading { 4 | font-family: "Alfa Slab One", cursive; 5 | } 6 | 7 | .bg-jumbotron { 8 | background: rgb(187, 155, 129); 9 | background: linear-gradient( 10 | 90deg, 11 | rgba(187, 155, 129, 0.4906337535014006) 11%, 12 | rgba(221, 119, 79, 0.6530987394957983) 87% 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /src/page/Blog/Blog.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Blog.css"; 3 | 4 | const Blog = () => { 5 | return ( 6 |
7 |

Welcome to Blog

8 |
9 |
10 | {/* first question */} 11 |
12 |
13 |
14 |

what is cors?

15 |

16 | CORS stands for Cross-Origin Resource Sharing. It allows us to 17 | relax the security applied to an API. This is done by 18 | bypassing the Access-Control-Allow-Origin headers, which 19 | specify which origins can access the API. In other words, CORS 20 | is a browser security feature that restricts cross-origin HTTP 21 | requests with other servers and specifies which domains access 22 | your resources. 23 |

24 | {/* */} 27 |
28 |
29 |
30 | {/* first question end */} 31 | {/* second question */} 32 |
33 |
34 |
35 |

36 | Why are you using firebase? What other options do you have to 37 | implement authentication? 38 |

39 |

40 | Firebase Authentication provides backend services, easy-to-use 41 | SDKs, and ready-made UI libraries to authenticate users to 42 | your app. It supports authentication using passwords, phone 43 | numbers, popular federated identity providers like Google, 44 | Facebook and Twitter, and more. Firebase Authentication 45 | integrates tightly with other Firebase services, and it 46 | leverages industry standards like OAuth 2.0 and OpenID 47 | Connect, so it can be easily integrated with your custom 48 | backend. 49 |

50 | {/* */} 53 |
54 |
55 |
56 | {/* second question end */} 57 | {/* third question */} 58 |
59 |
60 |
61 |

62 | How does the private route work? 63 |

64 |

65 | The react private route component renders child components 66 | (children) if the user is logged in. If not logged in the user 67 | is redirected to the /login page with the return url passed in 68 | the location state property. 69 |

70 | {/* */} 73 |
74 |
75 |
76 | {/* third question end */} 77 | {/* fourth question */} 78 |
79 |
80 |
81 |

82 | What is Node? How does Node work? 83 |

84 |

85 | Node.js is an open-source backend javascript runtime 86 | environment. It is a used as backend service where javascript 87 | works on the server-side of the application. This way 88 | javascript is used on both frontend and backend. Node.js runs 89 | on chrome v8 engine which converts javascript code into 90 | machine code, it is highly scalable, lightweight, fast, and 91 | data-intensive. Working of Node.js: Node.js accepts the 92 | request from the clients and sends the response, while working 93 | with the request node.js handles them with a single thread. To 94 | operate I/O operations or requests node.js use the concept of 95 | threads. 96 |

97 | {/* */} 100 |
101 |
102 |
103 | {/* fourth question end */} 104 |
105 |
106 |
107 | ); 108 | }; 109 | 110 | export default Blog; 111 | -------------------------------------------------------------------------------- /src/page/CheckOut/CheckOut.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useLoaderData } from "react-router-dom"; 3 | 4 | const CheckOut = () => { 5 | const details = useLoaderData(); 6 | return ( 7 |
8 |

{details.pragram_name}

9 |

10 | Thank's For Getting Premium Access 11 |

12 |
13 | ); 14 | }; 15 | 16 | export default CheckOut; 17 | -------------------------------------------------------------------------------- /src/page/Error/Error.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | const Error = () => { 5 | return ( 6 |
7 | 15 |
16 |

OPPS! SOMETHING WENT WRONG

17 |
18 |
19 | 20 | Go Back to Home Page!!! 21 | 22 |
23 |
24 | ); 25 | }; 26 | 27 | export default Error; 28 | -------------------------------------------------------------------------------- /src/page/Faq/Faq.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import FaqImg from "./img/faq.png"; 3 | 4 | const Faq = () => { 5 | return ( 6 |
7 |
8 |
9 | FAQ 10 |

11 | Here is Faq Section where you can connected with our experts to 12 | asking some frequently ask questions. 13 |

14 | 15 |
16 |
17 | 18 |
19 |
20 |
21 | ); 22 | }; 23 | 24 | export default Faq; 25 | -------------------------------------------------------------------------------- /src/page/Faq/img/faq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohaimenur1/educator-client-react/81cd5bb1400513c12f4e9e931166a2d388013bc1/src/page/Faq/img/faq.png -------------------------------------------------------------------------------- /src/page/Home/Home.css: -------------------------------------------------------------------------------- 1 | header { 2 | min-height: 90vh; 3 | /* background-image: url("./background2.jpg"); */ 4 | /* opacity: 0.7; */ 5 | background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), 6 | url("./admission.png"); 7 | /* filter: brightness(80%); */ 8 | background-size: cover; 9 | background-position: center; 10 | background-repeat: no-repeat; 11 | } 12 | 13 | .btn-custom { 14 | background-color: rgb(211, 96, 70); 15 | color: white; 16 | text-transform: uppercase; 17 | padding: 10px 20px; 18 | } 19 | 20 | .btn-custom:hover { 21 | background-color: rgb(123, 39, 20); 22 | color: white; 23 | } 24 | -------------------------------------------------------------------------------- /src/page/Home/Home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Home.css"; 3 | import DetailImg from "./exam2.jpg"; 4 | import { Link, useLoaderData } from "react-router-dom"; 5 | 6 | const Home = () => { 7 | return ( 8 |
9 |
10 |
11 | 12 | University Program. 13 | 14 |

15 | Easy to Learn any thing from the best courses with best selling tag 16 | courses.

The educators are well knowledge about thier 17 | learing and also well organised about their course structure.{" "} 18 |

19 |
20 | 21 | Blogs 22 | 23 | 27 | Go To our Programs 28 | 29 |
30 |
31 |
32 | 33 | {/* main section */} 34 |
35 |

Visit Our Programs

36 |
37 |
38 | 39 |
40 |
41 |
42 |

Best Program for University Student.

43 |

44 | What do you think is better to receive after each lesson: a 45 | lovely looking badge or important skills you can immediately put 46 | into practice. There is really no magic to it 47 |

48 | 49 | Programs 50 | 51 |
52 |
53 |
54 |
55 |
56 | ); 57 | }; 58 | 59 | export default Home; 60 | -------------------------------------------------------------------------------- /src/page/Home/admission.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohaimenur1/educator-client-react/81cd5bb1400513c12f4e9e931166a2d388013bc1/src/page/Home/admission.png -------------------------------------------------------------------------------- /src/page/Home/background2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohaimenur1/educator-client-react/81cd5bb1400513c12f4e9e931166a2d388013bc1/src/page/Home/background2.jpg -------------------------------------------------------------------------------- /src/page/Home/exam2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohaimenur1/educator-client-react/81cd5bb1400513c12f4e9e931166a2d388013bc1/src/page/Home/exam2.jpg -------------------------------------------------------------------------------- /src/page/Login/Login.css: -------------------------------------------------------------------------------- 1 | .login-btn-bg { 2 | background-color: rgb(211, 96, 70); 3 | color: white; 4 | } 5 | 6 | .login-btn-bg:hover { 7 | background-color: rgb(123, 39, 20); 8 | color: white; 9 | } 10 | 11 | /* i { 12 | color: white; 13 | } */ 14 | -------------------------------------------------------------------------------- /src/page/Login/Login.js: -------------------------------------------------------------------------------- 1 | import { GithubAuthProvider, GoogleAuthProvider } from "firebase/auth"; 2 | import React, { useContext, useState } from "react"; 3 | import { Link, useLocation, useNavigate } from "react-router-dom"; 4 | import { AuthContext } from "../../context/UserContext"; 5 | import "./Login.css"; 6 | 7 | const Login = () => { 8 | const [error, setError] = useState(""); 9 | const { googleLogin, login, githubLogin } = useContext(AuthContext); 10 | 11 | const googleProvider = new GoogleAuthProvider(); 12 | const githubProvider = new GithubAuthProvider(); 13 | 14 | const navigate = useNavigate(); 15 | const location = useLocation(); 16 | 17 | const from = location.state?.from?.pathname || "/"; 18 | 19 | const handleSubmit = (e) => { 20 | e.preventDefault(); 21 | 22 | const form = e.target; 23 | const email = form.email.value; 24 | const password = form.password.value; 25 | 26 | login(email, password) 27 | .then((result) => { 28 | const user = result.user; 29 | console.log(user); 30 | form.reset(); 31 | setError(""); 32 | navigate(from, { replace: true }); 33 | }) 34 | .catch((error) => { 35 | console.error(error); 36 | setError(error.message); 37 | }); 38 | }; 39 | 40 | const handleGoogleSignIn = () => { 41 | googleLogin(googleProvider) 42 | .then((result) => { 43 | const user = result.user; 44 | console.log(user); 45 | navigate(from, { replace: true }); 46 | }) 47 | .catch((error) => console.error(error)); 48 | }; 49 | 50 | const handleGithubLogin = () => { 51 | githubLogin(githubProvider) 52 | .then((result) => { 53 | const user = result.user; 54 | console.log(user); 55 | navigate(from, { replace: true }); 56 | }) 57 | .catch((error) => console.error(error)); 58 | }; 59 | 60 | return ( 61 |
62 |

Login Form

63 |
64 |
65 |
66 | 69 | 76 |
77 | 78 |
79 | 82 | 89 |
90 | 91 |
92 | {/*
93 |
94 | 101 | 105 |
106 |
*/} 107 | 108 |
109 | {error} 110 |
111 | {/*
112 | Forgot password? 113 |
*/} 114 |
115 |
116 | 119 |
120 | 121 |
122 |

123 | Not a member?{" "} 124 | 125 | Register 126 | 127 |

128 |

or sign up with:

129 | 130 | 137 | 138 | 145 |
146 |
147 |
148 |
149 | ); 150 | }; 151 | 152 | export default Login; 153 | -------------------------------------------------------------------------------- /src/page/ProgramDetails/ProgramDetails.css: -------------------------------------------------------------------------------- 1 | .heading-bg { 2 | /* background-color: rgb(211, 96, 70); */ 3 | color: white; 4 | background: rgb(221, 171, 160); 5 | background: linear-gradient( 6 | 90deg, 7 | rgba(221, 171, 160, 0.5158438375350141) 6%, 8 | rgba(123, 175, 185, 0.2861519607843137) 95% 9 | ); 10 | } 11 | 12 | .pdf-icon { 13 | cursor: pointer; 14 | } 15 | -------------------------------------------------------------------------------- /src/page/ProgramDetails/ProgramDetails.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link, useLoaderData } from "react-router-dom"; 3 | import "./ProgramDetails.css"; 4 | import Pdf from "react-to-pdf"; 5 | import PdfImg from "./img/1.png"; 6 | 7 | const ref = React.createRef(); 8 | 9 | const options = { 10 | orientation: "potrait", 11 | unit: "in", 12 | format: [15, 15], 13 | }; 14 | 15 | const ProgramDetails = () => { 16 | const detailsData = useLoaderData(); 17 | const { curriculum } = detailsData; 18 | console.log(curriculum); 19 | 20 | return ( 21 |
22 |
23 |
24 |
25 | {detailsData?.pragram_name} 26 |
27 |
28 | 36 | {({ toPdf }) => ( 37 | 43 | )} 44 | 45 |
46 |
47 | ... 53 |
54 |

55 | Description : {detailsData?.pragram_name} 56 |

57 |

{detailsData?.description}

58 |
59 | 60 | {" "} 61 | Number of Students Complete: {detailsData?.student} 62 | 63 | price: {detailsData?.price} 64 |
65 |
66 | topic: {detailsData?.topic} 67 |
68 |
69 | 70 |

71 | Curriculum / Number of Courses 72 |

73 | {curriculum.map((c) => { 74 | return ( 75 |
76 |
  • {c}
  • 77 |
    78 | ); 79 | })} 80 |
    81 |
    82 |
    83 |

    Our Vision

    84 |

    {detailsData?.vision}

    85 |
    86 |
    87 | 92 | Get premium access 93 | 94 |
    95 |
    96 |
    97 |
    98 | ); 99 | }; 100 | 101 | export default ProgramDetails; 102 | -------------------------------------------------------------------------------- /src/page/ProgramDetails/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohaimenur1/educator-client-react/81cd5bb1400513c12f4e9e931166a2d388013bc1/src/page/ProgramDetails/img/1.png -------------------------------------------------------------------------------- /src/page/ProgramDetails/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohaimenur1/educator-client-react/81cd5bb1400513c12f4e9e931166a2d388013bc1/src/page/ProgramDetails/img/2.png -------------------------------------------------------------------------------- /src/page/Programs/Programs.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useLoaderData } from "react-router-dom"; 3 | import Card from "../../components/Card/Card"; 4 | import Sidebar from "../../components/SideBar/Sidebar"; 5 | 6 | const Programs = () => { 7 | const programs = useLoaderData(); 8 | return ( 9 |
    10 |
    11 |
    12 |
    13 |

    Programs

    14 | {programs.map((category) => { 15 | return ; 16 | })} 17 |
    18 |
    19 |
    20 |

    21 | Archives Programs 22 |

    23 | {programs.map((program) => { 24 | return ; 25 | })} 26 |
    27 |
    28 |
    29 |
    30 |
    31 | ); 32 | }; 33 | 34 | export default Programs; 35 | -------------------------------------------------------------------------------- /src/page/Register/Register.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useState } from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { AuthContext } from "../../context/UserContext"; 4 | import RegisterImg from "./register.jpg"; 5 | 6 | const Register = () => { 7 | const [error, setError] = useState(""); 8 | const { register, updateUserProfile } = useContext(AuthContext); 9 | const handleSubmit = (e) => { 10 | e.preventDefault(); 11 | 12 | const form = e.target; 13 | const name = form.name.value; 14 | const photoURL = form.photo.value; 15 | const email = form.email.value; 16 | const password = form.password.value; 17 | 18 | console.log(name, photoURL, email, password); 19 | 20 | register(email, password) 21 | .then((result) => { 22 | const user = result.user; 23 | console.log(user); 24 | form.reset(); 25 | setError(""); 26 | handleUpdateUserProfile(name, photoURL); 27 | }) 28 | .catch((error) => { 29 | console.error(error); 30 | setError(error.message); 31 | }); 32 | }; 33 | 34 | const handleUpdateUserProfile = (name, photoURL) => { 35 | const profile = { 36 | displayName: name, 37 | photoURL: photoURL, 38 | }; 39 | updateUserProfile(profile) 40 | .then(() => {}) 41 | .catch((error) => console.error(error)); 42 | }; 43 | return ( 44 |
    45 |
    46 |
    47 | 48 |
    49 | 50 |
    51 |

    52 | Register Form 53 |

    54 |
    55 |
    56 |
    57 |
    58 | 61 | 67 |
    68 |
    69 |
    70 | 71 |
    72 | 75 | 82 |
    83 | 84 |
    85 | 88 | 95 |
    96 |
    97 | 100 | 106 |
    107 | 108 |
    109 | {/* */} 116 | 119 | 124 |
    125 | 126 |
    127 | 130 |
    131 |
    132 |
    133 |
    134 |
    135 | ); 136 | }; 137 | 138 | export default Register; 139 | -------------------------------------------------------------------------------- /src/page/Register/register.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohaimenur1/educator-client-react/81cd5bb1400513c12f4e9e931166a2d388013bc1/src/page/Register/register.jpg -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------