Warning

🚧️ THIS REPOSITORY IS UNDER CONSTRUCTION !!! 🚧️

📅 Last update: 21 June - 2024

Note

Online Code Classes is made from Juan Pablo de la Torre Valdez, with some visual and code changes.

Course: React and TypeScript - The Complete Guide Creating +10 Projects

Changes made 👇🏻

Original project	By: Melquiades H.R
...	...
...	...
...	...
...	...

Online Code Classes

Badges 🎫

  

Table of Contents 📑

• Description
• Demo
• Install and Run
• Built with
• License
• Author

Description 🖋️

Purchase classes to learn to program online by choosing the hours with your teacher.

Demo 💻

Main image of the "Online Code Classes" project

Modal window to manage the course shopping cart.

Install and Run ⚙️

Project installation:

npm init

Run the project:

npm run dev

Built with 🏗️

Technologies to build this project:

Name	Version
	HTML 5.3
	CSS3
	ES2020
	v18.12.1
	React v18
	5.2.2
	5.2.0

Some code blocks from the project:

export default function Footer() {
  return (
    <footer className="bg-dark mt-5 py-5">
      <div className="container-xl">
        <p className="text-white text-center fs-4 mt-4 m-md-0">
          Developed by Melquiades H.R.
        </p>
      </div>
    </footer>
  );
}

Structure of the "Footer" component that includes the project

function App() {

  const {data, cart, addToCart, addQuantity, lessQuantity, removeCourses, clearCart, isEmptyCart, totalPay } = useCourse();

  return (
    <>
      <Header 
        cart={cart}
        addQuantity={addQuantity}
        lessQuantity={lessQuantity}
        removeCourses={removeCourses}
        clearCart={clearCart}
        isEmptyCart={isEmptyCart}
        totalPay={totalPay}
        />
      <main className="container-xl mt-5">
        <h2 className="text-center">Choose your favorite languages</h2>

        <div className="row mt-5">
          
          {/* We generate as many components as there are items in the db array */}
          {data.map((course)=>
            <Course 
              // Warning: Each child in a list should have a unique "key" prop.
              key={course.id}
              course={course}
              addToCart={addToCart}/> 
          )}

        </div>
      </main>
      <Footer />
    </>
  );
}

export default App;

Main component of the application "App"

License 📋

Free software license used to protect the rights of users and promote freedom in the use, modification and distribution of software.

GPL-3.0 license

Author 🧑🏻‍💻

Melquiades H.R.