Skip to content

u-wz/helm

BranchesTags

Repository files navigation

Helm Logo

The North Star for Egyptian Computer Science Students

A free, open-source, beautifully designed guide for navigating the CS journey.

🧭 Why Helm?

Computer Science is a vast ocean with no clear navigation system. Helm is the dashboard every Egyptian CS student needs to stay on course. We've built it from the ground up with structure, clarity, and bold neo-brutalist design.

What Helm is:

  • ✅ A free, open-source reference site for Egyptian CS students
  • ✅ Curated learning roadmaps for different tracks
  • ✅ Gold-standard courses from top platforms (Harvard, Stanford, etc.)
  • ✅ Career guidance specifically for the Egyptian market
  • ✅ Essential developer tools and free student benefits
  • ✅ CV & project templates for real-world use

What Helm is NOT:

  • ❌ Another random list of links
  • ❌ A course provider or job board
  • ❌ For-profit service

✨ Features

🗺️ Learning Roadmaps

Eight comprehensive, phased roadmaps to guide your learning journey:

Track Description Estimated Time
Frontend React, TypeScript, Next.js, modern web development 6–12 months
AI/ML Machine learning, deep learning, Python, frameworks 8–18 months
Cybersecurity Security fundamentals, ethical hacking, penetration testing 6–12 months
Mobile Flutter, cross-platform development 6–10 months
Cloud/DevOps AWS, Docker, Kubernetes, CI/CD 6–12 months
Data Engineering SQL, Python, data pipelines, big data 8–14 months
CS Fundamentals Algorithms, data structures, system design Ongoing
Math Linear algebra, calculus, statistics for ML 4–8 months

Each track includes:

  • ✅ Phased learning steps with estimated days per step
  • ✅ Resource links (courses, tutorials, documentation)
  • ✅ Build projects to complete each phase
  • ✅ Egyptian market context and FAQs
  • ✅ Progress tracking (saved locally in browser)

📚 Gold-Standard Courses

70+ curated courses from top platforms:

Platforms:

  • Harvard/edX (CS50x)
  • Coursera (Andrew Ng, Stanford, etc.)
  • YouTube (best channels)
  • FreeCodeCamp
  • Official documentation

Course Features:

  • ✅ Star ratings (curated by Egyptian CS students)
  • ✅ Filter by track, level, format, language
  • ✅ Certificate availability
  • ✅ Arabic content support
  • ✅ Financial aid helper (Coursera/edX)

Free vs Paid:

  • Free: Complete course with certificate
  • Audit Free: Full access, certificate costs money (use financial aid)
  • Paid: Paid courses with financial aid available

💼 Career OS for Egypt

Everything you need to launch your career:

Hiring Process Guide

Step-by-step breakdown of Egyptian hiring from internship to offer:

  1. Build Skills & Portfolio (CV, GitHub, LinkedIn)
  2. Apply (LinkedIn, Wuzzuf, referrals)
  3. Screening Call (HR checks English, fit)
  4. Technical Assessment (LeetCode, take-home)
  5. Technical Interview (2+ rounds)
  6. HR/Culture Fit (behavioral questions)
  7. Offer (negotiation, benefits)

Egyptian Tech Companies

Active hiring companies by type:

  • Egyptian Startups: Instabug, Paymob, Halan, Vezeeta, Breadfast, etc.
  • Egyptian Corporates: Vodafone, Etisalat, Telecom Egypt, etc.
  • Multinationals: Microsoft, IBM, Google, Amazon, etc.

Filters by: Company size, tech stack, domain, internship/remote availability

Job Boards

  • Local: Wuzzuf, LinkedIn Egypt
  • Remote: We Work Remotely, Remote.co, Wellfound
  • Global: LinkedIn, AngelList (Wellfound)

Remote Work Guide

  • Why remote work is 3–5x better income (USD vs EGP)
  • Realistic salary expectations (Junior: $800–$2,000 / Mid: $2,000–$5,000)
  • Payment methods (Payoneer, Wise, direct transfer)
  • How to stand out to remote employers

