Layman Tech Notes

January 07, 2024

Page content

Layman Tech Notes offers a comprehensive learning platform with structured courses covering essential tech topics. Each course features markdown-based lessons that make content management seamless and accessible. The platform includes built-in progress tracking that monitors your journey across all courses, with intuitive Previous/Next navigation buttons to guide your learning experience smoothly from one lesson to the next.

The app goes beyond passive learning by incorporating interview simulation assessments that mirror real technical interviews. Each course includes carefully crafted interview-style questions designed to test your understanding. To support your learning, the platform provides Show Hint and Show Answer features, along with detailed sample answers and explanations. Progress tracking extends to assessments as well, helping you measure your readiness for actual interviews.

To keep learners motivated and engaged, Layman Tech Notes implements a robust gamification system. You’ll earn 100 points for completing each lesson, working your way through a 50-level trophy system that spans from 100 to 5000 points. The platform features a dedicated trophy collection page where you can view your achievements, with real-time points displayed throughout your learning journey to celebrate your progress.

The entire experience is wrapped in a modern, user-friendly interface built with Material-UI components that deliver a professional and polished design. The responsive layout ensures seamless access across all devices, whether you’re learning on desktop, tablet, or mobile. Firebase authentication provides secure access to your account, while Firestore enables real-time data persistence and updates, ensuring your progress is always saved and synchronized across devices.

Architecture & Technology Stack

Frontend

{
  "react": "^18.x",
  "react-router-dom": "^6.x",
  "@mui/material": "^5.x",
  "react-markdown": "^8.x",
  "react-syntax-highlighter": "^15.x"
}

Backend & Database

{
  "firebase": "^10.x",
  "firestore": "Database",
  "firebase-auth": "Authentication"
}

Project Structure

layman-technotes-react/
├── public/
│   └── courses/
│       ├── a_vs_b/
│       │   ├── course.json
│       │   ├── lessons-manifest.json
│       │   ├── assessment.json
│       │   └── lessons/
│       │       ├── Kusto-vs-SQL.md
│       │       ├── OLTP-vs-OLAP.md
│       │       └── ... (33 lessons)
│       ├── artificial_intelligence/
│       ├── architectural_patterns/
│       ├── data_and_analytics/
│       ├── design_principles/
│       ├── networking_security/
│       └── platform_knowledge/
├── src/
│   ├── pages/
│   │   ├── Dashboard.jsx
│   │   ├── LearningPage.jsx
│   │   ├── Assessment.jsx
│   │   ├── Trophies.jsx
│   │   ├── Signup.jsx
│   │   └── signin.jsx
│   ├── firebase.js
│   └── App.js
└── package.json

Step-by-Step Implementation Guide

Step 1: Project Setup

# Create React app
npx create-react-app layman-technotes-react
cd layman-technotes-react

# Install dependencies
npm install @mui/material @emotion/react @emotion/styled
npm install react-router-dom
npm install firebase
npm install react-markdown react-syntax-highlighter
npm install @mui/icons-material

Step 2: Firebase Configuration

Create src/firebase.js:

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore, doc, setDoc, getDoc } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

// Helper function to update user data
export const updateUserData = async (userId, data) => {
  const userRef = doc(db, "users", userId);
  await setDoc(userRef, data, { merge: true });
};

Step 3: Course Data Structure

Create public/courses/a_vs_b/lessons-manifest.json:

{
  "courseId": "a_vs_b",
  "courseTitle": "A vs B Comparisons",
  "flatStructure": true,
  "lessons": [
    {
      "lessonId": "lesson-001",
      "lessonTitle": "Kusto vs SQL",
      "duration": "5 min",
      "mdFiles": ["Kusto-vs-SQL.md"]
    },
    {
      "lessonId": "lesson-002",
      "lessonTitle": "OLTP vs OLAP",
      "duration": "7 min",
      "mdFiles": ["OLTP-vs-OLAP.md"]
    }
  ]
}

Create public/courses/a_vs_b/assessment.json:

{
  "courseId": "a_vs_b",
  "courseTitle": "A vs B Comparisons",
  "assessmentTitle": "Technical Concepts Interview",
  "passingScore": 70,
  "questions": [
    {
      "id": 1,
      "question": "Can you explain the key differences between OLTP and OLAP?",
      "hint": "Think about their primary purposes.",
      "sampleAnswer": "OLTP handles transactions...",
      "points": 10
    }
  ]
}

Step 4: Routing Setup

