Skip to content

Commit 4e09197

Browse files
devsdenepaldevsdenepal
committed
new update
1 parent 76e2b1c commit 4e09197

File tree

7 files changed

+79
-125
lines changed

7 files changed

+79
-125
lines changed

‎src/App.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,11 @@
2424
color: white;
2525
}
2626
a {
27-
color: rgb(186 22 163) !important;
28-
text-decoration: none !important;
27+
color: rgb(186 22 163) ;
28+
text-decoration: none ;
29+
}
30+
.clk{
31+
background: rgb(186 22 163) !important;
2932
}
3033

3134
.App-link {

‎src/App.jsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
1-
import React, { useEffect, useState } from "react";
2-
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
3-
import "./App.css";
1+
import React, { useEffect, useState } from 'react';
2+
// import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
3+
import './App.css';
44
import {
55
BrowserRouter as Router,
66
Routes,
77
Route,
88
Navigate,
9-
} from "react-router-dom";
9+
} from 'react-router-dom';
10+
11+
import Login from './components/login';
12+
import SignUp from './components/register';
13+
import Home from './components/home';
14+
import Profile from './components/profile';
15+
import { ToastContainer } from 'react-toastify';
16+
import 'react-toastify/dist/ReactToastify.css';
17+
import { auth } from './components/firebase';
18+
import Navbar from './components/Navbar';
19+
import CourseDetail from './components/CourseDetail';
20+
import Dashboard from './components/dashboard';
21+
import courses from './components/courseData';
1022

