Build a Student Course Explorer using React. The application should display available courses, their instructors, course levels, descriptions, and enrollment status.
This project helps learners practice the core concepts covered in the React Basics module, including JSX, components, props, lists, conditional rendering, import and export, and the basic idea of the Virtual DOM.
Step-by-Step Implementation
1. Create the Basic Course Explorer
Create the main React component and use JSX to build the initial course explorer.
import React from "react";
function App() {
return (
<div style={styles.page}>
<div style={styles.container}>
<h1 style={styles.heading}>
Student Course Explorer
</h1>
<p style={styles.intro}>
Explore courses and find the right one to learn.
</p>
<div style={styles.card}>
<span style={styles.category}>
WEB DEVELOPMENT
</span>
<h2>React Development</h2>
<p style={styles.instructor}>
Instructor: Alex Johnson
</p>
<p>
Learn the basics of building user interfaces
with React.
</p>
<p style={styles.level}>
Level: Beginner
</p>
</div>
</div>
</div>
);
}
const styles = {
page: {
minHeight: "100vh",
padding: "60px 20px",
background: "#f4f7fb",
fontFamily: "Arial, sans-serif",
color: "#222"
},
container: {
maxWidth: "900px",
margin: "0 auto"
},
heading: {
margin: "0 0 8px",
textAlign: "center"
},
intro: {
margin: "0 0 30px",
textAlign: "center",
color: "#666"
},
card: {
maxWidth: "500px",
margin: "0 auto",
padding: "25px",
background: "#fff",
border: "1px solid #ddd",
borderRadius: "14px",
boxShadow: "0 5px 18px rgba(0, 0, 0, 0.06)"
},
category: {
fontSize: "12px",
fontWeight: "bold",
color: "#087f5b"
},
instructor: {
color: "#666"
},
level: {
fontWeight: "bold"
}
};
export default App;
The application now contains a basic course card created using JSX.
Output
2. Create a Reusable Course Component
Create a separate CourseCard component inside the same file. Course information is passed to the component using props.
import React from "react";
function CourseCard(props) {
return (
<div style={styles.card}>
<span style={styles.category}>
{props.category}
</span>
<h2>{props.name}</h2>
<p style={styles.instructor}>
Instructor: {props.instructor}
</p>
<p>{props.description}</p>
<p style={styles.level}>
Level: {props.level}
</p>
</div>
);
}
function App() {
return (
<div style={styles.page}>
<div style={styles.container}>
<h1 style={styles.heading}>
Student Course Explorer
</h1>
<p style={styles.intro}>
Explore courses and find the right one to learn.
</p>
<CourseCard
category="WEB DEVELOPMENT"
name="React Development"
instructor="Alex Johnson"
description="Learn the basics of building user interfaces with React."
level="Beginner"
/>
</div>
</div>
);
}
const styles = {
page: {
minHeight: "100vh",
padding: "60px 20px",
background: "#f4f7fb",
fontFamily: "Arial, sans-serif",
color: "#222"
},
container: {
maxWidth: "900px",
margin: "0 auto"
},
heading: {
margin: "0 0 8px",
textAlign: "center"
},
intro: {
margin: "0 0 30px",
textAlign: "center",
color: "#666"
},
card: {
maxWidth: "500px",
margin: "0 auto",
padding: "25px",
background: "#fff",
border: "1px solid #ddd",
borderRadius: "14px",
boxShadow: "0 5px 18px rgba(0, 0, 0, 0.06)"
},
category: {
fontSize: "12px",
fontWeight: "bold",
color: "#087f5b"
},
instructor: {
color: "#666"
},
level: {
fontWeight: "bold"
}
};
export default App;
The application now contains a basic course card created using JSX.
Output
3. Display Multiple Courses Using Lists
Create an array of course objects and use map() to display multiple CourseCard components.
import React from "react";
const courses = [
{
id: 1,
category: "WEB DEVELOPMENT",
name: "React Development",
instructor: "Alex Johnson",
description:
"Learn the basics of building user interfaces with React.",
level: "Beginner",
available: true
},
{
id: 2,
category: "PROGRAMMING",
name: "JavaScript Essentials",
instructor: "Sarah Williams",
description:
"Build a strong foundation in JavaScript programming.",
level: "Beginner",
available: true
},
{
id: 3,
category: "DATA SCIENCE",
name: "Python for Data Science",
instructor: "David Miller",
description:
"Learn Python concepts used in data analysis.",
level: "Intermediate",
available: false
}
];
function CourseCard(props) {
return (
<div style={styles.card}>
<span style={styles.category}>
{props.category}
</span>
<h2>{props.name}</h2>
<p style={styles.instructor}>
Instructor: {props.instructor}
</p>
<p>{props.description}</p>
<p style={styles.level}>
Level: {props.level}
</p>
</div>
);
}
function App() {
return (
<div style={styles.page}>
<div style={styles.container}>
<h1 style={styles.heading}>
Student Course Explorer
</h1>
<p style={styles.intro}>
Explore courses and find the right one to learn.
</p>
<div style={styles.courseGrid}>
{courses.map((course) => (
<CourseCard
key={course.id}
category={course.category}
name={course.name}
instructor={course.instructor}
description={course.description}
level={course.level}
/>
))}
</div>
</div>
</div>
);
}
const styles = {
page: {
minHeight: "100vh",
padding: "60px 20px",
background: "#f4f7fb",
fontFamily: "Arial, sans-serif",
color: "#222"
},
container: {
maxWidth: "1000px",
margin: "0 auto"
},
heading: {
margin: "0 0 8px",
textAlign: "center"
},
intro: {
margin: "0 0 30px",
textAlign: "center",
color: "#666"
},
courseGrid: {
display: "grid",
gridTemplateColumns:
"repeat(auto-fit, minmax(270px, 1fr))",
gap: "20px"
},
card: {
padding: "25px",
background: "#fff",
border: "1px solid #ddd",
borderRadius: "14px",
boxShadow: "0 5px 18px rgba(0, 0, 0, 0.06)"
},
category: {
fontSize: "12px",
fontWeight: "bold",
color: "#087f5b"
},
instructor: {
color: "#666"
},
level: {
fontWeight: "bold"
}
};
export default App;
The course list is rendered using map(). The key prop gives each course its own identity in the rendered list.
Output
4. Add Conditional Rendering for Course Availability
Finally, use conditional rendering to show whether enrollment is available for each course.
import React from "react";
const courses = [
{
id: 1,
category: "WEB DEVELOPMENT",
name: "React Development",
instructor: "Alex Johnson",
description:
"Learn the basics of building user interfaces with React.",
level: "Beginner",
available: true
},
{
id: 2,
category: "PROGRAMMING",
name: "JavaScript Essentials",
instructor: "Sarah Williams",
description:
"Build a strong foundation in JavaScript programming.",
level: "Beginner",
available: true
},
{
id: 3,
category: "DATA SCIENCE",
name: "Python for Data Science",
instructor: "David Miller",
description:
"Learn Python concepts used in data analysis.",
level: "Intermediate",
available: false
}
];
function CourseCard(props) {
return (
<div style={styles.card}>
<div style={styles.cardTop}>
<span style={styles.category}>
{props.category}
</span>
{props.available ? (
<span style={styles.available}>
Available
</span>
) : (
<span style={styles.unavailable}>
Full
</span>
)}
</div>
<h2>{props.name}</h2>
<p style={styles.instructor}>
Instructor: {props.instructor}
</p>
<p>{props.description}</p>
<p style={styles.level}>
Level: {props.level}
</p>
{props.available ? (
<p style={styles.action}>
Enrollment is open
</p>
) : (
<p style={styles.closed}>
Enrollment is currently closed
</p>
)}
</div>
);
}
function App() {
return (
<div style={styles.page}>
<div style={styles.container}>
<div style={styles.header}>
<div>
<span style={styles.smallTitle}>
LEARNING HUB
</span>
<h1 style={styles.heading}>
Student Course Explorer
</h1>
<p style={styles.intro}>
Explore courses and find the right one
to learn.
</p>
</div>
<div style={styles.courseCount}>
<strong>{courses.length}</strong>
<span>Courses</span>
</div>
</div>
<div style={styles.courseGrid}>
{courses.map((course) => (
<CourseCard
key={course.id}
category={course.category}
name={course.name}
instructor={course.instructor}
description={course.description}
level={course.level}
available={course.available}
/>
))}
</div>
</div>
</div>
);
}
const styles = {
page: {
minHeight: "100vh",
padding: "60px 20px",
boxSizing: "border-box",
background: "#f4f7fb",
fontFamily: "Arial, sans-serif",
color: "#222"
},
container: {
maxWidth: "1000px",
margin: "0 auto"
},
header: {
display: "flex",
justifyContent: "space-between",
alignItems: "flex-end",
gap: "25px",
marginBottom: "35px"
},
smallTitle: {
fontSize: "12px",
fontWeight: "bold",
color: "#087f5b",
letterSpacing: "1px"
},
heading: {
margin: "7px 0",
fontSize: "32px"
},
intro: {
margin: 0,
color: "#666",
lineHeight: "1.6"
},
courseCount: {
display: "flex",
flexDirection: "column",
alignItems: "center",
minWidth: "90px",
padding: "14px",
background: "#fff",
border: "1px solid #ddd",
borderRadius: "10px"
},
courseGrid: {
display: "grid",
gridTemplateColumns:
"repeat(auto-fit, minmax(270px, 1fr))",
gap: "20px"
},
card: {
padding: "25px",
background: "#fff",
border: "1px solid #ddd",
borderRadius: "14px",
boxShadow: "0 5px 18px rgba(0, 0, 0, 0.06)"
},
cardTop: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "10px"
},
category: {
fontSize: "11px",
fontWeight: "bold",
color: "#087f5b"
},
available: {
padding: "5px 9px",
borderRadius: "20px",
background: "#e8f7ef",
color: "#087f5b",
fontSize: "11px",
fontWeight: "bold"
},
unavailable: {
padding: "5px 9px",
borderRadius: "20px",
background: "#fceaea",
color: "#c92a2a",
fontSize: "11px",
fontWeight: "bold"
},
instructor: {
color: "#666"
},
level: {
fontWeight: "bold"
},
action: {
marginBottom: 0,
color: "#087f5b",
fontWeight: "bold"
},
closed: {
marginBottom: 0,
color: "#c92a2a",
fontWeight: "bold"
}
};
export default App;
The available value is used to conditionally display Available or Full. It also changes the enrollment message shown on the course card.
Output
Final Source Code
The complete project can be placed in a single App.jsx file.
import React from "react";
const courses = [
{
id: 1,
category: "WEB DEVELOPMENT",
name: "React Development",
instructor: "Alex Johnson",
description:
"Learn the basics of building user interfaces with React.",
level: "Beginner",
available: true
},
{
id: 2,
category: "PROGRAMMING",
name: "JavaScript Essentials",
instructor: "Sarah Williams",
description:
"Build a strong foundation in JavaScript programming.",
level: "Beginner",
available: true
},
{
id: 3,
category: "DATA SCIENCE",
name: "Python for Data Science",
instructor: "David Miller",
description:
"Learn Python concepts used in data analysis.",
level: "Intermediate",
available: false
}
];
function CourseCard(props) {
return (
<div style={styles.card}>
<div style={styles.cardTop}>
<span style={styles.category}>
{props.category}
</span>
{props.available ? (
<span style={styles.available}>
Available
</span>
) : (
<span style={styles.unavailable}>
Full
</span>
)}
</div>
<h2>{props.name}</h2>
<p style={styles.instructor}>
Instructor: {props.instructor}
</p>
<p>{props.description}</p>
<p style={styles.level}>
Level: {props.level}
</p>
{props.available ? (
<p style={styles.action}>
Enrollment is open
</p>
) : (
<p style={styles.closed}>
Enrollment is currently closed
</p>
)}
</div>
);
}
function App() {
return (
<div style={styles.page}>
<div style={styles.container}>
<div style={styles.header}>
<div>
<span style={styles.smallTitle}>
LEARNING HUB
</span>
<h1 style={styles.heading}>
Student Course Explorer
</h1>
<p style={styles.intro}>
Explore courses and find the right one
to learn.
</p>
</div>
<div style={styles.courseCount}>
<strong>{courses.length}</strong>
<span>Courses</span>
</div>
</div>
<div style={styles.courseGrid}>
{courses.map((course) => (
<CourseCard
key={course.id}
category={course.category}
name={course.name}
instructor={course.instructor}
description={course.description}
level={course.level}
available={course.available}
/>
))}
</div>
</div>
</div>
);
}
const styles = {
page: {
minHeight: "100vh",
padding: "60px 20px",
boxSizing: "border-box",
background: "#f4f7fb",
fontFamily: "Arial, sans-serif",
color: "#222"
},
container: {
maxWidth: "1000px",
margin: "0 auto"
},
header: {
display: "flex",
justifyContent: "space-between",
alignItems: "flex-end",
gap: "25px",
marginBottom: "35px"
},
smallTitle: {
fontSize: "12px",
fontWeight: "bold",
color: "#087f5b",
letterSpacing: "1px"
},
heading: {
margin: "7px 0",
fontSize: "32px"
},
intro: {
margin: 0,
color: "#666",
lineHeight: "1.6"
},
courseCount: {
display: "flex",
flexDirection: "column",
alignItems: "center",
minWidth: "90px",
padding: "14px",
background: "#fff",
border: "1px solid #ddd",
borderRadius: "10px"
},
courseGrid: {
display: "grid",
gridTemplateColumns:
"repeat(auto-fit, minmax(270px, 1fr))",
gap: "20px"
},
card: {
padding: "25px",
background: "#fff",
border: "1px solid #ddd",
borderRadius: "14px",
boxShadow: "0 5px 18px rgba(0, 0, 0, 0.06)"
},
cardTop: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "10px"
},
category: {
fontSize: "11px",
fontWeight: "bold",
color: "#087f5b"
},
available: {
padding: "5px 9px",
borderRadius: "20px",
background: "#e8f7ef",
color: "#087f5b",
fontSize: "11px",
fontWeight: "bold"
},
unavailable: {
padding: "5px 9px",
borderRadius: "20px",
background: "#fceaea",
color: "#c92a2a",
fontSize: "11px",
fontWeight: "bold"
},
instructor: {
color: "#666"
},
level: {
fontWeight: "bold"
},
action: {
marginBottom: 0,
color: "#087f5b",
fontWeight: "bold"
},
closed: {
marginBottom: 0,
color: "#c92a2a",
fontWeight: "bold"
}
};
export default App;