Internship Guide

  • Where to find internships
  • Cold email template (proven strategy)
  • Salary expectations (3,000–15,000 EGP/month)
  • Timeline (January–April for summer)

🛠️ Toolbox

Essential developer tools with free student plans:

Categories:

  • Student Pack (GitHub Student Developer Pack, GitHub Copilot, JetBrains)
  • Code Editors (VS Code, JetBrains)
  • Cloud & Hosting (Railway, Render, Fly.io)
  • Design Tools (Figma, Canva)
  • AI & Developer Tools (GitHub Copilot, Cursor, Claude)
  • VPN & Internet (ProtonVPN, Mullvad)
  • Payment Tools (Fawry, Orange Money integration)
  • Database (Supabase, MongoDB Atlas, PostgreSQL)
  • Testing (Jest, Playwright, Selenium)
  • Learning Platforms (Khan Academy, freeCodeCamp)

Student Benefits:

  • GitHub Student Developer Pack ($200,000+ value)
  • JetBrains full IDE suite for free
  • GitHub Copilot for free
  • AWS Educate credits
  • DigitalOcean and Vercel free tiers

📄 Portfolio & CV

Everything to get noticed by recruiters:

CV Guide

Section-by-section breakdown:

  1. Contact & Links (GitHub, LinkedIn, portfolio)
  2. Summary/Objective (2–3 lines, specific)
  3. Education (GPA if >3.5/4)
  4. Skills (categorized: languages, frameworks, tools, databases)
  5. Projects (MOST IMPORTANT - see below)
  6. Experience/Internships
  7. Certifications (Google, AWS, Meta, Harvard)

Egyptian Hiring Tips:

  • GitHub link > GPA for most companies
  • 1 page max (less than 3 years experience)
  • Projects with GitHub + live demo
  • English CV (even for local companies)

CV Templates

  • Jake's Resume (GitHub - most popular)
  • Overleaf Templates (LaTeX, ATS-friendly)
  • Canva Templates (drag-and-drop)

Graduation Project Guide

  • Difference between forgettable vs impressive projects
  • How to pick a topic (3 questions)
  • How to put project on GitHub properly
  • Landing real projects on your CV

Project Ideas

100+ project ideas with:

  • Difficulty levels (beginner/intermediate/advanced)
  • Target markets (local/remote/both)
  • Tech stack filtering
  • Why projects impress employers
  • Key features & estimated time

🚀 Tech Stack

Core

  • Next.js 16 (App Router) - React framework with server components
  • React 19 - UI library
  • TypeScript - Type safety

Styling

  • Tailwind CSS v4 - Utility-first CSS
  • Custom CSS - Design tokens and animations

Animation

  • Framer Motion - Smooth animations and transitions

UI Components

  • Radix UI - Accessible primitives (@radix-ui/react-dialog)
  • Lucide React - Icon library
  • React Icons - Additional icons
  • clsx + tailwind-merge - Class name utilities

Utilities

  • XSS - Input sanitization (security)
  • Validator - Input validation
  • Resend - Email API (feedback form)

Analytics

  • @vercel/analytics - Web analytics
  • @vercel/speed-insights - Core Web Vitals insights

Development

  • pnpm - Package manager (recommended)
  • npm/yarn - Alternative package managers

🛠️ Getting Started

Prerequisites

  • Node.js: 18.x or later
  • Package Manager: pnpm (recommended), npm, or yarn

Installation

# Clone the repository
git clone https://github.com/u-wz/helm.git

# Navigate to the directory
cd helm

# Install dependencies
pnpm install

# Or with npm:
npm install

# Or with yarn:
yarn install

Design & Code

Everything is documented:

  • CONTRIBUTING.md — How to add content, code style, and contribute
  • specs.md — Deep technical documentation of all features

Running the Project

# Development server (localhost:3000)
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

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

Environment Variables

Resend API, you dont really need to do anything about this.

📁 Project Structure