Update src/App.js:

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import LearningPage from './pages/LearningPage';
import Assessment from './pages/Assessment';
import Trophies from './pages/Trophies';
import Signup from './pages/Signup';
import Signin from './pages/signin';
import ProtectedRoute from './pages/ProtectedRoute';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/signup" element={<Signup />} />
        <Route path="/signin" element={<Signin />} />

        <Route path="/dashboard" element={
          <ProtectedRoute>
            <Dashboard />
          </ProtectedRoute>
        } />

        <Route path="/learning/course/:courseName" element={
          <ProtectedRoute>
            <LearningPage />
          </ProtectedRoute>
        } />

        <Route path="/assessment/:courseName" element={
          <ProtectedRoute>
            <Assessment />
          </ProtectedRoute>
        } />

        <Route path="/trophies" element={
          <ProtectedRoute>
            <Trophies />
          </ProtectedRoute>
        } />

        <Route path="/" element={<Navigate to="/signup" replace />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Step 5: Learning Page with Markdown Rendering

Key snippet from src/pages/LearningPage.jsx:

import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';

// Inside component
<ReactMarkdown
  components={{
    code({ node, inline, className, children, ...props }) {
      const match = /language-(\w+)/.exec(className || '');
      return !inline && match ? (
        <SyntaxHighlighter
          style={vscDarkPlus}
          language={match[1]}
          PreTag="div"
          {...props}
        >
          {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
      ) : (
        <code className={className} {...props}>
          {children}
        </code>
      );
    },
    h1: ({ children }) => (
      <Typography variant="h3" gutterBottom>
        {children}
      </Typography>
    ),
    p: ({ children }) => (
      <Typography variant="body1" paragraph>
        {children}
      </Typography>
    )
  }}
>
  {markdownContent}
</ReactMarkdown>

Step 6: Points System Implementation

// Award points on lesson completion
const handleFinish = async () => {
  if (auth.currentUser) {
    const userDocRef = doc(db, "users", auth.currentUser.uid);
    const userDocSnap = await getDoc(userDocRef);

    if (userDocSnap.exists()) {
      const userData = userDocSnap.data();
      const currentPoints = userData.totalPoints || 0;
      const updatedPoints = currentPoints + 100; // 100 points per lesson

      await updateUserData(auth.currentUser.uid, {
        totalPoints: updatedPoints
      });
    }
  }

  // Navigate to next lesson...
};

Step 7: Trophy System

// Generate 50 trophies (100-5000 points)
const generateTrophies = () => {
  const icons = ['🏆', '🥇', '🥈', '🥉', '⭐', '🌟', '💫', '✨', '🎖️', '🏅'];
  const trophies = [];

  for (let i = 1; i <= 50; i++) {
    const points = i * 100;
    trophies.push({
      id: i,
      title: `${points} Points`,
      pointsRequired: points,
      icon: icons[(i - 1) % icons.length]
    });
  }
  return trophies;
};

// Check if trophy is unlocked
const isUnlocked = totalPoints >= trophy.pointsRequired;

Step 8: Assessment Implementation

// Load assessment questions
useEffect(() => {
  const loadAssessment = async () => {
    const response = await fetch(`/courses/${courseName}/assessment.json`);
    const data = await response.json();
    setAssessment(data);
  };
  loadAssessment();
}, [courseName]);

// Navigate between questions
const handleNext = () => {
  if (currentQuestionIndex < assessment.questions.length - 1) {
    setCurrentQuestionIndex(currentQuestionIndex + 1);
    setShowHint(false);
    setShowAnswer(false);
  }
};

Data Models

User Document (Firestore)

{
  uid: "user123",
  email: "user@example.com",
  totalPoints: 2500,
  completedCourses: ["a_vs_b", "artificial_intelligence"],
  createdAt: Timestamp,
  lastLogin: Timestamp
}

Course Manifest

{
  courseId: "a_vs_b",
  courseTitle: "A vs B Comparisons",
  flatStructure: true,
  lessons: [
    {
      lessonId: "lesson-001",
      lessonTitle: "Kusto vs SQL",
      duration: "5 min",
      mdFiles: ["Kusto-vs-SQL.md"]
    }
  ]
}

Assessment Structure

{
  courseId: "a_vs_b",
  courseTitle: "A vs B Comparisons",
  assessmentTitle: "Technical Concepts Interview",
  passingScore: 70,
  questions: [
    {
      id: 1,
      question: "Question text?",
      hint: "Helpful hint",
      sampleAnswer: "Detailed answer",
      points: 10
    }
  ]
}

Contributing

This project demonstrates best practices in:

React component architecture
Firebase integration
Material-UI theming
Markdown content management
Gamification in education
Real-time data synchronization

Feel free to fork, extend, and customize for your own learning platform!

https://github.com/deepakkumpala/layman-technotes-reactapp