11-
import Login from "./components/login";
12-
import SignUp from "./components/register";
13-
import Home from "./components/home";
14-
import Profile from "./components/profile";
15-
import { ToastContainer } from "react-toastify";
16-
import "react-toastify/dist/ReactToastify.css";
17-
import { auth } from "./components/firebase";
18-
import Navbar from "./components/Navbar";
19-
import CourseDetail from "./components/CourseDetail";
20-
import Dashboard from "./components/dashboard";
21-
import courses from "./components/courseData";
2223
function App() {
2324
const [user, setUser] = useState(null);
2425

@@ -50,9 +51,8 @@ function App() {
5051
path="/profile"
5152
element={user ? <Profile /> : <Navigate to="/login" />}
5253
/>
53-
<Route path="/courses/:courseName" element={<CourseDetail />} />
54-
<Route path="/" element={<Dashboard courses={courses} />} />
55-
<Route path="/courses/:courseName" element={<CourseDetail />} />
54+
<Route path="/courses/:courseName" element={<CourseDetail />} />
55+
<Route path="/" element={<Dashboard courses={courses} />} />
5656
</Routes>
5757
<ToastContainer />
5858
</div>

‎src/components/CourseDetail.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import courses from './courseData'; // Ensure the path is correct
55
function CourseDetail() {
66
const { courseName } = useParams();
77

8-
// Convert hyphenated URL back to the course key in the data (lowercase for matching)
9-
const courseKey = courseName.replace(/-/g, ' ').toLowerCase();
8+
// Convert the URL back to the sanitized course key
9+
const courseKey = courseName.toLowerCase(); // Ensures proper formatting
1010

11-
const course = courses[courseKey]; // Lookup using the course key
11+
const course = courses[courseKey]; // Lookup using the sanitized course key
1212

1313
if (!course) {
1414
return <h2 className="text-center">Course not found</h2>;

‎src/components/Navbar.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ function Navbar({ loggedin }) {
3333
<input type="text" className="form-control form-control-sm" placeholder="Search" />
3434
</form>
3535
{loggedin === 'true' ? (
36-
<Link className="btn btn-primary" to="/profile">Profile</Link>
36+
<Link className="btn btn-primary clk" to="/profile">Profile</Link>
3737
) : (
38-
<Link className="btn btn-primary" to="/login">Sign up</Link>
38+
<Link className="btn btn-primary clk" to="/login">Sign up</Link>
3939
)}
4040
</div>
4141
</div>

‎src/components/courseData.js‎

Lines changed: 46 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,65 @@
11
const courses = {
2-
'course 1: introduction to react': {
3-
title: 'Course 1: Introduction to React',
4-
image: 'https://ashokitech.com/uploads/course/react-js-online-training.png',
5-
description: 'Learn the fundamentals of React, one of the most popular JavaScript libraries for building user interfaces.',
2+
'course-1-github-action-setup': {
3+
title: 'Course 1: GitHub Action Setup',
4+
image: 'https://dummyimage.com/600x400/000/fff&text=GitHub+Action+Setup',
5+
description: 'Learn how to set up GitHub Actions to automate your workflows and CI/CD pipelines.',
66
content: `
7-
In this course, you will learn the basics of React, including:
8-
- Components: Understand how to create and use components.
9-
- State Management: Learn how to manage state in your applications.
10-
- Props: Discover how to pass data between components.
11-
- Lifecycle Methods: Understand component lifecycle and hooks.
12-
- JSX: Learn the syntax and structure of JSX.
7+
In this course, you will learn the following:
8+
- Setting up GitHub Actions
9+
- Writing Workflow YAML files
10+
- Continuous Integration and Continuous Deployment (CI/CD)
11+
- Automating testing and builds
1312
`,
1413
},
15-
'course 2: advanced javascript': {
16-
title: 'Course 2: Advanced JavaScript',
17-
image: 'https://img-c.udemycdn.com/course/480x270/5450776_0385.jpg',
18-
description: 'Dive deeper into JavaScript and learn advanced concepts like closures, async programming, and more.',
14+
'course-2-github-pages-guide': {
15+
title: 'Course 2: GitHub Pages Guide',
16+
image: 'https://dummyimage.com/600x400/000/fff&text=GitHub+Pages+Guide',
17+
description: 'Discover how to host your static websites directly from GitHub using GitHub Pages.',
1918
content: `
20-
This course covers advanced topics in JavaScript:
21-
- Closures: Understand how closures work and their practical applications.
22-
- Promises: Learn about asynchronous programming with promises.
23-
- Async/Await: Simplify asynchronous code with async/await syntax.
24-
- Prototypes and Inheritance: Understand how JavaScript implements inheritance.
25-
- ES6 Features: Explore new features introduced in ES6, including arrow functions, template literals, and destructuring.
26-
`,
27-
},
28-
'course 3: web development with node.js': {
29-
title: 'Course 3: Web Development with Node.js',
30-
image: 'https://livetechindia.com/wp-content/uploads/2023/12/Nodejs-Application-Development-1024x683.jpg',
31-
description: 'Build scalable web applications using Node.js, Express, and MongoDB.',
32-
content: `
33-
In this course, you will learn to develop web applications using:
34-
- Node.js: Understand the basics and set up a Node.js environment.
35-
- Express.js: Learn how to create RESTful APIs with Express.
36-
- MongoDB: Explore how to store and retrieve data using MongoDB.
37-
- Authentication: Implement user authentication with JWT.
38-
- Deployment: Deploy your application on cloud platforms.
19+
This course will cover:
20+
- Setting up GitHub Pages
21+
- Hosting static websites
22+
- Managing custom domains with GitHub Pages
23+
- Publishing your site
3924
`,
4025
},
41-
'course 4: python for data science': {
42-
title: 'Course 4: Python for Data Science',
43-
image: 'https://cdn.shopaccino.com/igmguru/products/data-science--with-python-igmguru_176161162_l.jpg?v=444p',
44-
description: 'Master Python and its libraries to analyze data and build machine learning models.',
26+
'course-3-introduction-to-firebase': {
27+
title: 'Course 3: Introduction to Firebase',
28+
image: 'https://dummyimage.com/600x400/000/fff&text=Introduction+to+Firebase',
29+
description: 'An introductory guide to Firebase, Google’s platform for app development.',
4530
content: `
46-
This course focuses on:
47-
- Python Basics: Get comfortable with Python syntax and data structures.
48-
- Pandas: Learn how to manipulate and analyze data with Pandas.
49-
- NumPy: Use NumPy for numerical computing.
50-
- Data Visualization: Create visualizations with Matplotlib and Seaborn.
51-
- Introduction to Machine Learning: Explore the basics of machine learning and build your first model.
31+
In this course, you will learn about:
32+
- Firebase Authentication
33+
- Firestore database
34+
- Hosting your application
35+
- Firebase Cloud Functions
5236
`,
5337
},
54-
'course 5: ui/ux design fundamentals': {
55-
title: 'Course 5: UI/UX Design Fundamentals',
56-
image: 'https://www.tgcindia.com/wp-content/uploads/2020/09/UX-design-course-at-TGC.jpg',
57-
description: 'Learn the principles of UI/UX design and how to create intuitive user interfaces.',
38+
'course-4-working-with-cloudflare': {
39+
title: 'Course 4: Working with Cloudflare',
40+
image: 'https://dummyimage.com/600x400/000/fff&text=Working+with+Cloudflare',
41+
description: 'Learn how to use Cloudflare to enhance the security and performance of your websites.',
5842
content: `
59-
This course will cover:
60-
- Design Principles: Understand key design principles that guide effective design.
61-
- User Research: Learn how to conduct user research and usability testing.
62-
- Wireframing: Create wireframes to visualize user interfaces.
63-
- Prototyping: Use tools to build interactive prototypes.
64-
- Design Tools: Get hands-on experience with design tools like Figma and Adobe XD.
43+
Topics covered include:
44+
- Setting up Cloudflare DNS
45+
- DDoS protection
46+
- Web performance optimization
47+
- SSL certificates and encryption
6548
`,
6649
},
67-
'course 6: cloud computing with aws': {
68-
title: 'Course 6: Cloud Computing with AWS',
69-
image: 'https://codequotient.com/blog/wp-content/uploads/2022/09/Is-It-Worth-Doing-AWS-Cloud-Computing-Course.jpg',
70-
description: 'Get started with cloud computing using Amazon Web Services (AWS) and learn how to build cloud infrastructure.',
50+
'course-5-domain-hosting': {
51+
title: 'Course 5: Everything You Need to Know About Domain Hosting',
52+
image: 'https://dummyimage.com/600x400/000/fff&text=Domain+Hosting',
53+
description: 'A complete guide to understanding domain registration and hosting.',
7154
content: `
72-
In this course, you will learn about:
73-
- Introduction to Cloud Computing: Understand cloud concepts and services.
74-
- AWS Services: Explore key AWS services like EC2, S3, and Lambda.
75-
- Deployment: Learn how to deploy applications in the cloud.
76-
- Security: Understand cloud security best practices.
77-
- Hands-on Projects: Build real-world projects using AWS.
55+
Learn about:
56+
- Domain registration
57+
- DNS configuration
58+
- Hosting providers
59+
- Migrating domains between hosts
7860
`,
7961
},
62+
// Add more courses similarly
8063
};
8164

8265
export default courses;

‎src/components/dashboard.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React from 'react';
22
import { Link } from 'react-router-dom';
33

44
function Dashboard({ courses }) {
5-
if (!courses || courses.length === 0) {
6-
return <h2 className="text-center">No courses available</h2>;
5+
if (!courses || Object.keys(courses).length === 0) {
6+
return <h2 className="text-center">No courses available!</h2>;
77
}
88

99
return (
@@ -12,10 +12,10 @@ function Dashboard({ courses }) {
1212
<div className="container my-4">
1313
<h2 className="text-center mb-4">Course Home</h2>
1414
<div className="row row-cols-1 row-cols-md-3 g-3">
15-
{courses.map((course, index) => (
15+
{Object.entries(courses).map(([key, course], index) => (
1616
<div className="col" key={index}>
1717
<div className="card h-100">
18-
<Link to={`/courses/${course.title.replace(/\s+/g, '-').toLowerCase()}`}>
18+
<Link to={`/courses/${key}`}>
1919
<img src={course.image} className="card-img-top" alt={course.title} />
2020
<div className="card-body">
2121
<h5 className="card-title">{course.title}</h5>

‎src/components/home.jsx‎

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,7 @@
11
// Home.jsx
22
import React from 'react';
33
import Dashboard from './dashboard';
4-
5-
const courses = [
6-
{
7-
title: "Course 1: Introduction to React",
8-
description: "Learn the fundamentals of React, one of the most popular JavaScript libraries for building user interfaces.",
9-
image: "https://ashokitech.com/uploads/course/react-js-online-training.png"
10-
},
11-
{
12-
title: "Course 2: Advanced JavaScript",
13-
description: "Dive deeper into JavaScript and learn advanced concepts like closures, async programming, and more.",
14-
image: "https://img-c.udemycdn.com/course/480x270/5450776_0385.jpg"
15-
},
16-
{
17-
title: "Course 3: Web Development with Node.js",
18-
description: "Build scalable web applications using Node.js, Express, and MongoDB.",
19-
image: "https://livetechindia.com/wp-content/uploads/2023/12/Nodejs-Application-Development-1024x683.jpg"
20-
},
21-
{
22-
title: "Course 4: Python for Data Science",
23-
description: "Master Python and its libraries to analyze data and build machine learning models.",
24-
image: "https://cdn.shopaccino.com/igmguru/products/data-science--with-python-igmguru_176161162_l.jpg?v=444p"
25-
},
26-
{
27-
title: "Course 5: UI/UX Design Fundamentals",
28-
description: "Learn the principles of UI/UX design and how to create intuitive user interfaces.",
29-
image: "https://www.tgcindia.com/wp-content/uploads/2020/09/UX-design-course-at-TGC.jpg"
30-
},
31-
{
32-
title: "Course 6: Cloud Computing with AWS",
33-
description: "Get started with cloud computing using Amazon Web Services (AWS) and learn how to build cloud infrastructure.",
34-
image: "https://codequotient.com/blog/wp-content/uploads/2022/09/Is-It-Worth-Doing-AWS-Cloud-Computing-Course.jpg"
35-
}
36-
];
4+
import courses from './courseData';
375

386
function Home() {
397
return (

0 commit comments

Comments
 (0)