---
import GridItem from '../components/GridItem.astro';
import SimplePageHeader from '../components/SimplePageHeader.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import { RoadmapCard } from '../components/GetStarted/RoadmapCard';
import { getRoadmapsByTag } from '../lib/roadmap';
import { RoadmapMultiCard } from '../components/GetStarted/RoadmapMultiCard';
import { RoleRoadmaps } from '../components/GetStarted/RoleRoadmaps';
import {
  Blocks,
  Code,
  ExternalLink,
  Globe2,
  GraduationCap,
  MousePointerSquare,
  ServerCog,
  ServerCogIcon,
  ArrowRight,
  Server,
  Cloud,
  Smartphone,
  Bot,
  MessageCircleCode,
  Shield,
  ShieldHalf,
  Workflow,
  Gamepad2,
  PenSquare,
  Component,
  Waypoints,
  CheckSquare, Braces, FolderKanban, Coins, Megaphone, GitBranch,
} from 'lucide-react';
import { SectionBadge } from '../components/GetStarted/SectionBadge';
import { TipItem } from '../components/GetStarted/TipItem';
---

<BaseLayout
  title='Developer Roadmaps'
  description={'Step by step guides and paths to learn different tools or technologies'}
  permalink={'/roadmaps'}
>
  <div class='bg-gradient-to-b from-gray-200 to-white py-4 sm:py-8 md:py-12'>
    <div class='container'>
      <div class='text-left'>
        <SectionBadge title='Beginner Roadmaps' />
      </div>
      <div class='my-3 text-left md:my-5'>
        <h2 class='mb-0 text-xl font-semibold sm:mb-1 sm:text-3xl'>
          Are you an Absolute beginner?
        </h2>
        <p class='text-sm text-gray-500 sm:text-base'>
          Here are some beginner friendly roadmaps you should start with.
        </p>
      </div>

      <div class='grid gap-3 sm:grid-cols-2 md:grid-cols-3'>
        <RoadmapCard
          icon={Globe2}
          title='Frontend Developer'
          link='/frontend?r=frontend-beginner'
          description='Develop the part of web apps that users interact with i.e. things rendered in the browser.'
        />
        <RoadmapCard
          icon={ServerCog}
          title='Backend Developer'
          link='/backend?r=backend-beginner'
          description='Develop the part hidden from the user e.g. things like APIs, databases, search engines etc.'
        />

        <RoadmapCard
          icon={Globe2}
          icon2={ServerCog}
          title='Full Stack Developer'
          link='/full-stack'
          description='Develop both the frontend and backend side of the web apps i.e. the whole development stack.'
        />
      </div>

      <p class='my-4 text-sm sm:my-7 sm:text-base'>
        There is also a <a
          target='_blank'
          class='font-medium underline underline-offset-2'
          href='/devops?r=devops-beginner'>beginner DevOps roadmap</a
        > which requires you to have some backend knowledge and entails a lot of
        operations work i.e. deploying, scaling, monitoring, and maintaining applications.
      </p>

      <div class='rounded-xl border bg-white p-3 sm:p-4'>
        <h2 class='mb-0 text-lg font-semibold sm:mb-1 sm:text-xl'>
          Tips for Beginners
        </h2>
        <p class='text-sm sm:text-base'>
          Learning to code can be overwhelming, here are some tips to help you
          get started:
        </p>

        <div class='mt-3 flex flex-col gap-1'>
          <TipItem
            title='Avoid Tutorial Hell'
            description="Don't get stuck in tutorial hell. It's easy to get caught up in tutorials and never actually build anything. Tutorials are great for learning, but the best way to learn is by doing. An example of this is to watch a project-based tutorial, code along with the instructor. After finishing the tutorial, try to build the same project from scratch without the tutorial (if you can't, it's okay to go back to the tutorial). Repeat this process until you can build the project without the tutorial. After that, try to add new features to the project or build something similar from scratch."
            client:load
          />

          <TipItem
            title='Consistent study habits'
            description="Commit to regular, consistent study sessions. It's better to study for 30 minutes every day than to cram for 10 hours once a week."
            client:load
          />

          <TipItem
            title='Set a clear goal'
            description='Establish a clear, significant goal that motivates you. It could be building a company, an app, a website, or anything that personally resonates with you.'
            client:load
          />

          <TipItem
            title='Embrace the marathon mindset'
            description="You will feel lost in the beginning. Avoid comparing yourself to others; everyone progresses at their own pace. Understand that challenges are part of the journey, and it's okay to take your time."
            client:load
          />

          <TipItem
            title='Build projects'
            description="The best way to learn is by doing. Start building projects as soon as possible. It's okay if they're simple at first; the goal is to learn and improve. Build upon code-alongs and tutorials to create your projects and learn through hands-on experience"
            client:load
          />
          <TipItem
            title='Learn to get unstuck'
            description="Once you start learning to code, you're going to run into problems that you don't know how to solve. This is normal and part of the process. You don't really learn unless you struggle through it. That said, you won't always be able to move forward without some help. So how do you find that help? First off, forget books. They aren't a great place to start here, because the number and types of errors they can cover is so small. Online is the easiest place to find help. Most devs look for solutions on StackOverflow or just google the error message (if they have one). Other solutions are to find newsgroups or forums dedicated to the language you're using."
            client:load
          />

          <TipItem
            title='Join a community'
            description="Join a community of learners, such as a local coding group, a Discord server, or a subreddit. It's a great way to get help, share your progress, and learn from others."
            client:load
          />
        </div>
      </div>
    </div>
  </div>

  <RoleRoadmaps
    badge='Self-taught Developer'
    title='Are you a self-taught developer?'
    description='How about taking a peek at the Computer Science roadmap aimed at self-taught developers?'
  >
    <RoadmapCard
      icon={GraduationCap}
      title='Computer Science'
      link='/computer-science'
      description='Learn the fundamental concepts of computer science and programming.'
    />
    <RoadmapCard
      icon={Blocks}
      title='Data Structures'
      link='/datastructures-and-algorithms'
      description='Learn all about data structures and algorithms.'
    />

    <RoadmapMultiCard
      roadmaps={[{ title: 'System Design', link: '/system-design' }]}
      description='Learn how to design large scale systems and prepare for system design interviews.'
      secondaryRoadmaps={[
        {
          title: 'Design and Architecture',
          link: '/software-design-architecture',
        },
      ]}
      secondaryDescription='Or learn how to design and architect software systems.'
    />
  </RoleRoadmaps>

  <RoleRoadmaps
    badge='Frontend Developer'
    title='Are you a Frontend Developer?'
    description='How about skimming through the frontend or JavaScript roadmaps to see if there is anything you missed? TypeScript is all the rage these days, maybe it is time to learn it?'
  >
    <RoadmapCard
      icon={Globe2}
      title='Frontend'
      link='/frontend'
      description='Learn all you need to know to become a frontend developer.'
    />

    <RoadmapMultiCard
      roadmaps={[
        { title: 'JavaScript', link: '/javascript' },
        { title: 'TypeScript', link: '/typescript' },
      ]}
      description='How about mastering the language of the web: JavaScript? or maybe TypeScript?'
      secondaryRoadmaps={[
        {
          title: 'Frontend Performance',
          link: '/best-practices/frontend-performance',
        },
      ]}
      secondaryDescription='Or learn how to improve the performance of your web apps?'
    />
    <RoadmapMultiCard
      roadmaps={[
        { title: 'React', link: '/react' },
        { title: 'Vue', link: '/vue' },
        { title: 'Angular', link: '/angular' },
      ]}
      description='Or learn a framework?'
      secondaryRoadmaps={[{ title: 'Design Systems', link: '/design-system' }]}
      secondaryDescription='or learn about design systems?'
    />
  </RoleRoadmaps>

  <RoleRoadmaps
    badge='Backend Developer'
    title='Are you a Backend Developer?'
    description='Explore the general backend roadmap or dive into a specific technology like Node.js, Python, Java etc'
  >
    <div class='flex flex-col gap-3'>
      <RoadmapCard
        icon={ServerCog}
        title='Backend'
        link='/backend'
        description='Learn all you need to know to become a backend developer.'
      />

      <RoadmapCard
          icon={Braces}
          title='API Design'
          link='/api-design'
          description='Learn all you need to know to design robust APIs.'
      />
    </div>

    <RoadmapMultiCard
      roadmaps={[
        { title: 'Node.js', link: '/nodejs' },
        { title: 'Rust', link: '/rust' },
        { title: 'Go', link: '/golang' },
        { title: 'Python', link: '/python' },
        { title: 'Java', link: '/java' },
        { title: 'ASP.NET Core', link: '/aspnet-core' },
        { title: 'C++', link: '/cpp' },
      ]}
      description='Or learn a specific technology?'
    />

    <RoadmapMultiCard
      roadmaps={[
        { title: 'System Design', link: '/system-design' },
        {
          title: 'Design and Architecture',
          link: '/software-design-architecture',
        },
      ]}
      description='How about improving your System Design skills?'
      secondaryRoadmaps={[
        { title: 'SQL', link: '/sql' },
        { title: 'PostgreSQL', link: '/postgresql-dba' },
        { title: 'MongoDB', link: '/mongodb' },
      ]}
      secondaryDescription='Or perhaps improve your database skills?'
    />
  </RoleRoadmaps>

  <RoleRoadmaps
    badge='DevOps Engineer'
    title='DevOps or a Wanna-be DevOps Engineer?'
    description='Explore the general DevOps roadmap or dive into a specific technology like Docker, Kubernetes etc'
  >
    <RoadmapCard
      icon={Server}
      title='DevOps'
      link='/devops'
      description='Learn all you need to know to become a DevOps Engineer.'
    />

    <RoadmapCard
      icon={Cloud}
      title='AWS'
      link='/aws'
      description='Learn all you need to know to become an AWS Engineer.'
    />

    <RoadmapMultiCard
      roadmaps={[
        { title: 'Docker', link: '/docker' },
        { title: 'Kubernetes', link: '/kubernetes' },
        { title: 'Linux', link: '/linux' },
        { title: 'Terraform', link: '/terraform' },
      ]}
      description='or perhaps you want to learn Docker, Kubernetes, Terraform or Linux?'
      secondaryRoadmaps={[
        { title: 'Python', link: '/python' },
        { title: 'Go', link: '/golang' },
        { title: 'Rust', link: '/rust' },
      ]}
      secondaryDescription='Or maybe improve your automation skills?'
    />
  </RoleRoadmaps>

  <RoleRoadmaps
    badge='Mobile Developer'
    title='Are you a Mobile Developer?'
    description='How about beefing up your mobile development skills?'
  >
    <RoadmapCard
      icon={Smartphone}
      title='Android'
      link='/android'
      description='Learn all you need to know to become an Android Developer.'
    />

    <RoadmapCard
      icon={Smartphone}
      title='iOS'
      link='/ios'
      description='Learn all you need to know to become an iOS Developer.'
    />

    <RoadmapMultiCard
      roadmaps={[
        { title: 'React Native', link: '/react-native' },
        { title: 'Flutter', link: '/flutter' },
      ]}
      description='Or learn a cross-platform framework?'
    />
  </RoleRoadmaps>
  <RoleRoadmaps
    badge='AI and Machine Learning'
    title='Are you an AI or Machine Learning enthusiast?'
    description='How about diving into the AI or Machine Learning roadmaps?'
  >
    <RoadmapCard
      icon={Bot}
      title='AI and Data Science'
      link='/ai-data-scientist'
      description='Learn all you need to know to become an AI or Data Scientist.'
    />

    <RoadmapCard
      icon={Bot}
      title='Data Analyst'
      link='/data-analyst'
      description='Learn all you need to know to become a Data Analyst.'
    />

    <RoadmapCard
      icon={MessageCircleCode}
      title='Prompt Engineering'
      link='/prompt-engineering'
      description='Learn how to write better prompts for GPT-* and other language models.'
    />

    <RoadmapCard
      icon={Bot}
      icon2={ServerCog}
      title='MLOps'
      link='/mlops'
      description='Learn how to deploy and manage machine learning models.'
    />
  </RoleRoadmaps>
  <RoleRoadmaps
    badge='More Roles'
    title='Fancy something else?'
    description='Explore the following roadmaps about UX, Game Development, Software Architect and more'
  >
    <div class='flex flex-col justify-start gap-3'>
      <RoadmapCard
        icon={ShieldHalf}
        title='Cyber Security'
        link='/cyber-security'
        description='Learn to become a Cyber Security Expert.'
      />
      <RoadmapCard
        icon={Workflow}
        title='UX Designer'
        link='/ux-design'
        description='Learn all you need to know to become a UX Designer.'
      />
      <RoadmapCard
          icon={Coins}
          title='Blockchain'
          link='/blockchain'
          description='Learn all you need to know to become a Blockchain Developer.'
      />
    </div>
    <div class='flex flex-col justify-start gap-3'>
      <RoadmapCard
        icon={Gamepad2}
        title='Game Development'
        link='/game-developer'
        description='Learn all you need to know to become a Game Developer.'
      />
      <RoadmapCard
        icon={PenSquare}
        title='Technical Writer'
        link='/technical-writer'
        description='Learn all you need to know to become a Technical Writer.'
      />
      <RoadmapCard
          icon={Megaphone}
          title='DevRel Engineer'
          link='/devrel'
          description='Learn all you need to know to become a DevRel Engineer.'
      />
    </div>
    <div class='flex flex-col justify-start gap-3'>
      <RoadmapCard
          icon={FolderKanban}
          title='Product Manager'
          link='/product-manager'
          description='Learn all you need to know to become a Project Manager.'
      />
      <RoadmapCard
        icon={Component}
        title='Software Architect'
        link='/software-architect'
        description='Learn all you need to know to become a Software Architect.'
      />
      <RoadmapCard
        icon={GitBranch}
        title='Git and GitHub'
        link='/git-github'
        description='Learn all you need to know to become a Git and GitHub expert.'
      />
    </div>
  </RoleRoadmaps>

  <div class='container'>
    <div class='-mt-5 mb-12 rounded-3xl bg-black p-5'>
      <h2 class='mb-0.5 text-xl font-semibold text-white sm:mb-1 sm:text-2xl'>
        There is more!
      </h2>
      <p class='text-sm text-gray-400 sm:text-base'>
        We have a lot more content for you to explore.
      </p>

      <div
        class='my-4 grid grid-cols-1 gap-2 sm:my-5 sm:grid-cols-2 sm:gap-3 md:grid-cols-3'
      >
        <a
          href='/roadmaps'
          class='flex-grow rounded-lg bg-gradient-to-br from-gray-800 to-gray-700 p-4 text-sm text-white transition-all hover:from-gray-700 hover:to-gray-700 sm:text-base'
        >
          <Waypoints className='mb-3 h-5 w-5 text-gray-500 sm:mb-2' />
          Explore all Roadmaps
        </a>
        <a
          href='/best-practices'
          class='flex-grow rounded-lg bg-gradient-to-br from-gray-800 to-gray-700 p-4 text-sm text-white transition-all hover:from-gray-700 hover:to-gray-700 sm:text-base'
        >
          <CheckSquare className='mb-3 h-5 w-5 text-gray-500 sm:mb-2' />
          Explore Best Practices
        </a>
        <a
          href='/questions'
          class='flex-grow rounded-lg bg-gradient-to-br from-gray-800 to-gray-700 p-4 text-sm text-white transition-all hover:from-gray-700 hover:to-gray-700 sm:text-base'
        >
          <CheckSquare className='mb-3 h-5 w-5 text-gray-500 sm:mb-2' />
          Explore Questions
        </a>
      </div>
      <p class='text-sm text-gray-400 sm:text-base'>
        Or visit our <a
          href='/guides'
          class='rounded-lg bg-gray-700 px-2 py-1 text-gray-300 transition-colors hover:bg-gray-600 hover:text-white'
          >guides</a
        > and <a
          href='/videos'
          class='rounded-lg bg-gray-700 px-2 py-1 text-gray-300 transition-colors hover:bg-gray-600 hover:text-white'
          >videos</a
        > for long-form content.
      </p>
    </div>
  </div>
</BaseLayout>