egyptian-cs-guide/
├── app/                          # Next.js app directory
│   ├── page.tsx                  # Home page (hero, quick stats, year filter, site overview, FAQ, reviews)
│   ├── layout.tsx                # Root layout (metadata, providers, navbar, footer)
│   ├── globals.css               # Global styles, design tokens, animations
│   ├── careers/
│   │   └── page.tsx              # Careers page (hiring process, companies, job boards, remote guide, internships, FAQ)
│   ├── courses/
│   │   └── page.tsx              # Courses page (search, filters, course cards, financial aid helper, FAQ)
│   ├── cv-projects/
│   │   └── page.tsx              # CV & projects page (CV guide, templates, graduation project guide, project ideas, FAQ)
│   ├── roadmaps/
│   │   └── page.tsx              # Roadmaps page (track selector, phase accordions, progress tracking, FAQs)
│   └── tools/
│       └── page.tsx              # Tools page (category filters, tool cards, ITI highlight, VS Code extensions, FAQ)
├── components/
│   ├── home/                     # Home page components
│   │   ├── Hero.tsx              # Hero section with CTAs
│   │   ├── QuickStats.tsx        # Statistics (courses, tools, reviews, etc.)
│   │   ├── YearFilter.tsx        # Filter reviews by year
│   │   ├── SiteOverview.tsx      # Overview of all sections
│   │   └── Reviewssection.tsx    # Student reviews carousel
│   ├── feedback/                 # Feedback system
│   │   ├── FeedbackForm.tsx      # Inline feedback form
│   │   └── FeedbackModal.tsx     # Modal feedback form
│   ├── layout/                   # Layout components
│   │   ├── Navbar.tsx            # Navigation bar
│   │   ├── Footer.tsx            # Footer with links and social
│   │   └── ThemeProvider.tsx     # Dark/light theme provider
│   ├── ui/                       # Reusable UI components
│   │   ├── NeoCard.tsx           # Neo-brutalist card
│   │   ├── NeoButton.tsx         # Neo-brutalist button
│   │   ├── NeoInput.tsx          # Neo-brutalist input
│   │   ├── NeoAccordion.tsx      # Neo-brutalist accordion
│   │   ├── NeoBadge.tsx          # Neo-brutalist badge
│   │   ├── NeoDialog.tsx         # Neo-brutalist dialog
│   │   ├── NeoToast.tsx          # Neo-brutalist toast notifications
│   │   ├── NeoStar.tsx           # Neo-brutalist decorative stars
│   │   ├── ProgressBar.tsx       # Progress bar component
│   │   └── SplitText.tsx         # Split text animation
│   └── home/
│       └── FeelingLostModal.tsx  # Modal for users feeling lost
├── data/                         # Data files
│   ├── courses.ts                # 200+ courses (1643 lines)
│   ├── tools.ts                  # 100+ tools (2055 lines)
│   ├── roadmaps.ts               # 8 roadmaps (1539 lines)
│   ├── projects.ts               # 100+ project ideas (364 lines)
│   ├── companies.ts              # 30+ Egyptian tech companies
│   ├── jobBoards.ts              # Job board listings
│   ├── faqs.ts                   # FAQ items (209 lines)
│   └── reviews.ts                # Student reviews (5 reviews)
├── hooks/                        # Custom React hooks
│   ├── useProgress.ts            # Progress tracking (roadmaps)
│   ├── useCopyLink.ts            # Copy to clipboard utility
│   ├── useScrollReveal.ts        # Scroll reveal animations
│   └── useLocalStorage.ts        # Local storage utility
├── lib/                          # Utility libraries
│   ├── utils.ts                  # Helper functions (cn utility)
│   └── constants.ts              # App constants (badges, page accents, etc.)
├── public/                       # Static assets
│   └── reviews/                  # Reviewer photos
├── specs.md                      # Detailed project specifications
├── CONTRIBUTING.md               # Contribution guidelines
├── README.md                     # This file
├── package.json                  # Dependencies and scripts
├── tailwind.config.ts            # Tailwind CSS configuration
├── tsconfig.json                 # TypeScript configuration
└── next.config.ts                # Next.js configuration

