🚀 Saad Web Experiments - Portfolio

A comprehensive, interactive portfolio showcasing 165 web development projects with advanced features including search, filtering, bookmarks, analytics, and more.

muhammad-saad-amin.vercel.app

• Features
• Quick Start
• Project Structure
• Architecture
• Project Breakdown
• React Projects
• Keyboard Shortcuts
• Analytics
• Technology Stack
• Deployment
• Adding Projects
• Environment Variables
• Testing
• Troubleshooting
• License

• 🔍 Smart Search - Real-time fuzzy search across all projects with instant results
• 🏷️ Category Filters - Filter by HTML, CSS, JavaScript, Python, React
• 📱 Fully Responsive - Optimized for mobile, tablet, and desktop
• 🌙 Dark Mode - Seamless light/dark theme toggle with persistence
• 🎨 Syntax Highlighting - Beautiful code display powered by Prism.js

• ⌨️ Keyboard Shortcuts - Navigate efficiently with keyboard commands
• 🔖 Bookmarks System - Save and manage favorite projects (localStorage)
• 📊 Analytics Dashboard - Track views, searches, and usage patterns
• 💬 Toast Notifications - User-friendly feedback for all actions
• 📋 One-Click Copy - Copy code to clipboard instantly
• 📂 Multi-File Support - View multiple files per project with tabs
• 🎯 Live Preview - Interactive iframe previews for web projects
• ⚛️ React Projects - All React experiments fully bundled and live-previewed via iframe

• Node.js 18+ installed
• npm or yarn package manager

# Clone the repository
git clone https://github.com/SENODROOM/Responsive-Web-Design-Certification.git
cd Responsive-Web-Design-Certification/frontend

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

The backend provides API endpoints for persistent bookmarks and analytics. The frontend works fully without it using localStorage.

# Navigate to backend directory
cd backend

# Install dependencies
npm install

# Create environment file
cp .env.example .env

# Edit .env with your MongoDB URI
# MONGODB_URI=your_mongodb_connection_string

# Start backend server
npm run dev

Backend runs on http://localhost:5000

# From repo root — starts both frontend and backend concurrently
npm run dev:all

saad-web-experiments/
├── frontend/                    # Next.js Application
│   ├── app/
│   │   ├── page.tsx            # Main portfolio page
│   │   ├── layout.tsx          # Root layout
│   │   ├── globals.css         # Global styles
│   │   └── api/                # Next.js API routes (proxy to backend)
│   │       ├── analytics/
│   │       └── bookmarks/
│   ├── public/
│   │   ├── projects.js         # 165 projects data registry
│   │   ├── Home.css            # Portfolio styles
│   │   ├── HTML/               # 22 HTML projects
│   │   ├── CSS/                # 35+ CSS projects
│   │   ├── Javascript/         # 60+ JavaScript projects
│   │   ├── React/              # 13 React projects (pre-built, iframe-ready)
│   │   ├── Python/             # 32+ Python projects
│   │   └── Images/             # Assets
│   ├── src/
│   │   ├── components/         # Reusable UI components
│   │   ├── lib/                # Frontend utilities (analytics, storage, search)
│   │   ├── models/             # TypeScript types for API responses
│   │   └── types/              # Shared TypeScript interfaces
│   └── package.json
├── backend/                     # Express.js API (Optional)
│   ├── src/
│   │   ├── config/env.js       # Environment loader
│   │   ├── lib/mongodb.js      # MongoDB connection (single source of truth)
│   │   ├── models/             # Mongoose models
│   │   │   ├── Analytics.js
│   │   │   └── Bookmark.js
│   │   ├── routes/             # Express route handlers
│   │   │   ├── analytics.js
│   │   │   └── bookmarks.js
│   │   └── server.js           # Entry point
│   ├── .env.example            # Environment template (never commit .env)
│   └── package.json
├── docs/                        # Documentation
├── tests/                       # Root-level JS/TS tests (Vitest)
│   ├── setup.js
│   ├── utils.test.js
│   ├── fuzzySearch.test.js
│   ├── storage.test.js
│   └── analytics.test.js
├── scripts/                     # Dev utilities
│   ├── generate-projects.js
│   └── verify-setup.js
├── README.md
├── LICENSE
└── package.json                 # Root npm workspace

The project is a monorepo with two independent packages managed via npm workspaces.

The frontend is the only required component. It is a self-contained Next.js 15 app deployed to Vercel. All core features — search, bookmarks, analytics, dark mode — work client-side via localStorage. No backend required for the live demo.

MongoDB logic lives exclusively in backend/src/lib/mongodb.js. The file frontend/src/lib/mongodb.ts exists only as a thin TypeScript type/client adapter for Next.js API routes that optionally proxy to the backend — it does not run its own database connection. If you do not use the backend, those API routes are simply unused.

The backend is an optional Express.js server that persists bookmarks and analytics to MongoDB Atlas. It is a separate deployable unit (Railway, Render, or Heroku recommended). The frontend detects whether NEXT_PUBLIC_API_URL is set and falls back to localStorage if the backend is unavailable.

