├── .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 | You need to enable JavaScript to run this app.
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 |
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 |
24 |
25 |
29 | {" "}
30 |
{" "}
31 |
Educator
32 |
33 |
42 |
43 |
44 |
45 |
46 |
47 |
52 | Home
53 |
54 |
55 |
56 |
60 | Programs
61 |
62 |
63 |
64 |
65 | Faq
66 |
67 |
68 |
69 |
73 | Blog
74 |
75 |
76 |
77 |
81 |
87 |
91 | {toggle ? Dark : Light }
92 |
93 |
94 |
95 | {/*
96 |
100 | Login
101 |
102 |
103 |
104 |
108 | Register
109 |
110 | */}
111 |
112 | {user?.uid ? (
113 |
114 |
115 | Logout
116 |
117 |
118 | ) : (
119 |
120 |
121 |
125 | Login
126 |
127 |
128 |
129 |
133 | Register
134 |
135 |
136 |
137 | )}
138 |
139 |
140 |
141 | {user?.photoURL ? (
142 |
151 | ) : null}
152 |
153 |
154 |
155 |
156 |
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 | {/*
25 | Example button
26 | */}
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 | {/*
51 | Example button
52 | */}
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 | {/*
71 | Example button
72 | */}
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 | {/*
98 | Example button
99 | */}
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 |
Read More
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 |
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 |
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 |
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 |
--------------------------------------------------------------------------------