System Logic | 100 Days of Web Dev

Architecture Overview

The 100 Days of Web Development platform is built on a modular, component-based architecture using vanilla JavaScript, ensuring maximum performance and minimal dependencies.

           Design Philosophy
          
              Zero Dependencies: Pure vanilla JS, no frameworks
              required
            
              Progressive Enhancement: Core functionality works
              without JavaScript
            
              Modular Architecture: Reusable components and
              utilities
            
              Performance First: Optimized for speed and
              efficiency

Application Flow

1

Entry Point

User lands on dashboard.html or projects.html. HTML loads with critical CSS inline.

2

Component Initialization

Navigation, theme system, and cursor effects initialize from modular scripts.

3

Data Loading

Project metadata loads asynchronously, populating the grid with filters and search.

4

Interactive Features

User interactions trigger events: filtering, searching, theme toggling, navigation.

5

Project Navigation

Clicking a project validates its existence via fetch, then navigates or shows 404.

Core Components

Navigation System

Handles routing, mobile menu, user dropdown, and scroll effects.

navigation.js
Active state management
Responsive breakpoints

Theme Engine

Dark/light mode with CSS custom properties and localStorage persistence.

Toggle mechanism
Preference storage
Real-time updates

Project Manager

Loads, filters, and renders all 100+ projects dynamically.

projects.js
Real-time search
Category filtering

Cursor Effects

Custom cursor with glow effects and interactive feedback.

cursor.js
Cosmic trail effect
Element interaction

Progress Tracker

Heatmap visualization showing daily coding activity.

Contribution graph
Streak tracking
Achievement system

Auth Interface

Static login/signup UI for demonstration (no backend).

login.js
Password visibility
Form validation

Data Flow & State Management

Project Data Structure

            // Example project metadata
            const projects = [ { day:
            1, title:
            "Animated Login Form",
            description:
            "Beautiful login interface with smooth animations", difficulty: "Beginner",
            technologies: ["HTML",
            "CSS",
            "JavaScript"], path:
            "/public/Day 01/", features:
            ["Responsive",
            "Animated"] },
            // ... 99 more projects
            ];
          

Projects are stored as JSON objects and filtered/searched in real-time using vanilla JavaScript array methods.

Theme Persistence

            // Theme toggle implementation
            function toggleTheme() {
            const currentTheme =
            document.documentElement.getAttribute('data-theme'); const newTheme = currentTheme ===
            'dark' ?
            'light' :
            'dark';
            document.documentElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); updateThemeIcon(newTheme); }

            // Load saved theme on page load
            const savedTheme =
            localStorage.getItem('theme') ||
            'dark';
            document.documentElement.setAttribute('data-theme', savedTheme);
          

User preferences are stored in localStorage and applied immediately on page load.

Session Management

            // Simulated authentication check
            function checkAuth() {
            const isLoggedIn =
            localStorage.getItem('isAuthenticated') === 'true';

            if (!isLoggedIn && !isPublicPage()) {
            window.location.href =
            'login.html'; }

            return isLoggedIn; }

            function handleLogout() {
            localStorage.removeItem('isAuthenticated'); localStorage.removeItem('userData'); window.location.href =
            'login.html'; }
          

Note: This is a demonstration UI only. Real authentication would require a backend server.

Performance Optimizations

Lazy Loading

Images and components load on-demand to reduce initial page weight.

CSS Optimization

Critical CSS inline, custom properties for theming, minimal repaints.

DOM Caching

Element references cached to avoid repeated querySelector calls.

Debounced Search

Search input debounced to prevent excessive filtering operations.

LocalStorage Cache

User preferences and session data persisted locally.

Event Delegation

Single listeners on parent elements instead of multiple per child.

⚙️ System Architecture & Logic