Browser
  └── Next.js Frontend (Vercel)
        ├── localStorage  ← bookmarks & analytics (default, always works)
        └── NEXT_PUBLIC_API_URL (optional)
              └── Express Backend
                    └── MongoDB Atlas

frontend/src/models/Analytics.ts and frontend/src/models/Bookmark.ts are TypeScript interface files — they define the shape of API responses. They contain no Mongoose imports and run no database logic. They exist so the Next.js API route handlers are fully typed.

All 13 React experiments are fully functional and live-previewable directly in the portfolio. They are served as pre-built static HTML files from frontend/public/React/, so no separate bundler or dev server is needed to view them.

Each project's source (.jsx, .html, .css) is viewable with syntax highlighting in the portfolio's code panel, and the live preview loads instantly in the iframe.

Track your portfolio usage with the built-in analytics dashboard.

Method 1: Keyboard Shortcut (Recommended)

Press: Ctrl+Shift+A

Method 2: Browser Console

1. Press F12 to open Developer Tools
2. Click "Console" tab
3. Type: showAnalytics()
4. Press Enter

Method 3: Raw Data (JSON)

1. Open Console (F12)
2. Type: getAnalytics()
3. Press Enter

• 📈 Project Views — Which projects you opened and how many times
• 🔍 Search Queries — What you searched for with timestamps
• 🏷️ Filter Usage — Which categories you filtered
• ⭐ Bookmarks — Your saved favourite projects

• ✅ All data stored locally in browser (localStorage)
• ✅ No data sent to external servers unless backend is configured
• ✅ Private to your browser only
• ✅ Clear browser data to reset analytics

The live site is deployed at muhammad-saad-amin.vercel.app.

To deploy your own fork:

1. Install Vercel CLI

   npm install -g vercel

2. Deploy

   vercel

3. Configure Build Settings

   • Build Command: cd frontend && npm run build
   • Output Directory: frontend/.next
   • Install Command: cd frontend && npm install

4. Set Environment Variables (only if using backend)

   • NEXT_PUBLIC_API_URL — Your backend URL

Deploy backend separately to:

• Railway (Recommended for MongoDB apps)
• Render (Free tier available)
• Vercel (Serverless Functions)
• Heroku (With MongoDB Atlas)

Set these environment variables on your backend host:

MONGODB_URI=mongodb+srv://...
PORT=5000
NODE_ENV=production

# Run all tests
npm run test

# Run with coverage report
npm run test:coverage

# Watch mode
npm run test:ui

Python tests live in frontend/public/Python/tests/ and can be run with:

cd frontend/public/Python
python -m pytest tests/

Edit frontend/public/projects.js and add your project:

{
    category: "JavaScript",
    title: "My Awesome Project",
    iframeSrc: "Javascript/My Awesome Project/index.html",
    description: "A brief description of what this project does",
    codeFiles: [
        {
            name: "index.html",
            src: "Javascript/My Awesome Project/index.html",
            lang: "html"
        },
        {
            name: "script.js",
            src: "Javascript/My Awesome Project/script.js",
            lang: "javascript"
        },
        {
            name: "styles.css",
            src: "Javascript/My Awesome Project/styles.css",
            lang: "css"
        }
    ]
}

# Backend API URL (optional — omit to use localStorage only)
NEXT_PUBLIC_API_URL=http://localhost:5000

# Server Configuration
PORT=5000
NODE_ENV=development

# MongoDB Connection
MONGODB_URI=mongodb+srv://username:[email protected]/database

# CORS (optional)
CORS_ORIGIN=http://localhost:3000

⚠️ Never commit .env files. Use .env.example as a template and keep real credentials out of version control.

Projects not loading?

# Check if projects.js exists
ls frontend/public/projects.js

# Restart dev server
cd frontend && npm run dev

Build errors?

# Clear Next.js cache
cd frontend && rm -rf .next && npm run build

MongoDB connection failed?

• Verify MONGODB_URI in backend/.env
• Ensure your IP is whitelisted in MongoDB Atlas
• Always run the backend from its own directory: cd backend && npm run dev

Port already in use?

npx kill-port 5000
# or
PORT=5001 npm run dev

Double scrollbar? — Clear browser cache and reload.

Dark mode not persisting? — Ensure localStorage is enabled in your browser.

Analytics not showing? — Press Ctrl+Shift+A or type showAnalytics() in the console.

• Backend API Documentation
• Architecture Documentation
• API Reference
• Deployment Guide

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is licensed under the MIT License — see the LICENSE file for details.

Muhammad Saad Amin
Software Engineer | Web Developer

• 🌐 Portfolio: muhammad-saad-amin.vercel.app
• 🐙 GitHub: @SENODROOM

• freeCodeCamp — For the amazing curriculum
• Next.js — The React framework
• Prism.js — Syntax highlighting
• Vercel — Deployment platform

• Total Projects: 165
• Lines of Code: 50,000+
• Technologies: 5+ languages
• Features: 15+ advanced features
• Status: ✅ Production Ready — Live at muhammad-saad-amin.vercel.app