🤝 Contributing

We welcome all types of contributions! Here's how you can help:

🌟 Types of Contributions

High Impact (Priority):

  1. Add new courses to data/courses.ts
  2. Add new tools to data/tools.ts
  3. Add new projects to data/projects.ts
  4. Add new reviews to data/reviews.ts
  5. Fix bugs in existing pages/components

Medium Impact:

  1. Improve content quality and accuracy
  2. Add new FAQs to data/faqs.ts
  3. Add more Egyptian companies to data/companies.ts
  4. Add more job boards to data/jobBoards.ts
  5. Improve accessibility and SEO
  6. Adding Arabic Support

Low Impact:

  1. Fix typos and improve clarity
  2. Improve documentation
  3. Small UI tweaks and polish

🎨 Design & Code

Everything is documented:

🔍 Code Review Checklist

Before submitting a PR, make sure:

  • Code follows NeoBrutalist design system
  • TypeScript types are correct
  • Dark mode is properly styled
  • All links work and open in new tab (target="_blank" rel="noopener noreferrer")
  • No console errors in browser
  • Responsive design works on mobile, tablet, desktop
  • Accessibility: keyboard navigation, ARIA labels where needed
  • Content is accurate and up-to-date
  • Consistent with existing code style
  • Added appropriate comments for complex logic

📤 Opening a Pull Request

  1. Fork the repository

    • Click "Fork" on GitHub repository page

  2. Create a branch

    git checkout -b feature/add-courses

  3. Make your changes

    • Edit files in the appropriate directories
    • Test your changes locally

  4. Commit your changes

    git add .
git commit -m "feat: add 5 new Python courses to courses.ts"

  5. Push to your fork

    git push origin feature/add-courses

  6. Open a Pull Request

    • Go to your fork on GitHub
    • Click "New Pull Request"
    • Select your branch
    • Fill in the PR description with:
      • What you changed
      • Why you changed it
      • Any relevant context

  7. PR Description Template

    ## What this PR does
[Brief description of changes]

## What I verified
- [ ] All links work
- [ ] TypeScript compiles without errors
- [ ] Dark mode styling is correct
- [ ] Content is accurate

## Changes made
- Added [X] new courses to courses.ts
- Updated [Y] section in [page name]

## Screenshots (if UI changes)
[Optional: Add before/after screenshots]

🤔 What We Need Most Right Now

High Priority:

  1. 📚 More courses (especially Arabic and beginner-level)
  2. 🛠️ More tools (AI coding assistants, databases, payment solutions)
  3. 💼 More Egyptian companies (actively hiring)
  4. 📄 More project ideas (different stacks, difficulty levels)

Medium Priority:

  1. 📖 More detailed FAQs (by track, by company)
  2. 🗺️ More roadmaps (DevOps, Blockchain, AR/VR)
  3. 💼 More remote job boards and resources
  4. 🎓 More internship opportunities

Content Quality:

  1. ✅ Verify and update existing course ratings
  2. ✅ Add more student reviews
  3. ✅ Improve project descriptions and examples
  4. ✅ Add case studies from successful Egyptian developers

📞 Getting Help

  • GitHub Issues: Open an issue for bugs, questions, or suggestions
  • Discussions: Start a discussion for general questions
  • Read specs.md: Detailed technical specifications
  • Read this file: README for overall project understanding

📄 License

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

🙏 Acknowledgments

  • Egyptian CS Community: For feedback, suggestions, and continuous improvement
  • Next.js & Vercel: For the amazing framework and platform
  • Radix UI: For accessible component primitives
  • Framer Motion: For smooth animations
  • Space Grotesk & Inter: For beautiful typography
  • All Contributors: Who have helped build this project

🌐 Links

Built for Egyptian CS students. Made with ❤️

Contribute to make it better: github.com/u-wz/helm

About

hellm.vercel.app

Resources

Readme

License

MIT license

Contributing

Contributing
Activity

Stars

3 stars

Watchers

0 watching

Forks

2 forks
Report repository

Contributors

Languages