Skip to content

Commit f4cec76

Browse files
devsdenepaldevsdenepal
committed
add base
1 parent c3f6639 commit f4cec76

File tree

5 files changed

+193
-107
lines changed

5 files changed

+193
-107
lines changed

‎src/App.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ import { ToastContainer } from "react-toastify";
1616
import "react-toastify/dist/ReactToastify.css";
1717
import { auth } from "./components/firebase";
1818
import Navbar from "./components/Navbar";
19-
19+
import CourseDetail from "./components/CourseDetail";
20+
import Dashboard from "./components/dashboard";
21+
import courses from "./components/courseData";
2022
function App() {
2123
const [user, setUser] = useState(null);
2224

@@ -48,6 +50,9 @@ function App() {
4850
path="/profile"
4951
element={user ? <Profile /> : <Navigate to="/login" />}
5052
/>
53+
<Route path="/courses/:courseName" element={<CourseDetail />} />
54+
<Route path="/" element={<Dashboard courses={courses} />} />
55+
<Route path="/courses/:courseName" element={<CourseDetail />} />
5156
</Routes>
5257
<ToastContainer />
5358
</div>

‎src/components/CourseDetail.jsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { useParams } from 'react-router-dom';
3+
import courses from './courseData'; // Ensure the path is correct
4+
5+
function CourseDetail() {
6+
const { courseName } = useParams();
7+
8+
// Convert hyphenated URL back to the course key in the data (lowercase for matching)
9+
const courseKey = courseName.replace(/-/g, ' ').toLowerCase();
10+
11+
const course = courses[courseKey]; // Lookup using the course key
12+
13+
if (!course) {
14+
return <h2 className="text-center">Course not found</h2>;
15+
}
16+
17+
return (
18+
<div className="container mt-5">
19+
<h2>{course.title}</h2>
20+
<img src={course.image} alt={course.title} className="img-fluid" />
21+
<p>{course.description}</p>
22+
<h4>Course Content:</h4>
23+
<p>{course.content}</p>
24+
</div>
25+
);
26+
}
27+
28+
export default CourseDetail;

‎src/components/courseData.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
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.',
6+
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.
13+
`,
14+
},
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.',
19+
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.
39+
`,
40+
},
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.',
45+
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.
52+
`,
53+
},
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.',
58+
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.
65+
`,
66+
},
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.',
71+
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.
78+
`,
79+
},
80+
};
81+
82+
export default courses;

‎src/components/dashboard.jsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
function Dashboard({ courses }) {
5+
if (!courses || courses.length === 0) {
6+
return <h2 className="text-center">No courses available</h2>;
7+
}
8+
9+
return (
10+
<div>
11+
<h1 className="text-center my-4">Dashboard</h1>
12+
<div className="container my-4">
13+
<h2 className="text-center mb-4">Course Home</h2>
14+
<div className="row row-cols-1 row-cols-md-3 g-3">
15+
{courses.map((course, index) => (
16+
<div className="col" key={index}>
17+
<div className="card h-100">
18+
<Link to={`/courses/${course.title.replace(/\s+/g, '-').toLowerCase()}`}>
19+
<img src={course.image} className="card-img-top" alt={course.title} />
20+
<div className="card-body">
21+
<h5 className="card-title">{course.title}</h5>
22+
<p className="card-text">{course.description}</p>
23+
</div>
24+
</Link>
25+
</div>
26+
</div>
27+
))}
28+
</div>
29+
</div>
30+
</div>
31+
);
32+
}
33+
34+
export default Dashboard;

‎src/components/home.jsx‎

Lines changed: 43 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,44 @@
1-
function Home() {
2-
return (
3-
<div className="container my-4">
4-
<h2 className="text-center mb-4">Course home</h2>
5-
<div className="row row-cols-1 row-cols-md-3 g-3">
6-
<div className="col">
7-
<div className="card h-100">
8-
<img
9-
src="https://ashokitech.com/uploads/course/react-js-online-training.png"
10-
className="card-img-top"
11-
alt="Course 1"
12-
/>
13-
<div className="card-body">
14-
<h5 className="card-title">Course 1: Introduction to React</h5>
15-
<p className="card-text">
16-
Learn the fundamentals of React, one of the most popular JavaScript libraries for building user interfaces.
17-
</p>
18-
</div>
19-
</div>
20-
</div>
21-
22-
<div className="col">
23-
<div className="card h-100">
24-
<img
25-
src="https://img-c.udemycdn.com/course/480x270/5450776_0385.jpg"
26-
className="card-img-top"
27-
alt="Course 2"
28-
/>
29-
<div className="card-body">
30-
<h5 className="card-title">Course 2: Advanced JavaScript</h5>
31-
<p className="card-text">
32-
Dive deeper into JavaScript and learn advanced concepts like closures, async programming, and more.
33-
</p>
34-
</div>
35-
</div>
36-
</div>
37-
38-
<div className="col">
39-
<div className="card h-100">
40-
<img
41-
src="https://livetechindia.com/wp-content/uploads/2023/12/Nodejs-Application-Development-1024x683.jpg"
42-
className="card-img-top"
43-
alt="Course 3"
44-
/>
45-
<div className="card-body">
46-
<h5 className="card-title">Course 3: Web Development with Node.js</h5>
47-
<p className="card-text">
48-
Build scalable web applications using Node.js, Express, and MongoDB.
49-
</p>
50-
</div>
51-
</div>
52-
</div>
53-
54-
<div className="col">
55-
<div className="card h-100">
56-
<img
57-
src="https://cdn.shopaccino.com/igmguru/products/data-science--with-python-igmguru_176161162_l.jpg?v=444p"
58-
className="card-img-top"
59-
alt="Course 4"
60-
/>
61-
<div className="card-body">
62-
<h5 className="card-title">Course 4: Python for Data Science</h5>
63-
<p className="card-text">
64-
Master Python and its libraries to analyze data and build machine learning models.
65-
</p>
66-
</div>
67-
</div>
68-
</div>
69-
70-
<div className="col">
71-
<div className="card h-100">
72-
<img
73-
src="https://www.tgcindia.com/wp-content/uploads/2020/09/UX-design-course-at-TGC.jpg"
74-
className="card-img-top"
75-
alt="Course 5"
76-
/>
77-
<div className="card-body">
78-
<h5 className="card-title">Course 5: UI/UX Design Fundamentals</h5>
79-
<p className="card-text">
80-
Learn the principles of UI/UX design and how to create intuitive user interfaces.
81-
</p>
82-
</div>
83-
</div>
84-
</div>
85-
86-
<div className="col">
87-
<div className="card h-100">
88-
<img
89-
src="https://codequotient.com/blog/wp-content/uploads/2022/09/Is-It-Worth-Doing-AWS-Cloud-Computing-Course.jpg"
90-
className="card-img-top"
91-
alt="Course 6"
92-
/>
93-
<div className="card-body">
94-
<h5 className="card-title">Course 6: Cloud Computing with AWS</h5>
95-
<p className="card-text">
96-
Get started with cloud computing using Amazon Web Services (AWS) and learn how to build cloud infrastructure.
97-
</p>
98-
</div>
99-
</div>
100-
</div>
101-
</div>
102-
</div>
103-
);
1+
// Home.jsx
2+
import React from 'react';
3+
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"
10435
}
105-
106-
export default Home;
107-
36+
];
37+
38+
function Home() {
39+
return (
40+
<Dashboard courses={courses} /> // Pass the courses as props
41+
);
42+
}
43+
44+
export default Home;

0 commit comments

Comments
 (0)