Advanced Components

Mermaid diagrams, file trees, and code diffs for educational content

Advanced Components

This lesson demonstrates the three new advanced components available in the CMS: Mermaid Diagrams, File Trees, and Code Diffs. These components are essential for creating rich, interactive educational content.

1. Mermaid Diagrams

Mermaid allows you to create diagrams and visualizations using simple text syntax. Perfect for explaining algorithms, architectures, and workflows.

Flowchart Example

Here's a simple authentication flow:



Sequence Diagram


Visualizing API interactions:




Class Diagram


Object-oriented design visualization:




State Diagram


Application state management:




Git Graph


Visualizing version control workflows:




2. File Tree Visualization


File trees are perfect for showing project structures, helping students understand how to organize their code.


Basic React Project Structure


  • my-react-app
    • node_modules
    • public
      • index.html
      • favicon.ico
    • src
      • components
        • Header.jsx
        • Footer.jsx
        • Button.jsx
      • pages
        • Home.jsx
        • About.jsx
        • Contact.jsx
      • App.jsx
      • index.js
      • styles.css
    • package.json
    • README.md
    • .gitignore


Full-Stack Application Structure


  • fullstack-app
    • backend
      • src
        • controllers
          • userController.js
          • authController.js
        • models
          • User.js
          • Post.js
        • routes
          • api.js
          • auth.js
        • middleware
          • authenticate.js
          • validate.js
        • config
          • database.js
          • env.js
        • app.js
      • tests
        • user.test.js
        • auth.test.js
      • package.json
    • frontend
      • src
        • components
        • pages
        • services
          • api.js
        • App.jsx
      • public
      • package.json
    • docker-compose.yml
    • README.md


Microservices Architecture


  • microservices-project
    • services
      • user-service
        • src
        • Dockerfile
        • package.json
      • order-service
        • src
        • Dockerfile
        • package.json
      • payment-service
        • src
        • Dockerfile
        • package.json
    • gateway
      • src
      • Dockerfile
    • docker-compose.yml
    • kubernetes
      • deployments
      • services
      • ingress.yaml
    • README.md


3. Code Diff Visualization


Code diffs are excellent for showing refactoring, best practices, and version changes.


Refactoring: Callbacks to Async/Await


Before and after comparison:


- function fetchUser(userId, callback) {
-   db.query('SELECT * FROM users WHERE id = ?', [userId], function(err, user) {
-     if (err) {
-       callback(err, null);
-     } else {
-       callback(null, user);
-     }
-   });
- }
+ async function fetchUser(userId) {
+   try {
+     const user = await db.query('SELECT * FROM users WHERE id = ?', [userId]);
+     return user;
+   } catch (error) {
+     throw error;
+   }
+ }



Security Fix: Preventing SQL Injection


- const query = `SELECT * FROM users WHERE username = '${username}'`;
- db.execute(query);
+ const query = 'SELECT * FROM users WHERE username = ?';
+ db.execute(query, [username]);



Performance Optimization


- const users = await User.findAll();
- const activeUsers = users.filter(u => u.active);
- const sortedUsers = activeUsers.sort((a, b) => b.createdAt - a.createdAt);
+ const activeUsers = await User.findAll({
+   where: { active: true },
+   order: [['createdAt', 'DESC']]
+ });



Modern JavaScript Syntax


- var that = this;
- setTimeout(function() {
-   console.log(that.name);
- }, 1000);
+ setTimeout(() => {
+   console.log(this.name);
+ }, 1000);



Adding Error Handling


 async function createUser(data) {
+   if (!data.email || !data.username) {
+     throw new Error('Email and username are required');
+   }
+
     const user = new User(data);
-   await user.save();
+
+   try {
+     await user.save();
+   } catch (error) {
+     console.error('Failed to create user:', error);
+     throw error;
+   }
+
     return user;
   }



Combining Components


You can combine these components to create rich, comprehensive lessons. Here's an example showing a feature implementation workflow:


Example: Implementing User Authentication


Architecture Overview:




Project Structure:


  • auth-system
    • src
      • controllers
        • authController.js
      • middleware
        • verifyToken.js
      • models
        • User.js
      • routes
        • auth.js
      • utils
        • jwt.js
      • app.js
    • tests
    • package.json


Code Implementation:


 // auth.js routes
   const express = require('express');
   const router = express.Router();
+ const authController = require('../controllers/authController');
+ const verifyToken = require('../middleware/verifyToken');
- router.get('/profile', (req, res) => {
-   res.json({ message: 'Profile' });
- });
+ router.post('/register', authController.register);
+ router.post('/login', authController.login);
+ router.get('/profile', verifyToken, authController.getProfile);
   module.exports = router;



Best Practices




Summary


You've now seen how to use:


    

  1. Mermaid Diagrams - For visualizing concepts, flows, and architectures
    2. 

  2. File Trees - For showing project structures and organization
    3. 

  3. Code Diffs - For demonstrating code changes and improvements
    4. 



These components make your educational content more engaging and easier to understand!


Practice Exercise


steps


    

  1. 

    Create a Flowchart
    

    Design a flowchart for a simple shopping cart checkout process.
    

    2. 

  2. 

    Design a File Structure
    

    Plan the file structure for a TODO list application with user authentication.
    

    3. 

  3. 

    Show a Refactoring
    

    Take a function you've written and show how to improve it using a code diff.
    

    4. 



Solution Examples

Here's a sample solution for the shopping cart: