Kamran Ahmed
3 months ago
committed by
GitHub
commit
f461af7c2d
357 changed files with 8995 additions and 4867 deletions
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,20 +1,85 @@ |
||||
type AIAnnouncementProps = {}; |
||||
import { useState } from 'react'; |
||||
import { Modal } from './Modal.tsx'; |
||||
import {PartyPopper, Play, PlayCircle} from 'lucide-react'; |
||||
import { isMobileScreen } from '../lib/is-mobile.ts'; |
||||
|
||||
export function FeatureAnnouncement(props: AIAnnouncementProps) { |
||||
return ( |
||||
type FeatureAnnouncementProps = {}; |
||||
|
||||
export function FeatureAnnouncement(props: FeatureAnnouncementProps) { |
||||
const [isPlaying, setIsPlaying] = useState(false); |
||||
|
||||
const videoModal = ( |
||||
<Modal |
||||
onClose={() => setIsPlaying(false)} |
||||
bodyClassName={'h-auto overflow-hidden'} |
||||
wrapperClassName={'md:max-w-3xl lg:max-w-4xl xl:max-w-5xl'} |
||||
> |
||||
<div className="text-balance bg-gradient-to-r from-gray-100 px-4 py-2 text-left text-sm md:py-3 lg:text-base"> |
||||
<span |
||||
className="relative -top-px mr-1.5 rounded bg-blue-300 px-1.5 py-0.5 text-xs font-semibold uppercase text-gray-800" |
||||
style={{ lineHeight: '1.5' }} |
||||
> |
||||
New |
||||
</span> |
||||
Projects are live on the{' '} |
||||
<a |
||||
href={'/backend/projects'} |
||||
className="font-medium text-blue-500 underline underline-offset-2" |
||||
> |
||||
backend roadmap |
||||
</a> |
||||
<span className={'hidden md:inline'}> |
||||
{' '} |
||||
and are coming soon on the others{' '} |
||||
</span> |
||||
<PartyPopper className="relative -top-[3px] ml-2 inline-block h-5 w-5 text-blue-500 md:ml-1 md:h-6 md:w-6" /> |
||||
</div> |
||||
<div |
||||
className="iframe-container" |
||||
style={{ |
||||
position: 'relative', |
||||
paddingBottom: '56.25%', |
||||
height: 0, |
||||
overflow: 'hidden', |
||||
}} |
||||
> |
||||
{/*https://www.youtube.com/embed/?playsinline=1&disablekb=1&&iv_load_policy=3&cc_load_policy=0&controls=0&rel=0&autoplay=1&mute=1&origin=https%3A%2F%2Fytch.xyz&widgetid=1*/} |
||||
<iframe |
||||
src="https://www.youtube.com/embed/9lS3slfJ0x0?start=31&autoplay=1&disablekb=1&rel=0&cc_load_policy=0&rel=0&autoplay=1&origin=https%3A%2F%2Froadmap.sh&widgetid=1&showinfo=0" |
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" |
||||
allowFullScreen |
||||
style={{ |
||||
position: 'absolute', |
||||
top: 0, |
||||
left: 0, |
||||
width: '100%', |
||||
height: '100%', |
||||
}} |
||||
/> |
||||
</div> |
||||
</Modal> |
||||
); |
||||
|
||||
return ( |
||||
<> |
||||
{isPlaying && videoModal} |
||||
<button |
||||
className="rounded-md border border-dashed border-purple-600 px-3 py-1.5 text-purple-400 transition-colors hover:border-purple-400 hover:text-purple-200" |
||||
href="/community" |
||||
onClick={() => { |
||||
setIsPlaying(true); |
||||
}} |
||||
> |
||||
<span className="relative -top-[1px] mr-1 text-xs font-semibold uppercase text-white"> |
||||
New |
||||
<span className="relative sm:-top-[1px] mr-1 text-xs font-semibold uppercase text-white"> |
||||
<PlayCircle className="inline-block h-4 w-4 relative -top-[2px] mr-1" /> |
||||
Watch |
||||
</span>{' '} |
||||
<span className={'hidden sm:inline'}> |
||||
Explore community made roadmaps |
||||
Practice your skills with projects |
||||
</span> |
||||
<span className={'inline text-sm sm:hidden'}> |
||||
Community roadmaps explorer! |
||||
Build projects to skill up |
||||
</span> |
||||
</a> |
||||
</button> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
@ -0,0 +1,29 @@ |
||||
import { Blocks, CodeXml } from 'lucide-react'; |
||||
|
||||
type EmptySolutionsProps = { |
||||
projectId: string; |
||||
}; |
||||
|
||||
export function EmptySolutions(props: EmptySolutionsProps) { |
||||
const { projectId } = props; |
||||
|
||||
return ( |
||||
<div className="flex min-h-[250px] flex-col items-center justify-center rounded-xl px-5 py-3 sm:px-0 sm:py-20"> |
||||
<Blocks className="mb-4 opacity-10 h-14 w-14" /> |
||||
<h2 className="mb-1 text-lg font-semibold sm:text-xl"> |
||||
No solutions submitted yet |
||||
</h2> |
||||
<p className="mb-3 text-balance text-center text-xs text-gray-400 sm:text-sm"> |
||||
Be the first to submit a solution for this project |
||||
</p> |
||||
<div className="flex flex-col items-center gap-1 sm:flex-row sm:gap-1.5"> |
||||
<a |
||||
href={`/projects/${projectId}`} |
||||
className="flex w-full items-center gap-1.5 rounded-md bg-gray-900 px-3 py-1.5 text-xs text-white sm:w-auto sm:text-sm" |
||||
> |
||||
View Project Details |
||||
</a> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,64 @@ |
||||
import { ArrowUpRight, X } from 'lucide-react'; |
||||
import { Modal } from '../Modal'; |
||||
import { SubmissionRequirement } from './SubmissionRequirement.tsx'; |
||||
|
||||
type LeavingRoadmapWarningModalProps = { |
||||
onClose: () => void; |
||||
onContinue: () => void; |
||||
}; |
||||
|
||||
export function LeavingRoadmapWarningModal( |
||||
props: LeavingRoadmapWarningModalProps, |
||||
) { |
||||
const { onClose, onContinue } = props; |
||||
|
||||
return ( |
||||
<Modal onClose={onClose} bodyClassName="h-auto p-4"> |
||||
<h2 className="mb-1.5 text-2xl font-semibold">Leaving roadmap.sh</h2> |
||||
<p className="text-sm text-gray-500"> |
||||
You are about to visit the project solution on GitHub. We recommend you |
||||
to follow these tips before you leave. |
||||
</p> |
||||
|
||||
<div className="my-3"> |
||||
<p className="rounded-lg bg-gray-200 p-2 text-sm text-gray-900"> |
||||
Make sure to come back and{' '} |
||||
<span className="font-medium text-purple-600">leave an upvote</span>{' '} |
||||
if you liked the solution. It helps the author and the community. |
||||
</p> |
||||
|
||||
<p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900"> |
||||
If you have feedback on the solution, open an issue or a pull request |
||||
on the{' '} |
||||
<span className="font-medium text-purple-600"> |
||||
solution repository |
||||
</span> |
||||
. |
||||
</p> |
||||
|
||||
<p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900"> |
||||
Downvote the solution if it is{' '} |
||||
<span className="font-medium text-purple-600"> |
||||
incorrect or misleading |
||||
</span> |
||||
. It helps the community. |
||||
</p> |
||||
</div> |
||||
|
||||
<button |
||||
className="inline-flex w-full items-center gap-2 rounded-lg bg-black px-3 py-2.5 text-sm text-white" |
||||
onClick={onContinue} |
||||
> |
||||
<ArrowUpRight className="h-5 w-5" /> |
||||
Continue to Solution |
||||
</button> |
||||
|
||||
<button |
||||
className="absolute right-2.5 top-2.5 text-gray-600 hover:text-black" |
||||
onClick={onClose} |
||||
> |
||||
<X className="h-5 w-5" /> |
||||
</button> |
||||
</Modal> |
||||
); |
||||
} |
||||
@ -0,0 +1,328 @@ |
||||
import { useEffect, useState } from 'react'; |
||||
import { useToast } from '../../hooks/use-toast'; |
||||
import { httpGet, httpPost } from '../../lib/http'; |
||||
import { LoadingSolutions } from './LoadingSolutions'; |
||||
import { EmptySolutions } from './EmptySolutions'; |
||||
import { ThumbsDown, ThumbsUp } from 'lucide-react'; |
||||
import { getRelativeTimeString } from '../../lib/date'; |
||||
import { Pagination } from '../Pagination/Pagination'; |
||||
import { deleteUrlParam, getUrlParams, setUrlParams } from '../../lib/browser'; |
||||
import { pageProgressMessage } from '../../stores/page'; |
||||
import { LeavingRoadmapWarningModal } from './LeavingRoadmapWarningModal'; |
||||
import { isLoggedIn } from '../../lib/jwt'; |
||||
import { showLoginPopup } from '../../lib/popup'; |
||||
import { VoteButton } from './VoteButton.tsx'; |
||||
import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx'; |
||||
import { cn } from '../../lib/classname.ts'; |
||||
|
||||
export interface ProjectStatusDocument { |
||||
_id?: string; |
||||
|
||||
userId: string; |
||||
projectId: string; |
||||
|
||||
startedAt?: Date; |
||||
submittedAt?: Date; |
||||
repositoryUrl?: string; |
||||
|
||||
upvotes: number; |
||||
downvotes: number; |
||||
|
||||
isVisible?: boolean; |
||||
|
||||
updated1t: Date; |
||||
} |
||||
|
||||
const allowedVoteType = ['upvote', 'downvote'] as const; |
||||
export type AllowedVoteType = (typeof allowedVoteType)[number]; |
||||
|
||||
type ListProjectSolutionsResponse = { |
||||
data: (ProjectStatusDocument & { |
||||
user: { |
||||
id: string; |
||||
name: string; |
||||
avatar: string; |
||||
}; |
||||
voteType?: AllowedVoteType | 'none'; |
||||
})[]; |
||||
totalCount: number; |
||||
totalPages: number; |
||||
currPage: number; |
||||
perPage: number; |
||||
}; |
||||
|
||||
type QueryParams = { |
||||
p?: string; |
||||
}; |
||||
|
||||
type PageState = { |
||||
currentPage: number; |
||||
}; |
||||
|
||||
const VISITED_SOLUTIONS_KEY = 'visited-project-solutions'; |
||||
|
||||
type ListProjectSolutionsProps = { |
||||
projectId: string; |
||||
}; |
||||
|
||||
const submittedAlternatives = [ |
||||
'submitted their solution', |
||||
'got it done', |
||||
'submitted their take', |
||||
'finished the project', |
||||
'submitted their work', |
||||
'completed the project', |
||||
'got it done', |
||||
'delivered their project', |
||||
'handed in their solution', |
||||
'provided their deliverables', |
||||
'submitted their approach', |
||||
'sent in their project', |
||||
'presented their take', |
||||
'shared their completed task', |
||||
'submitted their approach', |
||||
'completed it', |
||||
'finalized their solution', |
||||
'delivered their approach', |
||||
'turned in their project', |
||||
'submitted their final draft', |
||||
'delivered their solution', |
||||
]; |
||||
|
||||
export function ListProjectSolutions(props: ListProjectSolutionsProps) { |
||||
const { projectId } = props; |
||||
|
||||
const toast = useToast(); |
||||
const [pageState, setPageState] = useState<PageState>({ |
||||
currentPage: 0, |
||||
}); |
||||
|
||||
const [isLoading, setIsLoading] = useState(true); |
||||
const [solutions, setSolutions] = useState<ListProjectSolutionsResponse>(); |
||||
const [alreadyVisitedSolutions, setAlreadyVisitedSolutions] = useState< |
||||
Record<string, boolean> |
||||
>({}); |
||||
const [showLeavingRoadmapModal, setShowLeavingRoadmapModal] = useState< |
||||
ListProjectSolutionsResponse['data'][number] | null |
||||
>(null); |
||||
|
||||
const loadSolutions = async (page = 1) => { |
||||
const { response, error } = await httpGet<ListProjectSolutionsResponse>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-list-project-solutions/${projectId}`, |
||||
{ |
||||
currPage: page, |
||||
}, |
||||
); |
||||
|
||||
if (error || !response) { |
||||
toast.error(error?.message || 'Failed to load project solutions'); |
||||
setIsLoading(false); |
||||
return; |
||||
} |
||||
|
||||
setSolutions(response); |
||||
}; |
||||
|
||||
const handleSubmitVote = async ( |
||||
solutionId: string, |
||||
voteType: AllowedVoteType, |
||||
) => { |
||||
if (!isLoggedIn()) { |
||||
showLoginPopup(); |
||||
return; |
||||
} |
||||
|
||||
pageProgressMessage.set('Submitting vote...'); |
||||
const { response, error } = await httpPost( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-vote-project/${solutionId}`, |
||||
{ |
||||
voteType, |
||||
}, |
||||
); |
||||
|
||||
if (error || !response) { |
||||
toast.error(error?.message || 'Failed to submit vote'); |
||||
pageProgressMessage.set(''); |
||||
return; |
||||
} |
||||
|
||||
pageProgressMessage.set(''); |
||||
setSolutions((prev) => { |
||||
if (!prev) { |
||||
return prev; |
||||
} |
||||
|
||||
return { |
||||
...prev, |
||||
data: prev.data.map((solution) => { |
||||
if (solution._id === solutionId) { |
||||
return { |
||||
...solution, |
||||
upvotes: response?.upvotes || 0, |
||||
downvotes: response?.downvotes || 0, |
||||
voteType, |
||||
}; |
||||
} |
||||
|
||||
return solution; |
||||
}), |
||||
}; |
||||
}); |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
const queryParams = getUrlParams() as QueryParams; |
||||
const alreadyVisitedSolutions = JSON.parse( |
||||
localStorage.getItem(VISITED_SOLUTIONS_KEY) || '{}', |
||||
); |
||||
|
||||
setAlreadyVisitedSolutions(alreadyVisitedSolutions); |
||||
setPageState({ |
||||
currentPage: +(queryParams.p || '1'), |
||||
}); |
||||
}, []); |
||||
|
||||
useEffect(() => { |
||||
setIsLoading(true); |
||||
if (!pageState.currentPage) { |
||||
return; |
||||
} |
||||
|
||||
if (pageState.currentPage !== 1) { |
||||
setUrlParams({ |
||||
p: String(pageState.currentPage), |
||||
}); |
||||
} else { |
||||
deleteUrlParam('p'); |
||||
} |
||||
|
||||
loadSolutions(pageState.currentPage).finally(() => { |
||||
setIsLoading(false); |
||||
}); |
||||
}, [pageState]); |
||||
|
||||
if (isLoading) { |
||||
return <LoadingSolutions />; |
||||
} |
||||
|
||||
const isEmpty = solutions?.data.length === 0; |
||||
if (isEmpty) { |
||||
return <EmptySolutions projectId={projectId} />; |
||||
} |
||||
|
||||
const leavingRoadmapModal = showLeavingRoadmapModal ? ( |
||||
<LeavingRoadmapWarningModal |
||||
onClose={() => setShowLeavingRoadmapModal(null)} |
||||
onContinue={() => { |
||||
const visitedSolutions = { |
||||
...alreadyVisitedSolutions, |
||||
[showLeavingRoadmapModal._id!]: true, |
||||
}; |
||||
localStorage.setItem( |
||||
VISITED_SOLUTIONS_KEY, |
||||
JSON.stringify(visitedSolutions), |
||||
); |
||||
|
||||
window.open(showLeavingRoadmapModal.repositoryUrl, '_blank'); |
||||
}} |
||||
/> |
||||
) : null; |
||||
|
||||
return ( |
||||
<section> |
||||
{leavingRoadmapModal} |
||||
|
||||
<div className="flex min-h-[500px] flex-col divide-y divide-gray-100"> |
||||
{solutions?.data.map((solution, counter) => { |
||||
const isVisited = alreadyVisitedSolutions[solution._id!]; |
||||
const avatar = solution.user.avatar || ''; |
||||
|
||||
return ( |
||||
<div |
||||
key={solution._id} |
||||
className={ |
||||
'flex flex-col justify-between gap-2 py-2 text-sm text-gray-500 sm:flex-row sm:items-center sm:gap-0' |
||||
} |
||||
> |
||||
<div className="flex items-center gap-1.5"> |
||||
<img |
||||
src={ |
||||
avatar |
||||
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${avatar}` |
||||
: '/images/default-avatar.png' |
||||
} |
||||
alt={solution.user.name} |
||||
className="mr-0.5 h-7 w-7 rounded-full" |
||||
/> |
||||
<span className="font-medium text-black"> |
||||
{solution.user.name} |
||||
</span> |
||||
<span className="hidden sm:inline"> |
||||
{submittedAlternatives[ |
||||
counter % submittedAlternatives.length |
||||
] || 'submitted their solution'} |
||||
</span>{' '} |
||||
<span className="flex-grow text-right text-gray-400 sm:flex-grow-0 sm:text-left sm:font-medium sm:text-black"> |
||||
{getRelativeTimeString(solution?.submittedAt!)} |
||||
</span> |
||||
</div> |
||||
|
||||
<div className="flex items-center justify-end gap-1"> |
||||
<span className="flex overflow-hidden rounded-full border"> |
||||
<VoteButton |
||||
icon={ThumbsUp} |
||||
isActive={solution?.voteType === 'upvote'} |
||||
count={solution.upvotes || 0} |
||||
onClick={() => { |
||||
handleSubmitVote(solution._id!, 'upvote'); |
||||
}} |
||||
/> |
||||
|
||||
<VoteButton |
||||
icon={ThumbsDown} |
||||
isActive={solution?.voteType === 'downvote'} |
||||
count={solution.downvotes || 0} |
||||
hideCount={true} |
||||
onClick={() => { |
||||
handleSubmitVote(solution._id!, 'downvote'); |
||||
}} |
||||
/> |
||||
</span> |
||||
|
||||
<a |
||||
className="ml-1 flex items-center gap-1 rounded-full border px-2 py-1 text-xs text-black transition-colors hover:border-black hover:bg-black hover:text-white" |
||||
onClick={(e) => { |
||||
e.preventDefault(); |
||||
setShowLeavingRoadmapModal(solution); |
||||
}} |
||||
target="_blank" |
||||
href={solution.repositoryUrl} |
||||
> |
||||
<GitHubIcon className="h-4 w-4 text-current" /> |
||||
Visit Solution |
||||
</a> |
||||
</div> |
||||
</div> |
||||
); |
||||
})} |
||||
</div> |
||||
|
||||
{(solutions?.totalPages || 0) > 1 && ( |
||||
<div className="mt-4"> |
||||
<Pagination |
||||
totalPages={solutions?.totalPages || 1} |
||||
currPage={solutions?.currPage || 1} |
||||
perPage={solutions?.perPage || 21} |
||||
totalCount={solutions?.totalCount || 0} |
||||
onPageChange={(page) => { |
||||
setPageState({ |
||||
...pageState, |
||||
currentPage: page, |
||||
}); |
||||
}} |
||||
/> |
||||
</div> |
||||
)} |
||||
</section> |
||||
); |
||||
} |
||||
@ -0,0 +1,44 @@ |
||||
import { isMobileScreen } from '../../lib/is-mobile.ts'; |
||||
|
||||
export function LoadingSolutions() { |
||||
const totalCount = isMobileScreen() ? 3 : 11; |
||||
|
||||
const loadingRow = ( |
||||
<li className="flex min-h-[78px] animate-pulse flex-wrap items-center justify-between overflow-hidden rounded-md bg-gray-200 sm:min-h-[44px] sm:animate-none sm:rounded-none sm:bg-transparent"> |
||||
<span className="flex items-center"> |
||||
<span className="block h-[28px] w-[28px] animate-pulse rounded-full bg-gray-200"></span> |
||||
<span |
||||
className={`ml-2 block h-[26px] w-[350px] animate-pulse rounded-full bg-gray-200`} |
||||
></span> |
||||
</span> |
||||
<span className="flex items-center gap-2"> |
||||
<span |
||||
className={ |
||||
'animated-pulse h-[26px] w-[80px] rounded-full bg-gray-200' |
||||
} |
||||
></span> |
||||
<span |
||||
className={ |
||||
'animated-pulse h-[26px] w-[113px] rounded-full bg-gray-200' |
||||
} |
||||
></span> |
||||
</span> |
||||
</li> |
||||
); |
||||
|
||||
return ( |
||||
<ul className="flex min-h-[500px] flex-col gap-2 divide-y sm:gap-0"> |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
{loadingRow} |
||||
</ul> |
||||
); |
||||
} |
||||
@ -0,0 +1,69 @@ |
||||
import { cn } from '../../lib/classname'; |
||||
import { |
||||
Blocks, |
||||
BoxSelect, |
||||
type LucideIcon, |
||||
StickyNote, |
||||
Text, |
||||
} from 'lucide-react'; |
||||
|
||||
export const allowedProjectTabs = ['details', 'solutions'] as const; |
||||
export type AllowedProjectTab = (typeof allowedProjectTabs)[number]; |
||||
|
||||
type TabButtonProps = { |
||||
text: string; |
||||
icon: LucideIcon; |
||||
smText?: string; |
||||
isActive?: boolean; |
||||
href: string; |
||||
}; |
||||
|
||||
function TabButton(props: TabButtonProps) { |
||||
const { text, icon: ButtonIcon, smText, isActive, href } = props; |
||||
|
||||
return ( |
||||
<a |
||||
href={href} |
||||
className={cn('relative flex items-center gap-1 p-2', { |
||||
'text-black': isActive, |
||||
'opacity-40 hover:opacity-90': !isActive, |
||||
})} |
||||
> |
||||
{ButtonIcon && <ButtonIcon className="mr-1 inline-block h-4 w-4" />} |
||||
<span className="hidden sm:inline">{text}</span> |
||||
{smText && <span className="sm:hidden">{smText}</span>} |
||||
|
||||
{isActive && ( |
||||
<span className="absolute bottom-0 left-0 right-0 h-0.5 translate-y-1/2 bg-black rounded-t-md"></span> |
||||
)} |
||||
</a> |
||||
); |
||||
} |
||||
|
||||
type ProjectTabsProps = { |
||||
activeTab: AllowedProjectTab; |
||||
projectId: string; |
||||
}; |
||||
|
||||
export function ProjectTabs(props: ProjectTabsProps) { |
||||
const { activeTab, projectId } = props; |
||||
|
||||
return ( |
||||
<div className="my-3 flex flex-row flex-wrap items-center gap-1.5 rounded-md border bg-white px-2.5 text-sm"> |
||||
<TabButton |
||||
text={'Project Detail'} |
||||
icon={Text} |
||||
smText={'Details'} |
||||
isActive={activeTab === 'details'} |
||||
href={`/projects/${projectId}`} |
||||
/> |
||||
<TabButton |
||||
text={'Community Solutions'} |
||||
icon={Blocks} |
||||
smText={'Solutions'} |
||||
isActive={activeTab === 'solutions'} |
||||
href={`/projects/${projectId}/solutions`} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,169 @@ |
||||
import { Check, CopyIcon, ServerCrash } from 'lucide-react'; |
||||
import { Modal } from '../Modal'; |
||||
import { getRelativeTimeString } from '../../lib/date'; |
||||
import { useEffect, useState } from 'react'; |
||||
import { Spinner } from '../ReactIcons/Spinner.tsx'; |
||||
import { httpPost } from '../../lib/http.ts'; |
||||
import { CheckIcon } from '../ReactIcons/CheckIcon.tsx'; |
||||
import { useCopyText } from '../../hooks/use-copy-text.ts'; |
||||
|
||||
type StepLabelProps = { |
||||
label: string; |
||||
}; |
||||
|
||||
function StepLabel(props: StepLabelProps) { |
||||
const { label } = props; |
||||
|
||||
return ( |
||||
<span className="flex-shrink-0 rounded-full bg-gray-200 px-2 py-1 text-xs text-gray-600"> |
||||
{label} |
||||
</span> |
||||
); |
||||
} |
||||
|
||||
type StartProjectModalProps = { |
||||
projectId: string; |
||||
onClose: () => void; |
||||
startedAt?: Date; |
||||
onStarted: (startedAt: Date) => void; |
||||
}; |
||||
|
||||
export function StartProjectModal(props: StartProjectModalProps) { |
||||
const { onClose, startedAt, onStarted, projectId } = props; |
||||
|
||||
const [isStartingProject, setIsStartingProject] = useState(true); |
||||
const [error, setError] = useState<string | null>(); |
||||
|
||||
const { isCopied, copyText } = useCopyText(); |
||||
|
||||
const projectUrl = `${import.meta.env.PUBLIC_APP_URL}/projects/${projectId}`; |
||||
|
||||
const formattedStartedAt = startedAt ? getRelativeTimeString(startedAt) : ''; |
||||
|
||||
async function handleStartProject() { |
||||
if (!projectId || startedAt) { |
||||
return; |
||||
} |
||||
|
||||
setIsStartingProject(true); |
||||
const { response, error } = await httpPost<{ |
||||
startedAt: Date; |
||||
}>(`${import.meta.env.PUBLIC_API_URL}/v1-start-project/${projectId}`, {}); |
||||
|
||||
if (error || !response) { |
||||
setError(error?.message || 'Failed to start project'); |
||||
setIsStartingProject(false); |
||||
return; |
||||
} |
||||
|
||||
onStarted(response.startedAt); |
||||
} |
||||
|
||||
useEffect(() => { |
||||
handleStartProject().finally(() => setIsStartingProject(false)); |
||||
}, []); |
||||
|
||||
if (error) { |
||||
return ( |
||||
<Modal onClose={onClose} bodyClassName="h-auto text-red-500"> |
||||
<div className="flex flex-col items-center justify-center gap-2 pb-10 pt-12"> |
||||
<ServerCrash className={'h-6 w-6'} /> |
||||
<p className="font-medium">{error}</p> |
||||
</div> |
||||
</Modal> |
||||
); |
||||
} |
||||
|
||||
if (isStartingProject) { |
||||
return ( |
||||
<Modal onClose={onClose} bodyClassName="h-auto"> |
||||
<div className="flex flex-col items-center justify-center gap-4 pb-10 pt-12"> |
||||
<Spinner className={'h-6 w-6'} isDualRing={false} /> |
||||
<p className="font-medium">Starting project ..</p> |
||||
</div> |
||||
</Modal> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<Modal |
||||
onClose={onClose} |
||||
bodyClassName="h-auto p-4 relative overflow-hidden" |
||||
wrapperClassName={'max-w-md'} |
||||
> |
||||
<p className="-mx-4 -mt-4 flex items-center bg-yellow-200 px-3 py-2 text-sm text-yellow-900"> |
||||
<CheckIcon additionalClasses="mr-1.5 w-[15px] text-yellow-800 h-[15px]" /> |
||||
<span className="mr-1.5 font-normal">Project started</span>{' '} |
||||
<span className="font-semibold">{formattedStartedAt}</span> |
||||
</p> |
||||
<h2 className="mb-1 mt-5 text-2xl font-semibold text-gray-800"> |
||||
Start Building |
||||
</h2> |
||||
<p className="text-gray-700"> |
||||
Follow these steps to complete the project. |
||||
</p> |
||||
|
||||
<div className="my-5 space-y-1.5 marker:text-gray-400"> |
||||
<p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900"> |
||||
1. Create a new public repository on GitHub. |
||||
</p> |
||||
|
||||
<p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900"> |
||||
2. Complete the project according to the requirements and push your code |
||||
to the GitHub repository. |
||||
</p> |
||||
|
||||
<p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900"> |
||||
3. Add a README file with instructions to run the project and the{' '} |
||||
<button |
||||
onClick={() => { |
||||
copyText(projectUrl); |
||||
}} |
||||
className="font-semibold" |
||||
> |
||||
{!isCopied && ( |
||||
<span className="text-purple-600"> |
||||
project page URL |
||||
<CopyIcon |
||||
className="relative -top-px ml-1 inline-block h-4 w-4" |
||||
strokeWidth={2.5} |
||||
/> |
||||
</span> |
||||
)} |
||||
{isCopied && ( |
||||
<> |
||||
copied URL |
||||
<Check className="inline-block h-4 w-4" strokeWidth={2.5} /> |
||||
</> |
||||
)} |
||||
</button> |
||||
</p> |
||||
<p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900"> |
||||
4. Once done, submit your solution to help the others learn and get feedback |
||||
from the community. |
||||
</p> |
||||
</div> |
||||
|
||||
<div className="mb-5"> |
||||
<p className='text-sm'> |
||||
If you get stuck, you can always ask for help in the community{' '} |
||||
<a |
||||
href="https://roadmap.sh/discord" |
||||
target="_blank" |
||||
className="font-medium underline underline-offset-2" |
||||
> |
||||
chat on discord |
||||
</a> |
||||
. |
||||
</p> |
||||
</div> |
||||
|
||||
<button |
||||
className="w-full rounded-md bg-black py-2 text-sm font-medium text-white hover:bg-gray-900" |
||||
onClick={onClose} |
||||
> |
||||
Close |
||||
</button> |
||||
</Modal> |
||||
); |
||||
} |
||||
@ -0,0 +1,37 @@ |
||||
import { Check, type LucideIcon } from 'lucide-react'; |
||||
|
||||
type MilestoneStepProps = { |
||||
icon: LucideIcon; |
||||
text: string; |
||||
isCompleted?: boolean; |
||||
isActive?: boolean; |
||||
}; |
||||
|
||||
export function MilestoneStep(props: MilestoneStepProps) { |
||||
const { icon: DisplayIcon, text, isActive = false, isCompleted } = props; |
||||
|
||||
if (isActive) { |
||||
return ( |
||||
<span className="flex cursor-default items-center gap-1.5 rounded-md border border-dashed border-current px-1.5 py-0.5 text-sm font-medium text-gray-400"> |
||||
<DisplayIcon size={14} /> |
||||
<span>{text}</span> |
||||
</span> |
||||
); |
||||
} |
||||
|
||||
if (isCompleted) { |
||||
return ( |
||||
<span className="flex cursor-default items-center gap-1.5 text-sm font-medium text-green-600"> |
||||
<Check size={14} strokeWidth={3} /> |
||||
<span>{text}</span> |
||||
</span> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<span className="flex cursor-default items-center gap-1.5 text-sm text-gray-400"> |
||||
<DisplayIcon size={14} /> |
||||
<span>{text}</span> |
||||
</span> |
||||
); |
||||
} |
||||
@ -0,0 +1,245 @@ |
||||
import { Flag, Play, Send } from 'lucide-react'; |
||||
import { useEffect, useRef, useState } from 'react'; |
||||
import { cn } from '../../../lib/classname.ts'; |
||||
import { useStickyStuck } from '../../../hooks/use-sticky-stuck.tsx'; |
||||
import { StepperAction } from './StepperAction.tsx'; |
||||
import { StepperStepSeparator } from './StepperStepSeparator.tsx'; |
||||
import { MilestoneStep } from './MilestoneStep.tsx'; |
||||
import { httpGet } from '../../../lib/http.ts'; |
||||
import { StartProjectModal } from '../StartProjectModal.tsx'; |
||||
import { getRelativeTimeString } from '../../../lib/date.ts'; |
||||
import { isLoggedIn } from '../../../lib/jwt.ts'; |
||||
import { showLoginPopup } from '../../../lib/popup.ts'; |
||||
import { SubmitProjectModal } from '../SubmitProjectModal.tsx'; |
||||
|
||||
type ProjectStatusResponse = { |
||||
id?: string; |
||||
|
||||
startedAt?: Date; |
||||
submittedAt?: Date; |
||||
repositoryUrl?: string; |
||||
|
||||
upvotes: number; |
||||
downvotes: number; |
||||
}; |
||||
|
||||
type ProjectStepperProps = { |
||||
projectId: string; |
||||
}; |
||||
|
||||
export function ProjectStepper(props: ProjectStepperProps) { |
||||
const { projectId } = props; |
||||
|
||||
const stickyElRef = useRef<HTMLDivElement>(null); |
||||
const isSticky = useStickyStuck(stickyElRef, 8); |
||||
|
||||
const [isStartingProject, setIsStartingProject] = useState(false); |
||||
const [isSubmittingProject, setIsSubmittingProject] = useState(false); |
||||
|
||||
const [error, setError] = useState<string | null>(null); |
||||
const [activeStep, setActiveStep] = useState<number>(0); |
||||
const [isLoadingStatus, setIsLoadingStatus] = useState(true); |
||||
const [projectStatus, setProjectStatus] = useState<ProjectStatusResponse>({ |
||||
upvotes: 0, |
||||
downvotes: 0, |
||||
}); |
||||
|
||||
async function loadProjectStatus() { |
||||
setIsLoadingStatus(true); |
||||
|
||||
const { response, error } = await httpGet<ProjectStatusResponse>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-project-status/${projectId}`, |
||||
{}, |
||||
); |
||||
|
||||
if (error || !response) { |
||||
setError(error?.message || 'Error loading project status'); |
||||
setIsLoadingStatus(false); |
||||
return; |
||||
} |
||||
|
||||
const { startedAt, submittedAt, upvotes } = response; |
||||
|
||||
if (upvotes >= 10) { |
||||
setActiveStep(4); |
||||
} else if (upvotes >= 5) { |
||||
setActiveStep(3); |
||||
} else if (submittedAt) { |
||||
setActiveStep(2); |
||||
} else if (startedAt) { |
||||
setActiveStep(1); |
||||
} |
||||
|
||||
setProjectStatus(response); |
||||
setIsLoadingStatus(false); |
||||
} |
||||
|
||||
useEffect(() => { |
||||
loadProjectStatus().finally(() => {}); |
||||
}, []); |
||||
|
||||
return ( |
||||
<div |
||||
ref={stickyElRef} |
||||
className={cn( |
||||
'relative sm:sticky top-0 my-5 -mx-4 sm:mx-0 overflow-hidden rounded-none border-x-0 sm:border-x sm:rounded-lg border bg-white transition-all', |
||||
{ |
||||
'sm:-mx-5 sm:rounded-none sm:border-x-0 sm:border-t-0 sm:bg-gray-50': isSticky, |
||||
}, |
||||
)} |
||||
> |
||||
{isSubmittingProject && ( |
||||
<SubmitProjectModal |
||||
onClose={() => setIsSubmittingProject(false)} |
||||
projectId={projectId} |
||||
onSubmit={(response) => { |
||||
const { repositoryUrl, submittedAt } = response; |
||||
|
||||
setProjectStatus({ |
||||
...projectStatus, |
||||
repositoryUrl, |
||||
submittedAt, |
||||
}); |
||||
|
||||
setActiveStep(2); |
||||
}} |
||||
repositoryUrl={projectStatus.repositoryUrl} |
||||
/> |
||||
)} |
||||
{isStartingProject && ( |
||||
<StartProjectModal |
||||
projectId={projectId} |
||||
onStarted={(startedAt) => { |
||||
setProjectStatus({ |
||||
...projectStatus, |
||||
startedAt, |
||||
}); |
||||
setActiveStep(1); |
||||
}} |
||||
startedAt={projectStatus?.startedAt} |
||||
onClose={() => setIsStartingProject(false)} |
||||
/> |
||||
)} |
||||
|
||||
{error && ( |
||||
<div className="absolute inset-0 bg-red-100 p-2 text-sm text-red-500"> |
||||
{error} |
||||
</div> |
||||
)} |
||||
{isLoadingStatus && ( |
||||
<div className={cn('striped-loader absolute inset-0 z-10 bg-white')} /> |
||||
)} |
||||
<div |
||||
className={cn( |
||||
'px-4 py-2 text-sm text-gray-500 transition-colors bg-gray-100', |
||||
{ |
||||
'bg-purple-600 text-white': isSticky, |
||||
}, |
||||
)} |
||||
> |
||||
{activeStep === 0 && ( |
||||
<> |
||||
Start building, submit solution and get feedback from the community. |
||||
</> |
||||
)} |
||||
{activeStep === 1 && ( |
||||
<> |
||||
Started working{' '} |
||||
<span |
||||
className={cn('font-medium text-gray-800', { |
||||
'text-purple-200': isSticky, |
||||
})} |
||||
> |
||||
{getRelativeTimeString(projectStatus.startedAt!)} |
||||
</span> |
||||
. Follow{' '} |
||||
<button |
||||
className={cn('underline underline-offset-2 hover:text-black', { |
||||
'text-purple-100 hover:text-white': isSticky, |
||||
})} |
||||
onClick={() => { |
||||
setIsStartingProject(true); |
||||
}} |
||||
> |
||||
these tips |
||||
</button>{' '} |
||||
to get most out of it. |
||||
</> |
||||
)} |
||||
{activeStep >= 2 && ( |
||||
<> |
||||
Congrats on submitting your solution.{' '} |
||||
<button |
||||
className={cn('underline underline-offset-2 hover:text-black', { |
||||
'text-purple-100 hover:text-white': isSticky, |
||||
})} |
||||
onClick={() => { |
||||
setIsSubmittingProject(true); |
||||
}} |
||||
> |
||||
View or update your submission. |
||||
</button> |
||||
</> |
||||
)} |
||||
</div> |
||||
|
||||
<div className="flex flex-col sm:flex-row min-h-[60px] items-start sm:items-center justify-between gap-2 sm:gap-3 px-4 py-4 sm:py-0"> |
||||
<StepperAction |
||||
isActive={activeStep === 0} |
||||
isCompleted={activeStep > 0} |
||||
icon={Play} |
||||
text={activeStep > 0 ? 'Started Working' : 'Start Working'} |
||||
number={1} |
||||
onClick={() => { |
||||
if (!isLoggedIn()) { |
||||
showLoginPopup(); |
||||
return; |
||||
} |
||||
|
||||
setIsStartingProject(true); |
||||
}} |
||||
/> |
||||
<StepperStepSeparator isActive={activeStep > 0} /> |
||||
<StepperAction |
||||
isActive={activeStep === 1} |
||||
isCompleted={activeStep > 1} |
||||
icon={Send} |
||||
onClick={() => { |
||||
if (!isLoggedIn()) { |
||||
showLoginPopup(); |
||||
return; |
||||
} |
||||
|
||||
setIsSubmittingProject(true); |
||||
}} |
||||
text={activeStep > 1 ? 'Submitted' : 'Submit Solution'} |
||||
number={2} |
||||
/> |
||||
<StepperStepSeparator isActive={activeStep > 1} /> |
||||
<MilestoneStep |
||||
isActive={activeStep === 2} |
||||
isCompleted={activeStep > 2} |
||||
icon={Flag} |
||||
text={ |
||||
activeStep == 2 |
||||
? `${projectStatus.upvotes} / 5 upvotes` |
||||
: `5 upvotes` |
||||
} |
||||
/> |
||||
<StepperStepSeparator isActive={activeStep > 2} /> |
||||
<MilestoneStep |
||||
isActive={activeStep === 3} |
||||
isCompleted={activeStep > 3} |
||||
icon={Flag} |
||||
text={ |
||||
activeStep == 3 |
||||
? `${projectStatus.upvotes} / 10 upvotes` |
||||
: activeStep > 3 |
||||
? `${projectStatus.upvotes} upvotes` |
||||
: `10 upvotes` |
||||
} |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,51 @@ |
||||
import { Check, type LucideIcon } from 'lucide-react'; |
||||
|
||||
type StepperActionProps = { |
||||
isActive?: boolean; |
||||
isCompleted?: boolean; |
||||
onClick?: () => void; |
||||
icon: LucideIcon; |
||||
text: string; |
||||
number: number; |
||||
}; |
||||
|
||||
export function StepperAction(props: StepperActionProps) { |
||||
const { |
||||
isActive, |
||||
onClick = () => null, |
||||
isCompleted, |
||||
icon: DisplayIcon, |
||||
text, |
||||
number, |
||||
} = props; |
||||
|
||||
if (isActive) { |
||||
return ( |
||||
<button |
||||
onClick={onClick} |
||||
className="flex items-center gap-1.5 rounded-full bg-purple-600 py-1 pl-2 pr-2.5 text-sm text-white hover:bg-purple-700" |
||||
> |
||||
<DisplayIcon size={13} /> |
||||
<span>{text}</span> |
||||
</button> |
||||
); |
||||
} |
||||
|
||||
if (isCompleted) { |
||||
return ( |
||||
<span className="flex cursor-default items-center gap-1.5 text-sm font-medium text-green-600"> |
||||
<Check size={14} strokeWidth={3} /> |
||||
<span>{text}</span> |
||||
</span> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<span className="flex cursor-default items-center gap-1.5 text-sm text-gray-400"> |
||||
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-400/70 text-xs text-white"> |
||||
{number} |
||||
</span> |
||||
<span>{text}</span> |
||||
</span> |
||||
); |
||||
} |
||||
@ -0,0 +1,17 @@ |
||||
import { cn } from '../../../lib/classname.ts'; |
||||
|
||||
type StepperStepSeparatorProps = { |
||||
isActive: boolean; |
||||
}; |
||||
|
||||
export function StepperStepSeparator(props: StepperStepSeparatorProps) { |
||||
const { isActive } = props; |
||||
|
||||
return ( |
||||
<hr |
||||
className={cn('flex-grow hidden sm:flex border border-gray-300', { |
||||
'border-green-500': isActive, |
||||
})} |
||||
/> |
||||
); |
||||
} |
||||
@ -0,0 +1,44 @@ |
||||
import type { ReactNode } from 'react'; |
||||
import { cn } from '../../lib/classname.ts'; |
||||
import { CheckIcon, CircleDashed, Loader, Loader2, X } from 'lucide-react'; |
||||
import { Spinner } from '../ReactIcons/Spinner.tsx'; |
||||
|
||||
type SubmissionRequirementProps = { |
||||
status: 'pending' | 'success' | 'error'; |
||||
children: ReactNode; |
||||
isLoading?: boolean; |
||||
}; |
||||
|
||||
export function SubmissionRequirement(props: SubmissionRequirementProps) { |
||||
const { status, isLoading = false, children } = props; |
||||
|
||||
return ( |
||||
<div |
||||
className={cn(`flex items-center rounded-lg p-2 text-sm text-gray-900`, { |
||||
'bg-gray-200': status === 'pending', |
||||
'bg-green-200': status === 'success', |
||||
'bg-red-200': status === 'error', |
||||
})} |
||||
> |
||||
{!isLoading && ( |
||||
<> |
||||
{status === 'pending' ? ( |
||||
<CircleDashed className="h-4 w-4 flex-shrink-0 text-gray-400" /> |
||||
) : status === 'success' ? ( |
||||
<CheckIcon className="h-4 w-4 flex-shrink-0 text-green-800" /> |
||||
) : ( |
||||
<X className="h-4 w-4 flex-shrink-0 text-yellow-800" /> |
||||
)} |
||||
</> |
||||
)} |
||||
|
||||
{isLoading && ( |
||||
<Loader2 |
||||
className={'h-4 w-4 animate-spin text-gray-400'} |
||||
strokeWidth={3} |
||||
/> |
||||
)} |
||||
<span className="ml-2">{children}</span> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,299 @@ |
||||
import { CheckIcon, CopyIcon, X } from 'lucide-react'; |
||||
import { CheckIcon as ReactCheckIcon } from '../ReactIcons/CheckIcon.tsx'; |
||||
import { Modal } from '../Modal'; |
||||
import { type FormEvent, useState } from 'react'; |
||||
import { httpPost } from '../../lib/http'; |
||||
import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx'; |
||||
import { SubmissionRequirement } from './SubmissionRequirement.tsx'; |
||||
import { useCopyText } from '../../hooks/use-copy-text.ts'; |
||||
|
||||
type SubmitProjectResponse = { |
||||
repositoryUrl: string; |
||||
submittedAt: Date; |
||||
}; |
||||
|
||||
type VerificationChecksType = { |
||||
repositoryExists: 'pending' | 'success' | 'error'; |
||||
readmeExists: 'pending' | 'success' | 'error'; |
||||
projectUrlExists: 'pending' | 'success' | 'error'; |
||||
}; |
||||
|
||||
type SubmitProjectModalProps = { |
||||
onClose: () => void; |
||||
projectId: string; |
||||
repositoryUrl?: string; |
||||
onSubmit: (response: SubmitProjectResponse) => void; |
||||
}; |
||||
|
||||
export function SubmitProjectModal(props: SubmitProjectModalProps) { |
||||
const { |
||||
onClose, |
||||
projectId, |
||||
onSubmit, |
||||
repositoryUrl: defaultRepositoryUrl = '', |
||||
} = props; |
||||
|
||||
const { isCopied, copyText } = useCopyText(); |
||||
const [isLoading, setIsLoading] = useState(false); |
||||
const [error, setError] = useState(''); |
||||
const [successMessage, setSuccessMessage] = useState(''); |
||||
const [repoUrl, setRepoUrl] = useState(defaultRepositoryUrl); |
||||
const [verificationChecks, setVerificationChecks] = |
||||
useState<VerificationChecksType>({ |
||||
repositoryExists: defaultRepositoryUrl ? 'success' : 'pending', |
||||
readmeExists: defaultRepositoryUrl ? 'success' : 'pending', |
||||
projectUrlExists: defaultRepositoryUrl ? 'success' : 'pending', |
||||
}); |
||||
|
||||
const projectUrl = `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/projects/${projectId}`; |
||||
|
||||
const handleSubmit = async (e: FormEvent) => { |
||||
e.preventDefault(); |
||||
try { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'pending', |
||||
readmeExists: 'pending', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
setIsLoading(true); |
||||
setError(''); |
||||
setSuccessMessage(''); |
||||
|
||||
if (!repoUrl) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'error', |
||||
readmeExists: 'pending', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
throw new Error('Repository URL is required'); |
||||
} |
||||
|
||||
const repoUrlParts = repoUrl |
||||
.replace(/https?:\/\/(www\.)?github\.com/, '') |
||||
.split('/'); |
||||
const username = repoUrlParts[1]; |
||||
const repoName = repoUrlParts[2]; |
||||
|
||||
if (!username || !repoName) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'error', |
||||
readmeExists: 'pending', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
throw new Error('Invalid GitHub repository URL'); |
||||
} |
||||
|
||||
const mainApiUrl = `https://api.github.com/repos/${username}/${repoName}`; |
||||
|
||||
const allContentsUrl = `${mainApiUrl}/contents`; |
||||
const allContentsResponse = await fetch(allContentsUrl); |
||||
if (!allContentsResponse.ok) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'error', |
||||
readmeExists: 'pending', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
if (allContentsResponse?.status === 404) { |
||||
throw new Error( |
||||
'Repository not found. Make sure it exists and is public.', |
||||
); |
||||
} |
||||
|
||||
throw new Error('Failed to fetch repository contents'); |
||||
} |
||||
|
||||
const allContentsData = await allContentsResponse.json(); |
||||
if (!Array.isArray(allContentsData)) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'error', |
||||
readmeExists: 'pending', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
throw new Error('Failed to fetch repository contents'); |
||||
} |
||||
|
||||
const readmeFile = allContentsData.find( |
||||
(file) => file.name.toLowerCase() === 'readme.md', |
||||
); |
||||
if (!readmeFile || !readmeFile.url) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'success', |
||||
readmeExists: 'error', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
throw new Error('Readme file not found'); |
||||
} |
||||
|
||||
const readmeUrl = readmeFile.url; |
||||
const response = await fetch(readmeUrl); |
||||
if (!response.ok || response.status === 404) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'success', |
||||
readmeExists: 'error', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
throw new Error('Readme file not found'); |
||||
} |
||||
|
||||
const data = await response.json(); |
||||
if (!data.content) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'success', |
||||
readmeExists: 'error', |
||||
projectUrlExists: 'pending', |
||||
}); |
||||
|
||||
throw new Error('Readme file not found'); |
||||
} |
||||
|
||||
const readmeContent = window.atob(data.content); |
||||
if (!readmeContent.includes(projectUrl)) { |
||||
setVerificationChecks({ |
||||
repositoryExists: 'success', |
||||
readmeExists: 'success', |
||||
projectUrlExists: 'error', |
||||
}); |
||||
|
||||
throw new Error('Add the project page URL to the readme file'); |
||||
} |
||||
|
||||
setVerificationChecks({ |
||||
repositoryExists: 'success', |
||||
readmeExists: 'success', |
||||
projectUrlExists: 'success', |
||||
}); |
||||
|
||||
const submitProjectUrl = `${import.meta.env.PUBLIC_API_URL}/v1-submit-project/${projectId}`; |
||||
const { response: submitResponse, error } = |
||||
await httpPost<SubmitProjectResponse>(submitProjectUrl, { |
||||
repositoryUrl: repoUrl, |
||||
}); |
||||
|
||||
if (error || !submitResponse) { |
||||
throw new Error( |
||||
error?.message || 'Error submitting project. Please try again!', |
||||
); |
||||
} |
||||
|
||||
setSuccessMessage('Solution submitted successfully!'); |
||||
setIsLoading(false); |
||||
|
||||
onSubmit(submitResponse); |
||||
} catch (error: any) { |
||||
console.error(error); |
||||
setError(error?.message || 'Failed to verify repository'); |
||||
setIsLoading(false); |
||||
} |
||||
}; |
||||
|
||||
if (successMessage) { |
||||
return ( |
||||
<Modal onClose={onClose} bodyClassName="h-auto p-4"> |
||||
<div className="flex flex-col items-center justify-center gap-4 pb-10 pt-12"> |
||||
<ReactCheckIcon additionalClasses={'h-12 text-green-500 w-12'} /> |
||||
<p className="text-lg font-medium">{successMessage}</p> |
||||
</div> |
||||
</Modal> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<Modal onClose={onClose} bodyClassName="h-auto p-4"> |
||||
<h2 className="mb-2 flex items-center gap-2.5 text-xl font-semibold"> |
||||
<GitHubIcon className="h-6 w-6 text-black" /> Submit Solution URL |
||||
</h2> |
||||
<p className="text-sm text-gray-500"> |
||||
Submit the URL of your GitHub repository with the solution. |
||||
</p> |
||||
|
||||
<div className="my-4 flex flex-col gap-1"> |
||||
<SubmissionRequirement |
||||
isLoading={isLoading} |
||||
status={verificationChecks.repositoryExists} |
||||
> |
||||
URL must point to a public GitHub repository |
||||
</SubmissionRequirement> |
||||
<SubmissionRequirement |
||||
isLoading={isLoading} |
||||
status={verificationChecks.readmeExists} |
||||
> |
||||
Repository must contain a README file |
||||
</SubmissionRequirement> |
||||
<SubmissionRequirement |
||||
isLoading={isLoading} |
||||
status={verificationChecks.projectUrlExists} |
||||
> |
||||
README file must contain the{' '} |
||||
<button |
||||
className={ |
||||
'font-medium underline underline-offset-2 hover:text-purple-700' |
||||
} |
||||
onClick={() => { |
||||
copyText(projectUrl); |
||||
}} |
||||
> |
||||
{!isCopied && ( |
||||
<> |
||||
project URL{' '} |
||||
<CopyIcon |
||||
className="relative -top-0.5 inline-block h-3 w-3" |
||||
strokeWidth={2.5} |
||||
/> |
||||
</> |
||||
)} |
||||
{isCopied && ( |
||||
<> |
||||
copied URL{' '} |
||||
<CheckIcon |
||||
className="relative -top-0.5 inline-block h-3 w-3" |
||||
strokeWidth={2.5} |
||||
/> |
||||
</> |
||||
)} |
||||
</button> |
||||
</SubmissionRequirement> |
||||
</div> |
||||
|
||||
<form className="mt-4" onSubmit={handleSubmit}> |
||||
<input |
||||
type="text" |
||||
className="w-full rounded-lg border border-gray-300 p-2 text-sm focus:border-gray-500 focus:outline-none" |
||||
placeholder="https://github.com/you/solution-repo" |
||||
value={repoUrl} |
||||
onChange={(e) => setRepoUrl(e.target.value)} |
||||
/> |
||||
|
||||
<button |
||||
type="submit" |
||||
className="mt-2 w-full rounded-lg bg-black p-2 font-medium text-white disabled:opacity-50 text-sm" |
||||
disabled={isLoading} |
||||
> |
||||
{isLoading ? 'Verifying...' : 'Verify and Submit'} |
||||
</button> |
||||
{error && ( |
||||
<p className="mt-2 text-sm font-medium text-red-500">{error}</p> |
||||
)} |
||||
|
||||
{successMessage && ( |
||||
<p className="mt-2 text-sm font-medium text-green-500"> |
||||
{successMessage} |
||||
</p> |
||||
)} |
||||
</form> |
||||
|
||||
<button |
||||
className="absolute right-2.5 top-2.5 text-gray-600 hover:text-black" |
||||
onClick={onClose} |
||||
> |
||||
<X className="h-5 w-5" /> |
||||
</button> |
||||
</Modal> |
||||
); |
||||
} |
||||
@ -0,0 +1,35 @@ |
||||
import { cn } from '../../lib/classname.ts'; |
||||
import { type LucideIcon, ThumbsUp } from 'lucide-react'; |
||||
|
||||
type VoteButtonProps = { |
||||
icon: LucideIcon; |
||||
isActive: boolean; |
||||
count: number; |
||||
hideCount?: boolean; |
||||
onClick: () => void; |
||||
}; |
||||
export function VoteButton(props: VoteButtonProps) { |
||||
const { icon: VoteIcon, isActive, hideCount = false, count, onClick } = props; |
||||
return ( |
||||
<button |
||||
className={cn( |
||||
'flex gap-1 px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-black focus:outline-none', |
||||
{ |
||||
'bg-gray-100 text-orange-600 hover:text-orange-700': isActive, |
||||
'bg-transparent text-gray-500 hover:text-black': !isActive, |
||||
}, |
||||
)} |
||||
disabled={isActive} |
||||
onClick={onClick} |
||||
> |
||||
<VoteIcon className={cn('size-3.5 stroke-[2.5px]', { |
||||
'top-[1.5px] relative mr-0.5': hideCount |
||||
})} /> |
||||
{!hideCount && ( |
||||
<span className="relative -top-[0.5px] text-xs font-medium tabular-nums"> |
||||
{count} |
||||
</span> |
||||
)} |
||||
</button> |
||||
); |
||||
} |
||||
@ -0,0 +1,93 @@ |
||||
import { ChevronDown, Globe, Menu, Sparkles, Waypoints } from 'lucide-react'; |
||||
import { useEffect, useRef, useState } from 'react'; |
||||
import { useOutsideClick } from '../../hooks/use-outside-click'; |
||||
import { cn } from '../../lib/classname'; |
||||
import { |
||||
navigationDropdownOpen, |
||||
roadmapsDropdownOpen, |
||||
} from '../../stores/page.ts'; |
||||
import { useStore } from '@nanostores/react'; |
||||
|
||||
const links = [ |
||||
{ |
||||
link: '/roadmaps', |
||||
label: 'Official Roadmaps', |
||||
description: 'Made by subject matter experts', |
||||
Icon: Waypoints, |
||||
}, |
||||
{ |
||||
link: '/ai/explore', |
||||
label: 'AI Roadmaps', |
||||
description: 'Generate roadmaps with AI', |
||||
Icon: Sparkles, |
||||
}, |
||||
{ |
||||
link: '/community', |
||||
label: 'Community Roadmaps', |
||||
description: 'Made by community members', |
||||
Icon: Globe, |
||||
}, |
||||
]; |
||||
|
||||
export function RoadmapDropdownMenu() { |
||||
const dropdownRef = useRef<HTMLDivElement>(null); |
||||
|
||||
const $roadmapsDropdownOpen = useStore(roadmapsDropdownOpen); |
||||
const $navigationDropdownOpen = useStore(navigationDropdownOpen); |
||||
|
||||
useOutsideClick(dropdownRef, () => { |
||||
roadmapsDropdownOpen.set(false); |
||||
}); |
||||
|
||||
useEffect(() => { |
||||
if ($navigationDropdownOpen) { |
||||
roadmapsDropdownOpen.set(false); |
||||
} |
||||
}, [$navigationDropdownOpen]); |
||||
|
||||
return ( |
||||
<div className="relative flex items-center" ref={dropdownRef}> |
||||
<button |
||||
className={cn('text-gray-400 hover:text-white', { |
||||
'text-white': $roadmapsDropdownOpen, |
||||
})} |
||||
onClick={() => roadmapsDropdownOpen.set(true)} |
||||
onMouseOver={() => roadmapsDropdownOpen.set(true)} |
||||
aria-label="Open Navigation Dropdown" |
||||
aria-expanded={$roadmapsDropdownOpen} |
||||
> |
||||
Roadmaps{' '} |
||||
<ChevronDown className="inline-block h-3 w-3" strokeWidth={4} /> |
||||
</button> |
||||
<div |
||||
className={cn( |
||||
'pointer-events-none invisible absolute left-0 top-full z-[999] mt-2 w-48 min-w-[320px] -translate-y-1 rounded-lg bg-slate-800 py-2 opacity-0 shadow-2xl transition-all duration-100', |
||||
{ |
||||
'pointer-events-auto visible translate-y-2.5 opacity-100': |
||||
$roadmapsDropdownOpen, |
||||
}, |
||||
)} |
||||
role="menu" |
||||
> |
||||
{links.map((link) => ( |
||||
<a |
||||
href={link.link} |
||||
key={link.link} |
||||
className="group flex items-center gap-3 px-4 py-2.5 text-gray-400 transition-colors hover:bg-slate-700" |
||||
role="menuitem" |
||||
> |
||||
<span className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-slate-600 transition-colors group-hover:bg-slate-500 group-hover:text-slate-100"> |
||||
<link.Icon className="inline-block h-5 w-5" /> |
||||
</span> |
||||
<span className="flex flex-col"> |
||||
<span className="font-medium text-slate-300 transition-colors group-hover:text-slate-100"> |
||||
{link.label} |
||||
</span> |
||||
<span className="text-sm">{link.description}</span> |
||||
</span> |
||||
</a> |
||||
))} |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,84 @@ |
||||
--- |
||||
import { Swords } from 'lucide-react'; |
||||
--- |
||||
|
||||
<div class='flex flex-col'> |
||||
<div |
||||
class='-ml-[27.6px] mb-3 flex items-center text-sm leading-none text-gray-400' |
||||
> |
||||
<span class='h-3 w-3 rounded-full bg-black'></span> |
||||
<span class='h-[1px] w-[15px] bg-black'></span> |
||||
<h2 class='rounded-md border border-black bg-black px-3 py-2 text-white'> |
||||
Step 1 — Learn the absolute basics i.e. HTML and CSS |
||||
</h2> |
||||
</div> |
||||
|
||||
<p class='mb-2 text-sm text-gray-500'> |
||||
Purchase and watch one of the following <span class='font-medium text-black' |
||||
>premium courses</span |
||||
> |
||||
</p> |
||||
|
||||
<div class='rounded-lg border p-3'> |
||||
<ul class='flex flex-col gap-1 text-sm'> |
||||
<li> |
||||
<a href='#' class='group font-medium text-gray-800 hover:text-black'> |
||||
<span |
||||
class='mr-1.5 inline-block rounded bg-green-300 px-1.5 py-0.5 text-xs uppercase text-black no-underline' |
||||
> |
||||
Course |
||||
</span> |
||||
|
||||
<span class='underline underline-offset-1' |
||||
>HTML and CSS with Mosh</span |
||||
> |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href='#' class='group font-medium text-gray-800 hover:text-black'> |
||||
<span |
||||
class='mr-1.5 inline-block rounded bg-green-300 px-1.5 py-0.5 text-xs uppercase text-black no-underline' |
||||
> |
||||
Course |
||||
</span> |
||||
|
||||
<span class='underline underline-offset-1' |
||||
>Learn HTML with 50 Projects</span |
||||
> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<p class='mt-3 text-sm text-gray-500'> |
||||
Once done, build the <span class='font-medium text-black' |
||||
>following projects</span |
||||
> to test and practice your skills |
||||
</p> |
||||
|
||||
<div class='mt-3 flex flex-col gap-1'> |
||||
<a |
||||
href='/projects/task-tracker' |
||||
class='flex items-center gap-2 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300' |
||||
> |
||||
<Swords size='1.25em' className='text-gray-400' /> |
||||
Build a login page for a website. |
||||
</a> |
||||
|
||||
<a |
||||
href='/projects/task-tracker' |
||||
class='flex items-center gap-2 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300' |
||||
> |
||||
<Swords size='1.25em' className='text-gray-400' /> |
||||
Create a landing page for an e-commerce website. |
||||
</a> |
||||
|
||||
<a |
||||
href='/projects/task-tracker' |
||||
class='flex items-center gap-2 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300' |
||||
> |
||||
<Swords size='1.25em' className='text-gray-400' /> |
||||
Create a responsive website for a restaurant. |
||||
</a> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,29 @@ |
||||
--- |
||||
import { Flag } from 'lucide-react'; |
||||
--- |
||||
|
||||
<div class='flex flex-col'> |
||||
<p |
||||
class='-ml-[37px] mb-3 flex items-center text-sm leading-none text-gray-400' |
||||
> |
||||
<span |
||||
class='relative flex h-8 w-8 items-center justify-center rounded-full bg-green-600 text-white' |
||||
> |
||||
<Flag size='1.2em' /> |
||||
</span> |
||||
<span class='h-[2px] w-[4.5px] bg-green-600'></span> |
||||
<span |
||||
class='rounded-md border border-green-600 bg-green-600 px-3 py-2 text-white' |
||||
> |
||||
You are ready to apply for jobs |
||||
</span> |
||||
</p> |
||||
|
||||
<p class='mb-2 text-sm text-gray-500'> |
||||
At this point, you should have a solid understanding of basic front-end development concepts and be able to build simple websites. Start applying for jobs, while continuing to learn and improve your skills. |
||||
</p> |
||||
|
||||
<p class='mb-2 text-sm text-gray-500'> |
||||
You might have a difficult time finding a job at this stage, but don't get discouraged. Keep applying and improving your skills. You can also consider contributing to open-source projects to gain experience and build your portfolio. |
||||
</p> |
||||
</div> |
||||
@ -1,3 +1,5 @@ |
||||
# Backend Monitoring with Prometheus, Grafana, ELK Stack |
||||
|
||||
Efficiency and rate of performance are paramount for the backend processes in web applications. Utilizing performance monitoring tools such as Prometheus, Grafana, and the ELK Stack ensures that any issues impacting performance can be promptly identified and rectified. For example, Prometheus offers robust monitoring capabilities by collecting numeric time series data, presenting a detailed insight into the application's performance metrics. Grafana can visualize this data in an accessible, user-friendly way, helping developers to interpret complex statistics and notice trends or anomalies. Meanwhile, the ELK Stack (Elasticsearch, Logstash, Kibana) provides log management solutions, making it possible to search and analyze logs for indications of backend issues. By using these tools, developers can effectively keep backend performance at optimal levels, ensuring smoother user experiences. |
||||
|
||||
- [@video@Tutorial - Grafana Explained in 3 minutes](https://www.youtube.com/watch?v=X-GLqyMZaJk) |
||||
@ -1,3 +1,5 @@ |
||||
# Maintaining Updated Dependencies |
||||
|
||||
Keeping your dependencies up to date is crucial for optimizing backend performance in web applications. Regular updates bring new features, improvements, and important patches for security vulnerabilities that could harm the performance and security of your application. An outdated package, for example, may run inefficiently or even prevent other components from functioning at peak performance. This creates a ripple effect that could slow down or disrupt entire processes. Therefore, staying current with all updates enhances the robustness and operational efficiency, contributing to faster load times, better stability, and ultimately, an improved user experience. |
||||
|
||||
[@video@Tutorial - dependabot on GitHub](https://www.youtube.com/watch?v=TnBEVPUsuAw) |
||||
@ -0,0 +1,235 @@ |
||||
--- |
||||
title: 'Is DevOps engineering a good career path in @currentYear@?' |
||||
description: 'Learn why a DevOps career path is a smart choice in 2024. Get insights into demand, growth, and earning potential in DevOps.' |
||||
authorId: ekene |
||||
excludedBySlug: '/devops/career-path' |
||||
seo: |
||||
title: 'Is DevOps engineering a good career path in @currentYear@?' |
||||
description: 'Learn why a DevOps career path is a smart choice in 2024. Get insights into demand, growth, and earning potential in DevOps.' |
||||
ogImageUrl: 'https://assets.roadmap.sh/guest/devops-engineer-career-path-2h4r7.jpg' |
||||
isNew: true |
||||
type: 'textual' |
||||
date: 2024-08-20 |
||||
sitemap: |
||||
priority: 0.7 |
||||
changefreq: 'weekly' |
||||
tags: |
||||
- 'guide' |
||||
- 'textual-guide' |
||||
- 'guide-sitemap' |
||||
--- |
||||
|
||||
 |
||||
|
||||
Making career choices could be overwhelming for beginners and experienced software developers seeking to advance their skills. This could be due to several factors, such as the abundance of options, the numerous resources on the internet, the steep learning curves, and so on. |
||||
|
||||
However, before selecting a path, it is helpful to look at certain factors, such as your interests, strengths, and the future prospects of the career path, as these factors play a crucial role in determining your potential for success. |
||||
|
||||
[DevOps engineering](https://roadmap.sh/devops) is one of the most [in-demand and highest](https://uk.indeed.com/career-advice/career-development/software-engineering-jobs)[-](https://uk.indeed.com/career-advice/career-development/software-engineering-jobs)[paying roles](https://uk.indeed.com/career-advice/career-development/software-engineering-jobs) in the tech industry and, in recent times, has become the go-to choice for many people getting into tech and experienced tech professionals. |
||||
As a DevOps professional, you'll enjoy spectacular career growth filled with endless opportunities. |
||||
|
||||
The DevOps philosophy involves bringing developers and operation teams together to improve the software delivery process. |
||||
|
||||
This guide will detail DevOps and provide the necessary information to help you decide whether to pursue the Devops engineer career path and steps to ensure a DevOps career growth. |
||||
|
||||
## What is DevOps? |
||||
|
||||
Derived from the combination of development (Dev) and operations (Ops), DevOps is a software development methodology that aims to improve collaboration between development and operations teams, increase the efficiency, security, and speed of software development and delivery. |
||||
|
||||
 |
||||
|
||||
Within DevOps, you'll play an important part in the entire software development lifecycle - from initial planning to implementation. This means you'll be a team player with excellent communication skills. |
||||
|
||||
## Is DevOps engineer career path right for you? |
||||
|
||||
DevOps is a field that's here to stay. The DevOps market grew to an incredible $10.3 billion at the end of 2023 and it is growing. Hence, securing a DevOps role is your first step toward a long-lasting career. |
||||
|
||||
DevOps career paths are worth considering if you have experience in software development, networking, or operations. It involves automation, testing, monitoring, configuring, networking, and Infrastructure as Code (IaC) and requires a diverse skill set as discussed below. It is a bridge between development and operations teams. |
||||
|
||||
These are some factors to consider before choosing the DevOps engineer career path: |
||||
|
||||
- Interest in automation |
||||
- Enjoy collaborating |
||||
- Interest in infrastructure management |
||||
- Love for problem-solving |
||||
- Willingness to continuously learn new skills and technology |
||||
|
||||
### Interest in automation |
||||
|
||||
Automation is an integral part of the DevOps career path. It involves writing scripts and code to automate repetitive tasks and enhance software delivery processes. By automating repetitive tasks and workflows, DevOps teams can increase efficiency, reduce errors, and accelerate time to market for software releases. |
||||
|
||||
### Enjoy collaborating |
||||
|
||||
Collaboration is crucial in the DevOps career, as you will work with different people across several teams. The goal is to break down the silos across teams and ensure they all work together to achieve the same goal. Having great collaboration skills is crucial to being a DevOps engineer. |
||||
|
||||
### Interest in infrastructure management |
||||
|
||||
Do you enjoy working on infrastructural rather than domain code? The plus side of infrastructural code is that it can be replicated across several infrastructures once it is set up, and you can transfer the knowledge to other organizations instead of domain code, where you would always need to learn the domain of the business you are writing code for. |
||||
|
||||
### Love for problem-solving |
||||
|
||||
Choosing this field requires that you enjoy solving problems and can devise solutions to complex problems. |
||||
|
||||
### Willingness to continuously learn new skills and technology |
||||
|
||||
DevOps is an evolving field, and there is always something new. To be up to date, you have to be willing and open to continuous learning. This involves taking courses, reading articles, and getting updates on things happening in the DevOps field and tech. |
||||
|
||||
It is worth noting that working in DevOps involves working in high-pressure environments. You are constantly relied on to manage an organization's IT and new and existing cloud systems, which can sometimes be overwhelming. |
||||
|
||||
Also, there is a steep learning curve. As a tech beginner, it could be daunting and challenging to get into DevOps and adapt the DevOps culture, but as you go along, it gets easier. |
||||
|
||||
## DevOps in 2024 |
||||
|
||||
According to [Statista](https://www.statista.com/statistics/1367003/in-demand-it-roles/), DevOps software engineering positions are among the top technical positions demanded by recruiters worldwide in 2023. Indeed reported that the average annual salary of [DevOps engineer](https://www.indeed.com/career/development-operations-engineer/salaries?from=top_sb) in the USA is $124,392. |
||||
|
||||
DevOps has evolved over the last decade. Today, it is more than automating tasks and having engineers write scripts. It is now more about practices that can help to automate software delivery, improve business and the overall software development processes. |
||||
|
||||
Certain trends are impacting the DevOps market currently and will also play a role in the future of DevOps. Some of them include: |
||||
|
||||
- Microservices |
||||
- Cloud technology |
||||
- Automation and CI/CD |
||||
- Artificial Intelligence and Machine Learning |
||||
|
||||
Let's look at these trends and how they indirectly influence your decision. |
||||
|
||||
### Microservices |
||||
|
||||
This architecture enables the agile development and continuous delivery of software solutions. In a microservice architecture, applications are split into smaller parts known as microservices that focus on a single responsibility. Each part (microservice) is developed and deployed independently, and microservices communicate via events or API interfaces. |
||||
|
||||
It is a common trend, and many organizations are adopting this architecture because of its benefits, one of which is adapting to market changes and shipping out features faster rather than the delays of modular monoliths. A DevOps engineer is critical to helping in the adoption and success of microservices. |
||||
|
||||
### Cloud technology |
||||
|
||||
Cloud-native applications have become popular recently. They involve developing and deploying software applications and their dependencies in a cloud environment. |
||||
|
||||
There are several cloud platforms, some of the most popular ones being [AWS](https://roadmap.sh/aws), Microsoft Azure, and Google Cloud Platform (GCP). One advantage of using these cloud providers is that you don't have to manage the cloud infrastructure but instead focus on developing your applications. You also pay for only the resources you use. |
||||
|
||||
Containerization tools like [Docker](https://roadmap.sh/docker) and [Kubernetes](https://roadmap.sh/kubernetes) have been made popular by cloud services and microservices. These tools are part of the toolkit of DevOps engineers. |
||||
|
||||
### Automation and CI/CD |
||||
|
||||
Automation and continuous integration/continuous deployment are integral to DevOps. Organizations are widely adopting automation of their infrastructure and deployments because of its benefits including faster and more reliable application deployments. |
||||
|
||||
Also, with the adoption of GitOps, an operational framework that takes DevOps principles and best practices for application development and applies them to infrastructure automation, the deployment process is even more efficient. DevOps professionals are the major catalysts for this and will remain relevant. |
||||
|
||||
### Artificial intelligence and machine learning |
||||
|
||||
AI and ML have become integrated into our daily lives and automation tools are used to automate processes and routine tasks, monitor system health, and predict potential system issues. These AI tools need to be designed, maintained, and enhanced. |
||||
|
||||
In the AI and ML field, it is the job of an MLOps engineer, but a DevOps engineer can upskill and switch roles to an MLOps engineer. |
||||
|
||||
There is a concern that AI will replace DevOps professionals. However, I believe AI will complement the DevOps process, improve the software development lifecycle, and make better DevOps engineers. |
||||
|
||||
## Specializations in DevOps |
||||
|
||||
The DevOps career paths are rewarding and successful. The DevOps career also offers a lot of growth opportunities, and as you have seen in the previous section, it is in high demand. |
||||
|
||||
There are several DevOps career paths and devops career opportunities for both entry-level and experienced positions. Normally, working in DevOps starts with an entry-level position like a release manager or junior DevOps engineer. |
||||
|
||||
As a DevOps professional, you can decide to go for any of these following DevOps skills and specializations: |
||||
|
||||
- Automation expert |
||||
- General DevOps engineer |
||||
- System engineer |
||||
- DevOps erchitect |
||||
- DevOps release manager |
||||
- DevSecOps engineer |
||||
- DevOps test engineer |
||||
|
||||
### Automation expert |
||||
|
||||
In the DevOps career path, you can work as an automation expert or engineer, depending on the organization. You can specialize in implementing automation solutions, continuous improvement, and software delivery. As automation plays a critical role, every DevOps engineer should be familiar with the automation process. |
||||
|
||||
Automation experts specialize in implementing continuous integration (CI) and continuous delivery (CD) within the software lifecycle to boost the efficiency of development and operations teams. Additionally, they design and integrate monitoring, dashboard, and incident management tools like [Grafana](https://grafana.com/), [Loki](https://grafana.com/oss/loki/), and [Seq](https://datalust.co/seq). |
||||
|
||||
### General DevOps engineer |
||||
|
||||
This is one of the key DevOps career path. As a DevOps engineer, you work closely with developers and act as a bridge between other team members. You are involved in all aspects of the software development life cycle. You are also a bridge between operations and development teams. DevOps engineers need to be proficient with top DevOps automation tools and have knowledge of cloud platforms like AWS and Google Cloud. Usually a newbie in DevOps starts in this path as a junior DevOps engineer. |
||||
|
||||
### Systems engineer |
||||
|
||||
This is another DevOps career you can assume as you become a DevOps engineer. As a system engineer, you are responsible for designing, deploying, and maintaining an organization's IT infrastructure, including the hardware, software, networking, and operating systems. |
||||
|
||||
### DevOps architect |
||||
|
||||
In this DevOps career path, a DevOps architect is responsible for designing and implementing the overall DevOps architecture and processes in an organization. |
||||
|
||||
A DevOps architect is responsible for building the foundation upon which the entire process rests. The DevOps architect role is a more senior role than a DevOps engineer. |
||||
|
||||
A DevOps architect is like the contractor of the DevOps world and ensures consistency of agile principles across the DevOps process and work closely with other senior DevOps engineers and professionals to ensure these principles are followed. |
||||
|
||||
### DevOps release manager |
||||
|
||||
This is a DevOps career path where you are responsible for managing and overseeing software releases throughout the DevOps process. A DevOps release manager ensures software products are released on time, with high quality and reliability. |
||||
|
||||
### DevSecOps engineer |
||||
|
||||
DevSecOps stands for Development, Security and Operations. Such engineers design and implement secure architectures for software and infrastructure, manage vulnerabilities, and protect against security threats. |
||||
|
||||
DevSecOps engineers ensure that software applications and their supporting infrastructure are secure. |
||||
|
||||
### DevOps test engineer |
||||
|
||||
A DevOps test engineer is responsible for implementing tests to ensure software products are high-quality, reliable, and scalable. They oversee all stages of the testing process, such as designing automated testing frameworks, identifying and resolving issues, and certifying compliance with industry standards. |
||||
|
||||
Other DevOps roles include: |
||||
|
||||
- DevOps Cloud Engineer |
||||
- Lead DevOps Engineer |
||||
|
||||
## Skills required in DevOps |
||||
|
||||
DevOps engineers require both technical skills and soft skills, which may vary from organization to organization, as well as team structure, technologies, and tools. However, some common skills exist across the board. |
||||
|
||||
- Knowledge of coding and scripting |
||||
- In-depth knowledge of container and container orchestration |
||||
- Knowledge of logging and configuration management |
||||
- Understanding of system administration |
||||
- In-depth knowledge of version control systems |
||||
- Knowledge of continuous integration and continuous deployment (CI/CD) |
||||
- Collaboration skills |
||||
|
||||
### Knowledge of coding and scripting |
||||
|
||||
To build a DevOps career, you should know at least one programming language and be proficient in scripting to further automate tasks and processes that would be tedious and slow. You should also be familiar with software development principles. |
||||
|
||||
### In-depth knowledge of container and container orchestration |
||||
|
||||
With micro-services popularity, applications can be shipped in containers and deployed to the cloud. It is possible with the help of tools like [Docker](https://roadmap.sh/docker) and container orchestration tools like [Kubernetes](https://roadmap.sh/kubernetes). A DevOps cloud engineer must have extensive knowledge of these tools and how to use them. |
||||
|
||||
 |
||||
|
||||
### Knowledge of logging and configuration management tools |
||||
|
||||
Monitoring is one of the core DevOps processes. In the DevOps career path, you are expected to have a knowledge of monitoring and logging tools. A popular one used is [Grafana](https://grafana.com/). You should be comfortable working with configuration management tools, automation frameworks, and Linux environments. |
||||
|
||||
### Understanding of system administration |
||||
|
||||
A basic understanding of provisioning and managing servers, security monitoring, and networks is required in the DevOps career path. You will monitor the servers for security vulnerabilities and apply patches when necessary. |
||||
|
||||
### In-depth knowledge of version control systems and source code management |
||||
|
||||
Version control is one of the DevOps tools, and required technical skills that a DevOps engineer should have. One of the common Version Control Systems(VCS) out there is Git. |
||||
|
||||
### Knowledge of continuous integration and continuous deployment (CI/CD) |
||||
|
||||
A DevOps professional is required to have a deep understanding of CI/CD. CI/CD involves the design and implementation of software delivery pipelines. It enables faster software release cycles. Some key DevOps tools include [Jenkins](https://www.jenkins.io/), [Azure DevOps](https://azure.microsoft.com/de-de/products/devops), [CircleCI](https://circleci.com/), [BitBucket Pipelines](https://bitbucket.org/), [GitHub Actions](https://github.com/features/actions), etc. |
||||
|
||||
### Communication and Collaboration skills |
||||
|
||||
As a DevOps professional, be prepared to work closely with cross-functional development teams. You are expected to have good communication and collaboration skills to be an effective team member. You should be able to clearly communicate your ideas to other developers, end-users and stakeholders. |
||||
|
||||
## How can I start my DevOps career? |
||||
|
||||
The next question you might be asking is how do I start my career in [DevOps](https://roadmap.sh/devops). |
||||
You can begin your DevOps career by obtaining a bachelor's degree in computer science degree from a college. |
||||
|
||||
You can also obtain DevOps certification from certified DevOps trainers. One of the popular DevOps certifications is the AWS Certified DevOps Engineer. |
||||
|
||||
roadmap.sh offers step-by-step guidance on [how to become a DevOps engineer](https://roadmap.sh/devops/how-to-become-devops-engineer), and by signing up, you will be able to: |
||||
|
||||
- Keep track of your progress and also share it on your roadmap.sh profile. |
||||
- Collaborate on other official roadmaps. |
||||
- Draw your roadmap, either as an individual learner or for [Dev](https://roadmap.sh/teams) [t](https://roadmap.sh/teams)[eams](https://roadmap.sh/teams). |
||||
- [Generate new roadmaps with AI](https://roadmap.sh/ai). |
||||
@ -0,0 +1,309 @@ |
||||
--- |
||||
title: 'What is a DevOps Engineer? Responsbilities & Roles in @currentYear@' |
||||
description: 'Explore the responsibilities and roles of a DevOps Engineer in @currentYear@. Gain insights into the evolving field of DevOps and what it takes to succeed.' |
||||
authorId: ekene |
||||
excludedBySlug: '/devops/devops-engineer' |
||||
seo: |
||||
title: 'What is a DevOps Engineer? Responsbilities & Roles in @currentYear@' |
||||
description: 'Explore the responsibilities and roles of a DevOps Engineer in @currentYear@. Gain insights into the evolving field of DevOps and what it takes to succeed.' |
||||
ogImageUrl: 'https://assets.roadmap.sh/guest/what-is-devops-engineer-jort4.jpg' |
||||
isNew: true |
||||
type: 'textual' |
||||
date: 2024-08-15 |
||||
sitemap: |
||||
priority: 0.7 |
||||
changefreq: 'weekly' |
||||
tags: |
||||
- 'guide' |
||||
- 'textual-guide' |
||||
- 'guide-sitemap' |
||||
--- |
||||
|
||||
 |
||||
|
||||
Are you a developer monitoring recent changes in the ecosystem, looking to change careers or pick up new skills in 2024? If your choice is DevOps, you might be wondering what it entails, what it will take to become one in 2024, and how it is affected by the recent changes in the tech ecosystem. |
||||
|
||||
In recent years, the technology ecosystem has experienced a constant shift in the way hiring managers reach out, companies hire, and the roles and responsibilities described in job postings. Particularly, 2023 proved to be a challenging year as layoffs in the technology sector grew significantly, with more than [262,000 employees laid off across 1,180 firms](https://www.statista.com/statistics/199999/worldwide-tech-layoffs-covid-19/). |
||||
|
||||
Despite this change, DevOps, a field within the same ecosystem, has experienced continuous growth. In fact, the DevOps market size is expected to grow to [25.5 billion USD by 2028](https://www.marketsandmarkets.com/Market-Reports/devops-market-824.html#:~:text=The%20global%20DevOps%20market%20size,USD%2010.4%20billion%20in%202023.). This indicates that the roles and responsibilities of a DevOps engineer in the modern technology environment will evolve alongside this increasing demand. |
||||
|
||||
In this guide, we'll discuss the roles and responsibilities of a [DevOps engineer](https://roadmap.sh/devops), the importance of DevOps in teams, common roles within a DevOps team, and best practices for DevOps teams. Finally, the guide will offer roadmaps for your DevOps journey. |
||||
|
||||
A DevOps engineer's roles and responsibilities include: |
||||
|
||||
- Following best practices and utilizing Infrastructure as Code (IaC) tools to design, implement, and manage infrastructure. |
||||
|
||||
- Implementing and managing Continuous Integration and Continuous Delivery (CI/CD) pipelines to automate software and code releases. |
||||
|
||||
- Facilitating and promoting interpersonal skills between the development teams, operations teams, and other stakeholders to establish productivity and continuous improvement. |
||||
|
||||
- Implementing monitoring, logging, alerts, and dashboards to track the performance and health of applications and infrastructure. |
||||
|
||||
- Writing and maintaining scripts to automate tasks and DevOps processes. |
||||
|
||||
- Providing support and troubleshooting issues related to applications, systems, and infrastructure. |
||||
|
||||
- Efficiently manage and monitor cloud resources by implementing autoscaling and other cloud management techniques to maintain optimal performance. |
||||
|
||||
Let's look at the DevOps ecosystem in detail. |
||||
|
||||
## What is a DevOps engineer? |
||||
|
||||
A DevOps engineer is a professional whose primary purpose is to work at the intersection of software development and IT operations. Their main goal is to continuously deliver high-quality software, improve collaboration between teams, and shorten the Software Development Life Cycle (SDLC). |
||||
|
||||
DevOps engineers are responsible for maintaining the culture and practices that bridge the gap between the software development process (Dev) and IT operations (Ops). They promote the use of tools and other automation mechanisms to shorten the software delivery processes while maintaining high quality. |
||||
|
||||
DevOps engineers use various tools to automate and enhance their workflow, such as: |
||||
|
||||
- Docker |
||||
- Kubernetes |
||||
- Jenkins |
||||
- Version control systems |
||||
- Grafana |
||||
- Ansible |
||||
- Prometheus |
||||
|
||||
### Docker |
||||
|
||||
Docker is a containerization platform that allows developers to package applications and their dependencies into a lightweight and portable container that can run consistently in any environment. Docker streamlines the development process by making it easy to manage and scale applications |
||||
|
||||
 |
||||
|
||||
You can learn more details by exploring the [Docker roadmap](https://roadmap.sh/docker). |
||||
|
||||
### Kubernetes |
||||
|
||||
Kubernetes is a container orchestration platform for automating, deploying, and scaling containerized applications. It offers numerous benefits, including cluster management, high availability, load balancing, and resource management. |
||||
|
||||
 |
||||
|
||||
You can learn more details by exploring the [Kubernetes roadmap](https://roadmap.sh/kubernetes). |
||||
|
||||
### Jenkins |
||||
|
||||
Jenkins is an open-source automation tool for automating CI/CD processes. It gives developers the flexibility to build, test, and deploy applications. Jenkins' ecosystem and seamless integration with various tools make it ideal for automating DevOps workflow. |
||||
|
||||
 |
||||
|
||||
### Version control systems |
||||
|
||||
Version control systems allow developers to track, revise, manage branches, and merge codes seamlessly. Examples include Git, Mercurial, and Subversion, with popular platforms like GitHub and Bitbucket providing integration support. |
||||
|
||||
 |
||||
|
||||
### Grafana |
||||
|
||||
Grafana is an analytic and monitoring platform for visualizing metrics, logs, and other critical data. It helps DevOps engineers monitor the real-time health and performance of applications and systems. |
||||
|
||||
 |
||||
|
||||
### Ansible |
||||
|
||||
Ansible is an automation tool for configuring application management, deployment, and other automation tasks. It uses a YAML syntax to define automation workflow, reducing the time required for repetitive tasks. |
||||
|
||||
 |
||||
|
||||
### Prometheus |
||||
|
||||
Prometheus is a monitoring and alerting tool that collects metrics from applications and infrastructure. It stores these metrics in a time-series database, allowing for querying and visualization to detect potential issues. |
||||
|
||||
 |
||||
|
||||
## What are the responsibilities of a DevOps engineer? |
||||
|
||||
DevOps engineers wear multiple hats to perform their day-to-day tasks. They possess technical skills in the software development lifecycle and operations skills for maintenance, and they are responsible for bridging the gap and fostering collaboration between development and other stakeholders. |
||||
|
||||
DevOps engineer responsibilities include: |
||||
|
||||
- Infrastructure management |
||||
- Setting up and maintaining CI/CD pipelines |
||||
- Working closely with others and keeping communication flowing |
||||
- Keeping an eye on things by monitoring and logging |
||||
- Automating toil |
||||
- Handling deployments and managing cloud services |
||||
- Optimizing performance |
||||
- Software development and scripting |
||||
- Managing resources efficiently |
||||
- Supporting developers and troubleshooting issues |
||||
- Ensuring security across the infrastructure |
||||
|
||||
 |
||||
|
||||
Now, let's look at these points in detail. |
||||
|
||||
### Infrastructure management |
||||
|
||||
A key responsibility of a DevOps engineer is to ensure the design, implementation, and management of a robust and scalable infrastructure. They use Infrastructure as Code (IaC) tools like Terraform or Ansible to automate infrastructure provisioning and configuration management. |
||||
|
||||
### CI/CD pipelines |
||||
|
||||
In the SDLC, new features, patches, and fixes are frequently deployed to meet customers' needs. To facilitate this, a DevOps engineer must set up a CI/CD pipeline to automate the testing environment and software releases, ensuring seamless integration and a smooth deployment process. |
||||
|
||||
 |
||||
|
||||
### Collaboration and communication |
||||
|
||||
DevOps engineer skills are essential for fostering an efficient and collaborative work environment. DevOps engineers champion clear communication (both oral and written) between project stakeholders. They believe in active communication and collaboration between the development team and other project stakeholders to ensure productivity, shared responsibilities, and continuous improvement. |
||||
|
||||
 |
||||
|
||||
### Automation |
||||
|
||||
One of the essential DevOps principles is automating manual and repetitive tasks. A DevOps engineer uses DevOps automation tools like Puppet or SaltStack to improve efficiency and reduce human error during deployment processes, scaling, and other operational tasks. |
||||
|
||||
 |
||||
|
||||
### Deployment and cloud management |
||||
|
||||
DevOps engineers use containers and orchestration platforms like Docker and Kubernetes to facilitate efficient deployment, scaling, and management, whether in on-premise environments or cloud services like [Amazon Web Services (AWS),](https://roadmap.sh/aws) Microsoft Azure, or Google Cloud Platform. |
||||
|
||||
 |
||||
|
||||
### Performance optimization |
||||
|
||||
A key responsibility of a DevOps engineer is to set up mechanisms to constantly audit systems, analyze performance, and implement load and stress testing. This guarantees that applications can handle high demand and spikes in traffic. |
||||
|
||||
### Software development and scripting |
||||
|
||||
While the DevOps ecosystem offers both paid and open-source tools to help streamline responsibilities, there are times when custom-made tools or extensions of existing tools are required. A good understanding of software development processes and scripting languages like [Python](https://roadmap.sh/python), [Go](https://roadmap.sh/golang), or [JavaScript (Node.js)](https://roadmap.sh/nodejs) helps a DevOps engineer build solutions for such specific business edge cases. |
||||
|
||||
### Resource management |
||||
|
||||
In a DevOps engineer role, engineers ensure that the resources allocated to a system can perform effectively during both slow and peak periods. This involves implementing autoscaling, monitoring resource usage, considering future capacity needs, and utilizing other resource configuration management tools. |
||||
|
||||
### Developer support and troubleshooting |
||||
|
||||
An integral part of DevOps methodology is ensuring that development and operational teams are supported by troubleshooting issues related to applications, infrastructures, and other systems. Additionally, DevOps professionals create documentation, guides, and other helpful resources to enhance the knowledge base. This guarantees that both experienced team members and new joiners can leverage these resources for debugging, troubleshooting, or research purposes. |
||||
|
||||
### Security |
||||
|
||||
A growing part of the DevOps ecosystem is Development, Security, and Operations (DevSecOps). This practice involves automating security and best practices into every phase of the SDLC to ensure compliance with industry standards, effective resource identity and access management, and more. A good understanding of DevSecOps is an essential skill for experienced DevOps engineers. |
||||
|
||||
## What is the importance of DevOps in an organization? |
||||
|
||||
DevOps is gaining massive adoption because organizations are shifting away from traditional software development and resource provisioning approaches that are slow, prone to human error, and siloed. They want to deliver fast, reliable, and scalable applications, which the traditional approach lacks. |
||||
|
||||
Some of the ways DevOps can benefit an organization include: |
||||
|
||||
- Improving collaboration and shared responsibilities among project stakeholders. |
||||
- Enhancing software quality with automated testing and continuous feedback loops. |
||||
- Speeding up software delivery by promoting communication and collaboration between cross-functional teams. |
||||
- Supporting career development through a DevOps culture of experimentation and learning new DevOps skills. |
||||
- Providing a better customer experience because applications are thoroughly tested before going live. |
||||
- Reducing risk associated with software development and deployment using CI/CD principles. |
||||
- Encouraging knowledge sharing and flexibility to experiment, helping teams learn a wide range of skills and technologies. |
||||
|
||||
Organizations practicing or willing to adopt DevOps must be prepared for a cultural shift, continuous improvement, and investment in automation tools. Although it may be a lot at times, the benefits are worth the investment. |
||||
|
||||
## Common roles within the DevOps ecosystem |
||||
|
||||
The recent growth in the DevOps ecosystem has led to newer DevOps roles. While most jobs categorize these roles under the umbrella term "DevOps Engineer," which may work for small organizations, it becomes an issue in medium to larger organizations with diverse project goals and other factors. While these roles share similarities and sometimes overlap in responsibilities, it is important to understand the different aspects they tackle. The diagram below shows the crucial roles in the DevOps lifecycle. |
||||
|
||||
 |
||||
|
||||
### Site Reliability engineers (SRE) |
||||
|
||||
SRE focuses on system reliability, scalability, and performance. Their skills involve combining software engineering and systems administration. |
||||
|
||||
**Key Responsibilities** |
||||
|
||||
- Implements monitoring and alerting systems. |
||||
- Ensures the system is reliable, performant, and scalable. |
||||
- Analyze incidents to detect them and implement preventive measures. |
||||
|
||||
**Required skills** |
||||
|
||||
- Proficiency in using automation and infrastructure as code tools. |
||||
- Problem-solving and troubleshooting skills. |
||||
- Experience with alerting and monitoring tools like Prometheus and Grafana. |
||||
|
||||
### Cloud engineers |
||||
|
||||
Cloud engineers are responsible for designing and implementing cloud-native solutions. They also manage cloud technologies and infrastructure like AWS, Azure, or Google Cloud to guarantee efficient resource usage and cost-effectiveness. |
||||
|
||||
**Key Responsibilities** |
||||
|
||||
- Design and manage cloud infrastructure. |
||||
- Monitor and optimize cloud resources and associated costs. |
||||
- Ensure compliance and security of cloud resources. |
||||
|
||||
**Required skills** |
||||
|
||||
- Expertise in using popular cloud providers like AWS, Azure, and GCP. |
||||
- Proficiency in using automation tools like Terraform and CloudFormation. |
||||
- Knowledge of cloud security and compliance |
||||
|
||||
### Automation engineers |
||||
|
||||
Automation engineers are responsible for identifying tasks that can be automated across development and operations. They develop scripts and DevOps tools to automate repetitive tasks and integrate them into CI/CD pipelines. |
||||
|
||||
**Key Responsibilities** |
||||
|
||||
- Review, design, and implement automation strategies across the software development lifecycle. |
||||
- Ensures consistency and reliability of automated processes. |
||||
- Stay up-to-date with the latest automation tools and technologies. |
||||
|
||||
**Required skills** |
||||
|
||||
- Proficiency in scripting and programming languages. |
||||
- Expertise in automation tools and frameworks like Jenkins and GitHub Action. |
||||
|
||||
### Build engineers |
||||
|
||||
Build engineers are responsible for managing build systems and tools, troubleshooting build failures, optimizing build performance, and integrating builds into the CI/CD pipelines. |
||||
|
||||
**Key Responsibilities** |
||||
|
||||
- Manage and maintain build systems and tools. |
||||
- Ensures builds are consistent and replicable across environments. |
||||
- Automate the build process. |
||||
|
||||
**Required skills** |
||||
|
||||
- Knowledge of CI/CD tools and version control systems. |
||||
- Proficiency in build tools. |
||||
- Strong problem-solving and debugging skills. |
||||
|
||||
### Release engineers |
||||
|
||||
Release engineers are responsible for planning, scheduling, and coordinating the software release process for testing, sandbox, or production environments. |
||||
|
||||
**Key Responsibilities** |
||||
|
||||
- Plan and manage the release of new software, software updates, and new features. |
||||
- Maintain release schedules and project release timelines. |
||||
|
||||
**Required skills** |
||||
|
||||
- Knowledge of CI/CD tools and version control systems. |
||||
- Project management and organization skills. |
||||
- Strong communication and coordination skills |
||||
|
||||
### Security engineers |
||||
|
||||
Security engineers are responsible for integrating security and best practices into the DevOps pipeline. Additionally, they collaborate with development and operations teams to conduct security assessments, vulnerability scans, and compliance checks. |
||||
|
||||
**Key Responsibilities** |
||||
|
||||
- Implement and manage security tools and technologies. |
||||
- Integrate DevSecOps into the software development lifecycle. |
||||
- Document security best practices and ensure compliance with policies and regulations. |
||||
|
||||
**Required skills** |
||||
|
||||
- Knowledge of security best practices and frameworks |
||||
- Familiarity with identity and access management systems |
||||
|
||||
## Best practices for DevOps teams |
||||
|
||||
To achieve success as a team practicing or intending to adopt DevOps practices, you need a combination of the right tools, best practices, and a cultural shift. Here are some tips and best DevOps practices for teams: |
||||
|
||||
- Encourage Continuous Integration (CI) and Continuous Deployment (CD) by having software developers commit code frequently, automating builds, and providing timely feedback between teams. |
||||
- Embrace IaC to maintain consistency across testing, production, and other environments. |
||||
- Implement logging, alerts, and monitoring across systems. |
||||
- Ensure unit tests, integration tests, and end-to-end tests to validate the quality of software. |
||||
- Promote soft skills, feedback loops, post-mortem audits, retrospectives, and a continuous learning culture. |
||||
- Set clear metrics and Key Performance Indicators (KPIs) to easily identify areas needing improvement. |
||||
- Ensure effective collaboration and shared responsibilities between development, operations, QAs, and other teams. |
||||
|
||||
In summary, DevOps is growing and will continue to expand, bringing about even more DevOps roles and responsibilities for engineers in the ecosystem. The roadmap.sh’s [DevOps roadmap](https://roadmap.sh/devops) is a valuable resource that can help you stay updated on these changes. Additionally, you can track your learning path and connect with a vibrant community by [signing up](https://roadmap.sh/signup) on the roadmap.sh platform. |
||||
@ -0,0 +1,306 @@ |
||||
--- |
||||
title: 'How to Become a Front-End Developer in 7 Steps' |
||||
description: 'Learn how to become a front-end developer in 7 clear steps. Start your coding journey with practical tips and resources today!' |
||||
authorId: kamran |
||||
excludedBySlug: '/frontend/how-to-become-frontend-developer' |
||||
seo: |
||||
title: 'How to become a Front-End Developer in 7 Steps' |
||||
description: 'Learn how to become a front-end developer in 7 clear steps. Start your coding journey with practical tips and resources today!' |
||||
ogImageUrl: 'https://assets.roadmap.sh/guest/how-to-become-frontend-developer-i23nx.jpg' |
||||
isNew: true |
||||
type: 'textual' |
||||
date: 2024-08-15 |
||||
sitemap: |
||||
priority: 0.7 |
||||
changefreq: 'weekly' |
||||
tags: |
||||
- 'guide' |
||||
- 'textual-guide' |
||||
- 'guide-sitemap' |
||||
--- |
||||
|
||||
 |
||||
|
||||
Front-end developers **(also referred to as front-end engineers or client-side developers)** create the user interface (UI) and user experience (UX) of web pages and web applications. Using HTML, CSS, and JavaScript, they transform static designs into functional web pages. They create interactive and visual elements that users interact with directly, including buttons, forms, and navigation menus. |
||||
|
||||
[Front-end developers](https://roadmap.sh/frontend) are a crucial part of any team. They ensure that websites are user-friendly, load fast, and rank high on search engines. So, companies seek skilled front-end developers who can create dynamic and responsive websites. |
||||
|
||||
However, becoming a front-end developer isn't just about jumping straight into coding. It's a deliberate process that involves following specific steps. |
||||
|
||||
**TL;DR**: Become a front-end developer in 7 steps: |
||||
|
||||
- **Step 1**: Learn web development fundamentals. |
||||
- **Step 2**: Practice building projects. |
||||
- **Step 3**: Learn the version control systems and the command line. |
||||
- **Step 4**: Learn front-end frameworks and libraries. |
||||
- **Step 5**: Study the accessibility and responsive design principles |
||||
- **Step 6:** Join online communities and attend events. |
||||
- **Step 7**: Build a portfolio and apply for jobs. |
||||
|
||||
The above steps will give you the skills to become a proficient front-end developer. This guide will provide a deep dive into the steps and benefits of working in a front-end position. |
||||
|
||||
## Benefits of pursuing a career in front-end development |
||||
|
||||
The job market requires skilled professionals to create dynamic websites and web applications. This demand makes front-end development a role filled with numerous career opportunities. |
||||
|
||||
Some of the benefits of pursuing a career in front-end development include: |
||||
|
||||
- High demand and employment stability. |
||||
- Flexible career. |
||||
- Competitive earning potential. |
||||
|
||||
### High demand and employment stability |
||||
|
||||
Front-end development is a highly sought-after skill set in the tech industry. The demand isn't limited to a particular sector; it extends to healthcare, e-commerce, gaming, etc., making it a lucrative career choice. |
||||
|
||||
 |
||||
|
||||
[BLS (Bureau of Labor Statistics)](https://www.bls.gov/ooh/computer-and-information-technology/web-developers.htm) projects a 16% increase in web developer jobs from 2022 to 2032. This rate exceeds the average for all other jobs by a significant margin. So, there will always be a need for front-end developers, which means job security and a steady career path. |
||||
|
||||
### Flexible career |
||||
|
||||
The front-end development field offers many benefits, one of which is flexibility. You can work as a freelancer, remotely, or in a hybrid role – whatever works best for you! Or, if you prefer, you can go with a more traditional office setup. This flexibility gives you the power to: |
||||
|
||||
- Work from anywhere on the planet as long as you can access the Internet. |
||||
- Find projects and clients that align with your interests and goals. |
||||
- Connect with global teams and build your professional network. |
||||
|
||||
### Competitive earning potential |
||||
|
||||
Front-end development provides a financially rewarding career path with competitive salaries. As per Glassdoor, front-end developers make an average salary of $85,432 in the United States. |
||||
|
||||
 |
||||
|
||||
However, how much you earn can depend on your experience, the size of the company, and where you're looking for a job. |
||||
|
||||
## Become a front-end developer in 7 steps |
||||
 |
||||
|
||||
The number of online resources available to learn front-end development can be overwhelming. It's hard for aspiring front-end developers to know where to start. However, roadmap.sh provides a clear step-by-step [front-end roadmap](https://roadmap.sh/frontend) to help you learn. |
||||
|
||||
The guide breaks it down so you don't have to guess and gives you all you need to learn front-end development. The steps below present a concise version of the front-end roadmap. |
||||
|
||||
### Step 1: Learn web development fundamentals |
||||
|
||||
 |
||||
|
||||
The first step toward becoming a front-end developer is to learn the fundamentals. These are the foundations for everything you create on the web. |
||||
|
||||
It involves learning: |
||||
|
||||
- **HTML (Hyper Text Markup Language)**: For structuring the content on a webpage. HTML is the blueprint or skeletal structure of a website. It defines the different elements of websites, like headings, paragraphs, and images. |
||||
- **CSS (Cascading Style Sheets):** For styling the content on a webpage. It is a styling language that controls the layout and appearance of HTML-based web pages. With CSS, you can add colors, fonts, and more to your web pages. |
||||
- **JavaScript**: [JavaScript](https://roadmap.sh/javascript) adds interactivity and functionality to web pages. It is a programming language that makes HTML and CSS static websites functional. Thanks to JavaScript, web pages can respond to user actions. For example, you can achieve your desired outcome when you click a button or submit a form on a website. |
||||
|
||||
Building beautiful websites and applications begins with learning HTML, CSS, and JavaScript. It gives you many job options in web development and lets you create your own website! |
||||
|
||||
### Step 2: Practice building projects |
||||
|
||||
Coding is like playing video games: you have to put in a lot of practice to become proficient. So, don't just watch or read tutorials about coding concepts daily–apply them! It will improve your programming skills. If all you do is learn without practicing, you will be an expert in theory but an amateur in practice. |
||||
|
||||
Write code regularly and work on building projects, no matter how small. Follow a learning, practicing, and repetition cycle to enhance your skills. As you work on small projects, you'll gain experience with HTML, CSS, and JavaScript. |
||||
|
||||
Some ways to practice building projects include: |
||||
|
||||
- **Personal projects**: Build projects that address a problem or individual needs. These include tribute pages, calculators, or to-do list applications. |
||||
- Join a technical team or find a coding partner to work on a project together. |
||||
- **Project work**: Work on a client project or contribute to open-source projects on GitHub. It will allow you to learn from others, contribute to existing code, and connect with new people. |
||||
- **Code challenges**: Participate in code challenges on platforms like [HackerRank](https://www.hackerrank.com/) and [LeetCode](https://leetcode.com/). These sites provide various exercises for practicing [front-end and building websites](https://cesscode.hashnode.dev/resources-to-help-you-practice-web-development). |
||||
|
||||
As you practice coding consistently, you will face a lot of issues. The more problems you solve, the better you become. |
||||
|
||||
### Step 3: Learn the version control systems and the command line. |
||||
|
||||
As a front-end developer, learning version control systems **(VCS)** and the command line is vital. They make it easier for you to: |
||||
|
||||
- Track and manage source code modifications. |
||||
- Work with others on the same project. |
||||
- Streamline your workflow and automate tasks. |
||||
|
||||
 |
||||
|
||||
Examples of version control systems include Git **(e.g., GitHub, GitLab, Bitbucket).** Git enables you to: |
||||
|
||||
- Create and manage repositories |
||||
- Create branches and merge code |
||||
- Commit changes and track source code revisions |
||||
|
||||
When you become skilled at using Git, you'll work and deploy projects faster. This documentation provides a detailed guide to help you learn everything you need to know about [Git](https://github.com/git-guides). |
||||
|
||||
### Step 4: Learn front-end frameworks and libraries |
||||
|
||||
Learning front-end frameworks and libraries is essential for a front-end developer. It will make your job easier and help you build faster websites and applications. |
||||
|
||||
 |
||||
|
||||
Examples of front-end development frameworks and libraries include: |
||||
|
||||
- **CSS libraries**: CSS libraries are pre-designed CSS templates for styling websites and applications. They provide ready-made design solutions, such as responsive layouts and button styling. Examples of CSS libraries are Bootstrap and TailwindCSS. They help you to work faster, keep your design consistent, and not write too much CSS code from scratch. |
||||
- **JavaScript frameworks:** JavaScript frameworks are more extensive collections of code. They are building blocks for creating web applications and providing structure and functionality. Their pre-defined structure quickens development for creating complex web applications. Popular JavaScript frameworks include [Angular](https://roadmap.sh/angular) and [Vue.js](https://roadmap.sh/vue). |
||||
- **JavaScript libraries:** JavaScript libraries are similar to CSS libraries. Examples of JavaScript libraries are Chart.js and [React](https://roadmap.sh/react). They offer pre-built functions for performing tasks like DOM manipulation and event handling. |
||||
|
||||
Before learning a front-end framework or library, ensure you understand HTML, CSS, and JavaScript. It will give you an in-depth understanding of how frameworks and libraries work. |
||||
|
||||
### Step 5: Study the accessibility and responsive design principles |
||||
|
||||
Becoming an expert frontend developer requires understanding accessibility and responsive design principles. These principles ensure that everyone can use your website and that it looks good on all devices. |
||||
|
||||
Responsive design involves creating websites that are: |
||||
|
||||
- Adaptable to several screen sizes and devices, e.g., laptops, tablets, and smartphones. |
||||
- Able to deliver the best possible user experience on various devices. |
||||
|
||||
Accessible design involves creating websites that are: |
||||
|
||||
- Usable by a wide range of users, including users with disabilities. |
||||
- Following guidelines and standards of accessibility. |
||||
|
||||
Understanding these principles demonstrates your commitment to best practices for front-end development. As a result, you become a better front-end developer and more job-ready. |
||||
|
||||
### Step 6: Join developer communities and attend events |
||||
|
||||
Attending developer events and joining a community is essential for aspiring front-end developers. The best part? You can join in from your work desk **(online)** or look for events nearby **(offline)** that work with your plans. These include conferences, meet-ups, and online forums like the [roadmap community.](https://discord.com/invite/cJpEt5Qbwa) |
||||
|
||||
By joining a developer community and attending tech events, you'll: |
||||
|
||||
- Become part of a supportive community. |
||||
- Get access to resources and tools that can help simplify your development process. |
||||
- Participate in workshops and sessions that will expand your skills. |
||||
- Connect with colleagues to learn about new opportunities. |
||||
|
||||
### Step 7: Build a portfolio and apply for jobs |
||||
|
||||
The final step in becoming a front-end developer is to build an online portfolio and apply for jobs. Portfolios are visual representations of your skills, and they should include: |
||||
|
||||
- Real-world projects that showcase your skills in HTML, CSS, JavaScript, React and more. These projects could include anything from basic websites to complex web applications. However, it's advisable to include complex projects like an e-commerce application. |
||||
- Open source contributions code. |
||||
- Code examples to demonstrate your problem-solving skills. |
||||
|
||||
Once you've built a solid portfolio, it's time to apply for a front-end developer job. This process includes writing a cover letter and resume and preparing for interviews. This roadmap.sh guide will help you prepare for these interviews: [Top](https://roadmap.sh/questions/frontend) [Front End Developer Interview Questions](https://roadmap.sh/questions/frontend). |
||||
|
||||
But remember, front-end development is a continuous learning process. So, it's essential to keep learning during and after a job search to keep up with new tools and trends. |
||||
|
||||
## Responsibilities of a front-end developer |
||||
|
||||
Now that you've taken the steps to become a front-end developer, it's time to dive into the heart of the role. |
||||
|
||||
 |
||||
|
||||
Creating an effective website involves managing various responsibilities as a front-end developer, such as: |
||||
|
||||
- Collaboration with other teams. |
||||
- Building user interfaces. |
||||
- Responsiveness and cross-browser compatibility. |
||||
- Implementing website functionality and interactivity. |
||||
|
||||
### Collaboration with other teams |
||||
|
||||
 |
||||
|
||||
Front-end development is usually not done alone. It is a team effort! It involves everyone working together and communicating well to ensure a successful project. As a front-end developer, you will work with several teams, such as: |
||||
|
||||
- **Back-end developers**: [Back-end developers](https://roadmap.sh/backend) build the server side of websites and web applications. They handle many functionalities you don't see on a website or web application. These functionalities include developing APIs **(application program interfaces)** and managing server-side logic. Front-end and back-end developers collaborate to create a functional and secure website. |
||||
- **UI designers**: UI designers create the visual elements of websites and applications. They design the color scheme, layout, and interactive elements like buttons. Front-end developers collaborate with UI designers to understand the design requirements. They use their technical skills to turn these designs into functional, interactive websites. |
||||
|
||||
### Building user interfaces |
||||
|
||||
The responsibility of creating user interfaces (UIs) falls to front-end developers. Building UIs begins after the front-end developer understands the design requirements. It involves transforming design concepts into functional and interactive websites. |
||||
|
||||
The processes involved in building UIs include: |
||||
|
||||
- Writing clean, maintainable, and efficient code. |
||||
- **Accessibility and performance optimization**: Front-end developers must prioritize accessibility. All users, including users with disabilities, must be able to access the UI. They must consider color contrast, keyboard navigation, and other accessibility features. Also, they should optimize performance by using lazy loading methods for fast-load times. |
||||
- **Testing and iteration.** Testing the UI for bugs and usability issues is essential. It ensures the interface is easy to use and meets the desired quality. |
||||
|
||||
### Responsiveness and cross-browser compatibility |
||||
|
||||
Front-end developers are responsible for ensuring project responsiveness and cross-browser compatibility. It often takes place when building user interfaces. |
||||
|
||||
This process involves building a website and web application that: |
||||
|
||||
- Adjust to various devices and screen sizes **(responsive web design)**. |
||||
- Function consistently in different web browsers, like Chrome and Firefox **(cross-browser compatibility)**. |
||||
|
||||
### Implementing website functionality and interactivity |
||||
|
||||
Front-end developers are responsible for implementing website functionality and interactivity. This step often follows the designer's completion of the user interface layout. The process involves making user-friendly UIs that boost user experience and engagement. |
||||
|
||||
It involves several steps, like: |
||||
|
||||
- Writing JavaScript code to create interactive features. These interactive features include: |
||||
- Form validation - To check if the web user fills the form fields correctly. |
||||
- Interactive elements like image sliders, clickable buttons, and dropdown menus. |
||||
|
||||
- Using CSS animations or JavaScript transitions for interactive responses. These transitions and animations include: |
||||
- Smooth scrolling animations for a better browsing experience. |
||||
- Animated dropdown menus for easy-to-use web navigation. |
||||
|
||||
## Frequently asked questions (FAQ): Becoming a front-end developer |
||||
 |
||||
|
||||
The process of becoming a front-end developer may pose some questions to you. The following are some answers to common questions to get you started: |
||||
|
||||
### Do I need any prior knowledge to start learning front-end development? |
||||
|
||||
No, learning front-end development does not require any prior knowledge. But it's good to have a basic idea of how computers and the internet work. [roadmap.sh](http://roadmap.sh) provides a clear step-by-step [front-end roadmap](https://roadmap.sh/frontend) to help you get started. |
||||
|
||||
### Is a degree in Computer Science necessary to become a front-end developer? |
||||
|
||||
Nope, you don't need a Computer Science degree. Many front-end developers are self-taught and have learned through online resources. An impressive portfolio is the key to demonstrating your front-end development skills. |
||||
|
||||
### Which languages should I study to learn front-end development? |
||||
|
||||
The following are the main coding languages used in front-end development: |
||||
|
||||
- **HTML (Hypertext Markup Language)**: For structuring the content on a webpage. |
||||
- **CSS (Cascading Style Sheets)**: For styling the content on a webpage. |
||||
- **JavaScript**: for adding interactivity and functionality to web pages |
||||
|
||||
### How skilled in these coding languages must I be to land my first job? |
||||
|
||||
To secure your first job as a front-end developer, you must be proficient in HTML, CSS, and JavaScript. It will allow you to create a portfolio site that shows your coding skills to employers. |
||||
|
||||
### Is HTML, CSS, and JavaScript enough for a front-end developer? |
||||
|
||||
HTML, CSS, and JavaScript are fundamental knowledge for any front-end developer. However, knowledge of frameworks and libraries like React is also essential. |
||||
|
||||
### Which skills are vital for a professional front-end developer? |
||||
|
||||
The following are some of the essential front-end developer skills: |
||||
|
||||
- Solid understanding of core web development technologies, e.g., HTML, CSS, and JavaScript. |
||||
- Proficient in using version control systems, e.g., Git. |
||||
- Practical experience with front-end frameworks and libraries such as React and TailwindCSS. |
||||
- **Soft skills**: Communication, problem-solving, and collaboration skills. |
||||
|
||||
### How long does it take to become a frontend developer? |
||||
|
||||
How long it takes to become a front-end developer depends on how much time you spend learning. But if you are consistent, you can master the basics in a couple of months and more advanced skills in a year or two. |
||||
|
||||
### Is it possible for me to become a frontend developer on my own? |
||||
|
||||
Yes, you can learn how to become a frontend developer by using online resources. |
||||
|
||||
### Can I learn front-end development in 2 months? |
||||
|
||||
You can pick up the basics of frontend development in 2 months. However, getting really good at it takes more time. |
||||
|
||||
### What is the difference between a frontend developer and a back-end developer? |
||||
|
||||
Frontend developer develops user interfaces and user experiences for web applications and websites. They use coding languages like HTML, CSS, and JavaScript to create visual elements you can see and directly interact with on your phone. Examples of these visual elements include Buttons, forms, and text. |
||||
|
||||
Backend developers create the invisible elements on a web page, like database structures and queries. They create the back-end logic that keeps the website running smoothly using programming languages like Python and Java. |
||||
|
||||
### Who is a full-stack developer? |
||||
|
||||
A full-stack developer specializes in both frontend and backend development. |
||||
|
||||
### Does a front-end developer need to know backend development? |
||||
|
||||
Though it is not required, having a grasp of the basics of backend development can be helpful. It makes it easier to work with backend developers and better understand how the web works. |
||||
|
||||
## What next? |
||||
|
||||
To become a front-end developer, you need a mix of skills, dedication, and the right guidance. If you follow the steps in this guide, you'll be on track to kickstart an excellent front-end career. Stay on track with a personalized learning plan available on roadmap.sh. |
||||
|
||||
roadmap.sh will keep you focused and help you reach your maximum potential as a front-end developer. It has numerous resources that will help you learn front-end and web development. To get started, sign up, create a [front-end roadmap plan](https://roadmap.sh/frontend), and begin studying. You can also share the roadmap with your study buddies. |
||||
@ -0,0 +1,39 @@ |
||||
--- |
||||
title: 'Basic Dockerfile' |
||||
description: 'Build a basic Dockerfile to create a Docker image.' |
||||
isNew: false |
||||
sort: 1 |
||||
difficulty: 'beginner' |
||||
nature: 'CLI' |
||||
skills: |
||||
- 'docker' |
||||
- 'dockerfile' |
||||
- 'linux' |
||||
- 'devops' |
||||
seo: |
||||
title: 'Basic Dockerfile' |
||||
description: 'Write a basic Dockerfile to create a Docker image.' |
||||
keywords: |
||||
- 'basic dockerfile' |
||||
- 'dockerfile' |
||||
- 'docker' |
||||
roadmapIds: |
||||
- 'devops' |
||||
- 'docker' |
||||
--- |
||||
|
||||
In this project, you will write a basic Dockerfile to create a Docker image. When this Docker image is run, it should print "Hello, Captain!" to the console before exiting. |
||||
|
||||
## Requirements |
||||
|
||||
- The Dockerfile should be named `Dockerfile`. |
||||
- The Dockerfile should be in the root directory of the project. |
||||
- The base image should be `alpine:latest`. |
||||
- The Dockerfile should contain a single instruction to print "Hello, Captain!" to the console before exiting. |
||||
|
||||
|
||||
You can learn more about writing a Dockerfile [here](https://docs.docker.com/engine/reference/builder/). |
||||
|
||||
<hr /> |
||||
|
||||
If you are looking to build a more advanced version of this project, you can consider adding the ability to pass your name to the Docker image as an argument, and have the Docker image print "Hello, [your name]!" instead of "Hello, Captain!". |
||||
@ -0,0 +1,68 @@ |
||||
--- |
||||
title: 'Caching Proxy' |
||||
description: 'Build a caching server that caches responses from other servers.' |
||||
isNew: false |
||||
sort: 10 |
||||
difficulty: 'intermediate' |
||||
nature: 'CLI' |
||||
skills: |
||||
- 'Programming Language' |
||||
- 'Text Processing' |
||||
- 'Markdown libraries' |
||||
- 'File Uploads' |
||||
seo: |
||||
title: 'Caching Proxy Project Idea' |
||||
description: 'Build a caching proxy server that caches responses from proxied server.' |
||||
keywords: |
||||
- 'backend project idea' |
||||
roadmapIds: |
||||
- 'backend' |
||||
- 'nodejs' |
||||
- 'python' |
||||
- 'java' |
||||
- 'golang' |
||||
- 'spring-boot' |
||||
--- |
||||
|
||||
You are required to build a CLI tool that starts a caching proxy server, it will forward requests to the actual server and cache the responses. If the same request is made again, it will return the cached response instead of forwarding the request to the server. |
||||
|
||||
## Requirements |
||||
|
||||
User should be able to start the caching proxy server by running a command like following: |
||||
|
||||
```shell |
||||
caching-proxy --port <number> --origin <url> |
||||
``` |
||||
|
||||
- `--port` is the port on which the caching proxy server will run. |
||||
- `--origin` is the URL of the server to which the requests will be forwarded. |
||||
|
||||
For example, if the user runs the following command: |
||||
|
||||
```shell |
||||
caching-proxy --port 3000 --origin http://dummyjson.com |
||||
``` |
||||
|
||||
The caching proxy server should start on port 3000 and forward requests to `http://dummyjson.com`. |
||||
|
||||
Taking the above example, if the user makes a request to `http://localhost:3000/products`, the caching proxy server should forward the request to `http://dummyjson.com/products`, return the response along with headers and cache the response. Also, add the headers to the response that indicate whether the response is from the cache or the server. |
||||
|
||||
```plaintext |
||||
# If the response is from the cache |
||||
X-Cache: HIT |
||||
|
||||
# If the response is from the origin server |
||||
X-Cache: MISS |
||||
``` |
||||
|
||||
If the same request is made again, the caching proxy server should return the cached response instead of forwarding the request to the server. |
||||
|
||||
You should also provide a way to clear the cache by running a command like following: |
||||
|
||||
```shell |
||||
caching-proxy --clear-cache |
||||
``` |
||||
|
||||
<hr /> |
||||
|
||||
After building the above project, you should have a good understanding of how caching works and how you can build a caching proxy server to cache responses from other servers. |
||||
@ -0,0 +1,45 @@ |
||||
--- |
||||
title: 'Log Archive Tool' |
||||
description: 'Build a tool to archive logs from the CLI.' |
||||
isNew: false |
||||
sort: 2 |
||||
difficulty: 'beginner' |
||||
nature: 'CLI' |
||||
skills: |
||||
- 'linux' |
||||
- 'bash' |
||||
- 'shell scripting' |
||||
seo: |
||||
title: 'Log Archive Tool' |
||||
description: 'Build a tool to archive logs from the CLI.' |
||||
keywords: |
||||
- 'log archive tool' |
||||
- 'devops project idea' |
||||
roadmapIds: |
||||
- 'devops' |
||||
- 'linux' |
||||
--- |
||||
|
||||
In this project, you will build a tool to archive logs on a set schedule by compressing them and storing them in a new directory, this is especially useful for removing old logs and keeping the system clean while maintaining the logs in a compressed format for future reference. This project will help you practice your programming skills, including working with files and directories, and building a simple cli tool. |
||||
|
||||
The most common location for logs on a unix based system is `/var/log`. |
||||
|
||||
## Requirements |
||||
|
||||
The tool should run from the command line, accept the log directory as an argument, compress the logs, and store them in a new directory. The user should be able to: |
||||
|
||||
- Provide the log directory as an argument when running the tool. |
||||
```bash |
||||
log-archive <log-directory> |
||||
``` |
||||
- The tool should compress the logs in a tar.gz file and store them in a new directory. |
||||
- The tool should log the date and time of the archive to a file. |
||||
```bash |
||||
logs_archive_20240816_100648.tar.gz |
||||
``` |
||||
|
||||
You can learn more about the `tar` command [here](https://www.gnu.org/software/tar/manual/tar.html). |
||||
|
||||
<hr /> |
||||
|
||||
If you are looking to build a more advanced version of this project, you can consider adding functionality to the tool like emailing the user updates on the archive, or sending the archive to a remote server or cloud storage. |
||||
@ -0,0 +1,76 @@ |
||||
--- |
||||
title: 'Number Guessing Game' |
||||
description: 'Build a simple number guessing game to test your luck.' |
||||
isNew: false |
||||
sort: 4 |
||||
difficulty: 'beginner' |
||||
nature: 'CLI' |
||||
skills: |
||||
- 'Programming Language' |
||||
- 'CLI' |
||||
- 'Logic Building' |
||||
seo: |
||||
title: 'Number Guessing Game Project Idea' |
||||
description: 'Build a simple number guessing game to test your luck.' |
||||
keywords: |
||||
- 'number guessing game' |
||||
- 'backend project idea' |
||||
roadmapIds: |
||||
- 'backend' |
||||
- 'nodejs' |
||||
- 'python' |
||||
- 'java' |
||||
- 'golang' |
||||
- 'spring-boot' |
||||
--- |
||||
|
||||
You are required to build a simple number guessing game where the computer randomly selects a number and the user has to guess it. The user will be given a limited number of chances to guess the number. If the user guesses the number correctly, the game will end, and the user will win. Otherwise, the game will continue until the user runs out of chances. |
||||
|
||||
## Requirements |
||||
|
||||
It is a CLI-based game, so you need to use the command line to interact with the game. The game should work as follows: |
||||
|
||||
- When the game starts, it should display a welcome message along with the rules of the game. |
||||
- The computer should randomly select a number between 1 and 100. |
||||
- User should select the difficulty level (easy, medium, hard) which will determine the number of chances they get to guess the number. |
||||
- The user should be able to enter their guess. |
||||
- If the user's guess is correct, the game should display a congratulatory message along with the number of attempts it took to guess the number. |
||||
- If the user's guess is incorrect, the game should display a message indicating whether the number is greater or less than the user's guess. |
||||
- The game should end when the user guesses the correct number or runs out of chances. |
||||
|
||||
Here is a sample output of the game: |
||||
|
||||
```plaintext |
||||
Welcome to the Number Guessing Game! |
||||
I'm thinking of a number between 1 and 100. |
||||
You have 5 chances to guess the correct number. |
||||
|
||||
Please select the difficulty level: |
||||
1. Easy (10 chances) |
||||
2. Medium (5 chances) |
||||
3. Hard (3 chances) |
||||
|
||||
Enter your choice: 2 |
||||
|
||||
Great! You have selected the Medium difficulty level. |
||||
Let's start the game! |
||||
|
||||
Enter your guess: 50 |
||||
Incorrect! The number is less than 50. |
||||
|
||||
Enter your guess: 25 |
||||
Incorrect! The number is greater than 25. |
||||
|
||||
Enter your guess: 35 |
||||
Incorrect! The number is less than 35. |
||||
|
||||
Enter your guess: 30 |
||||
Congratulations! You guessed the correct number in 4 attempts. |
||||
``` |
||||
|
||||
To make the game more interesting, you can add the following features: |
||||
|
||||
- Allow the user to play multiple rounds of the game (i.e., keep playing until the user decides to quit). You can do this by asking the user if they want to play again after each round. |
||||
- Add a timer to see how long it takes the user to guess the number. |
||||
- Implement a hint system that provides clues to the user if they are stuck. |
||||
- Keep track of the user's high score (i.e., the fewest number of attempts it took to guess the number under a specific difficulty level). |
||||
@ -0,0 +1,115 @@ |
||||
--- |
||||
title: 'Scalable E-Commerce Platform' |
||||
description: 'Build an e-commerce platform using microservices architecture.' |
||||
isNew: false |
||||
sort: 19 |
||||
difficulty: 'advanced' |
||||
nature: 'API' |
||||
skills: |
||||
- 'Microservices' |
||||
- 'Database' |
||||
- 'Docker' |
||||
- 'Authentication' |
||||
seo: |
||||
title: 'Scalable E-Commerce Platform Project Idea' |
||||
description: 'Build a scalable e-commerce platform using microservices architecture and Docker.' |
||||
keywords: |
||||
- 'e-commerce platform' |
||||
- 'backend project idea' |
||||
roadmapIds: |
||||
- 'backend' |
||||
- 'nodejs' |
||||
- 'python' |
||||
- 'java' |
||||
- 'golang' |
||||
- 'spring-boot' |
||||
--- |
||||
|
||||
Build a scalable e-commerce platform using microservices architecture and Docker. The platform will handle various aspects of an online store, such as product catalog management, user authentication, shopping cart, payment processing, and order management. Each of these features will be implemented as separate microservices, allowing for independent development, deployment, and scaling. |
||||
|
||||
## Core Microservices: |
||||
|
||||
Here are the sample core microservices that you can implement for your e-commerce platform: |
||||
|
||||
1. **User Service:** |
||||
- **Functionality:** Handles user registration, authentication, and profile management. |
||||
- **Tech Stack:** Any backend language e.g. Node.js (Express), Go, Python (Flask/Django) |
||||
- **Database:** Any database e.g. PostgreSQL |
||||
|
||||
2. **Product Catalog Service:** |
||||
- **Functionality:** Manages product listings, categories, and inventory. |
||||
- **Tech Stack:** Any backend language e.g. Node.js (Express), Go, Python (Flask/Django) |
||||
- **Database:** Any database e.g. MongoDB or MySQL |
||||
|
||||
3. **Shopping Cart Service:** |
||||
- **Functionality:** Manages users' shopping carts, including adding/removing items and updating quantities. |
||||
- **Tech Stack:** Any backend language e.g. Node.js (Express), Go, Python (Flask/Django) |
||||
- **Database:** Redis (for quick access) |
||||
|
||||
4. **Order Service:** |
||||
- **Functionality:** Processes orders, including placing orders, tracking order status, and managing order history. |
||||
- **Tech Stack:** Any backend language e.g. Node.js (Express), Go, Python (Flask/Django) |
||||
- **Database:** MySQL |
||||
|
||||
5. **Payment Service:** |
||||
- **Functionality:** Handles payment processing, integrating with external payment gateways. |
||||
- **Tech Stack:** Any backend language e.g. Node.js (Express), Go, Python (Flask/Django) |
||||
- **Third-Party Integration:** Stripe, PayPal, etc. |
||||
|
||||
6. **Notification Service:** |
||||
- **Functionality:** Sends email and SMS notifications for various events (e.g., order confirmation, shipping updates). |
||||
- **Tech Stack:** Any backend language e.g. Node.js (Express), Go, Python (Flask/Django) |
||||
- **Third-Party Integration:** Twilio, SendGrid, etc. |
||||
|
||||
## **Additional Components:** |
||||
|
||||
- **API Gateway:** |
||||
- **Functionality:** Serves as the entry point for all client requests, routing them to the appropriate microservice. |
||||
- **Tech Stack:** NGINX, Kong, or Traefik |
||||
|
||||
- **Service Discovery:** |
||||
- **Functionality:** Automatically detects and manages service instances. |
||||
- **Tech Stack:** Consul or Eureka |
||||
|
||||
- **Centralized Logging:** |
||||
- **Functionality:** Aggregates logs from all microservices for easy monitoring and debugging. |
||||
- **Tech Stack:** ELK Stack (Elasticsearch, Logstash, Kibana) |
||||
|
||||
- **Docker & Docker Compose:** |
||||
- **Functionality:** Containerizes each microservice and manages their orchestration, networking, and scaling. |
||||
- **Docker Compose:** Defines and runs multi-container Docker applications for development and testing. |
||||
|
||||
- **CI/CD Pipeline:** |
||||
- **Functionality:** Automates the build, test, and deployment process of each microservice. |
||||
- **Tech Stack:** Jenkins, GitLab CI, or GitHub Actions |
||||
|
||||
## Steps to Get Started: |
||||
|
||||
1. **Set up Docker and Docker Compose:** |
||||
- Create Dockerfiles for each microservice. |
||||
- Use Docker Compose to define and manage multi-container applications. |
||||
|
||||
2. **Develop Microservices:** |
||||
- Start with a simple MVP (Minimum Viable Product) for each service, then iterate by adding more features. |
||||
|
||||
3. **Integrate Services:** |
||||
- Use REST APIs or gRPC for communication between microservices. |
||||
- Implement an API Gateway to handle external requests and route them to the appropriate services. |
||||
|
||||
4. **Implement Service Discovery:** |
||||
- Use Consul or Eureka to enable dynamic service discovery. |
||||
|
||||
5. **Set up Monitoring and Logging:** |
||||
- Use tools like Prometheus and Grafana for monitoring. |
||||
- Set up the ELK stack for centralized logging. |
||||
|
||||
6. **Deploy the Platform:** |
||||
- Use Docker Swarm or Kubernetes for production deployment. |
||||
- Implement auto-scaling and load balancing. |
||||
|
||||
7. **CI/CD Integration:** |
||||
- Automate testing and deployment using Jenkins or GitLab CI. |
||||
|
||||
<hr /> |
||||
|
||||
This project offers a comprehensive approach to building a modern, scalable e-commerce platform and will give you hands-on experience with Docker, microservices, and related technologies. After completing this project, you'll have a solid understanding of how to design, develop, and deploy complex distributed systems. |
||||
@ -0,0 +1,8 @@ |
||||
As an open-source tool for configuration management, Ansible provides several benefits when added to your project: |
||||
|
||||
- **Simplicity**: Easy to learn and use with simple YAML syntax. |
||||
- **Agentless**: No need to install agents on managed nodes; instead it uses SSH to communicate with them. |
||||
- **Scalability**: Can manage a large number of servers simultaneously with minimum effort. |
||||
- **Integration**: Ansible integrates well with various cloud providers, CI/CD tools, and infrastructure. |
||||
- **Modularity**: [Extensive library](https://docs.ansible.com/ansible/2.9/modules/list_of_all_modules.html) of modules for different tasks. |
||||
- **Reusability**: Ansible playbooks and roles can be reused and shared across projects. |
||||
@ -0,0 +1,6 @@ |
||||
While the specifics will depend on the cloud provider you decide to go with, the generic steps would be the following: |
||||
|
||||
1. **Set up an auto-scaling group**. Create what is usually known as an auto-scaling group, where you configure the minimum and maximum number of instances you can have and their types. Your scaling policies will interact with this group to automate the actions later on. |
||||
2. **Define the scaling policies**. What makes your platform want to scale? Is it traffic? Is it resource allocation? Find the right metric, and configure the policies that will trigger a scale-up or scale-down event on the auto-scaling group you already configured. |
||||
3. **Balance your load**. Now it’s time to set up a load balancer to distribute the traffic amongst all your nodes. |
||||
4. **Monitor**. Keep a constant monitor over your cluster to understand if your policies are correctly configured, or if you need to adapt and tweak them. Once you’re done with the first 3 steps, this is where you’ll constantly be, as the triggering conditions might change quite often. |
||||
@ -0,0 +1,15 @@ |
||||
 |
||||
|
||||
Blue-green deployment is a release strategy that reduces downtime and the risk of production issues by running two identical production environments, referred to as "blue" and "green." |
||||
|
||||
At a high level, the way this process works is as follows: |
||||
|
||||
- **Setup Two Environments**: Prepare two identical environments: blue (current live environment) and green (new version environment). |
||||
- **Deploy to Green**: Deploy the new version of the application to the green environment through your normal CI/CD pipelines. |
||||
- **Testing green**: Perform testing and validation in the green environment to ensure the new version works as expected. |
||||
- **Switch Traffic**: Once the green environment is verified, switch the production traffic from blue to green. Optionally, the traffic switch can be done gradually to avoid potential problems from affecting all users immediately. |
||||
- **Monitor**: Monitor the green environment to ensure it operates correctly with live traffic. Take your time, and make sure you’ve monitored every single major event before issuing the “green light”. |
||||
- **Fallback Plan**: Keep the blue environment intact as a fallback. If any issues arise in the green environment, you can quickly switch traffic back to the blue environment. This is one of the fastest rollbacks you’ll experience in deployment and release management. |
||||
- **Clean Up**: Once the green environment is stable and no issues are detected, you can update the blue environment to be the new staging area for the next deployment. |
||||
|
||||
This way, you ensure minimal downtime (either for new deployments or for rollbacks) and allow for a quick rollback in case of issues with the new deployment. |
||||
@ -0,0 +1,3 @@ |
||||
A build pipeline is an automated process that compiles, tests, and prepares code for deployment. It typically involves multiple stages, such as source code retrieval, code compilation, running unit tests, performing static code analysis, creating build artifacts, and deploying to one of the available environments. |
||||
|
||||
The build pipeline effectively removes humans from the deployment process as much as possible, clearly reducing the chance of human error. This, in turn, ensures consistency and reliability in software builds and speeds up the development and deployment process. |
||||
@ -0,0 +1,5 @@ |
||||
 |
||||
|
||||
A canary release is a common and well-known deployment strategy. It works this way: when a new version of an application is ready, instead of deploying it and making it available to everyone, you gradually roll it out to a small subset of users or servers before being released to the entire production environment. |
||||
|
||||
This way, you can test the new version in a real-world environment with minimal risk. If the canary release performs well and no issues are detected, the deployment is gradually expanded to a larger audience until it eventually reaches 100% of the users. If, on the other hand, problems are found, the release can be quickly rolled back with minimal impact. |
||||
@ -0,0 +1,32 @@ |
||||
Setting up a CI/CD pipeline from scratch involves several steps. Assuming you’ve already set up your project on a version control system, and everyone in your team has proper access to it, then the next steps would help: |
||||
|
||||
1. **Setup the Continuous Integration (CI)**: |
||||
- Select a continuous integration tool (there are many, like Jenkins, GitLab CI, CircleCI, pick one). |
||||
- Connect the CI tool to your version control system. |
||||
- Write a build script that defines the build process, including steps like code checkout, dependencies installation, compiling the code, and running tests. |
||||
- Set up automated testing to run on every code commit or pull request. |
||||
|
||||
2. **Artifact Storage**: |
||||
- Decide where to store build artifacts (it could be Docker Hub, AWS S3 or anywhere you can then reference from the CD pipeline). |
||||
- Configure the pipeline to package and upload artifacts to the storage after a successful build. |
||||
|
||||
3. **Setup your Continuous Deployment (CD)**: |
||||
- Choose a CD tool or extend your CI tool (same deal as before, there are many options, pick one). |
||||
Define deployment scripts that specify how to deploy your application to different environments (e.g., development, staging, production). |
||||
- Configure the CD tool to trigger deployments after successful builds and tests. |
||||
- Set up environment-specific configurations and secrets management. |
||||
Remember that this system should be able to pull the artifacts from the continuous integration pipeline, so set up that access as well. |
||||
|
||||
4. **Infrastructure Setup**: |
||||
- Provision infrastructure using IaC tools (e.g., Terraform, CloudFormation). |
||||
- Ensure environments are consistent and reproducible to reduce times if there is a need to create new ones or destroy and recreate existing ones. This should be as easy as executing a command without any human intervention. |
||||
|
||||
5. **Setup your monitoring and logging solutions**: |
||||
- Implement monitoring and logging for your applications and infrastructure (e.g., Prometheus, Grafana, ELK stack). |
||||
- Remember to configure alerts for critical issues. Otherwise, you’re missing a key aspect of monitoring (reacting to problems). |
||||
|
||||
6. **Security and Compliance**: |
||||
- By now, it’s a good idea to think about integrating security scanning tools into your pipeline (e.g., Snyk, OWASP Dependency-Check). |
||||
- nsure compliance with relevant standards and practices depending on your specific project’s needs. |
||||
|
||||
Additionally, as a good practice, you might also want to document the CI/CD process, pipeline configuration, and deployment steps. This is to train new team members on using and maintaining the pipelines you just created. |
||||
@ -0,0 +1,7 @@ |
||||
As usual, there are many options when it comes to monitoring and logging solutions, even in the space of Kubernetes. Some useful options could be a Prometheus and Grafana combo, where you get the monitoring data with the first one and plot the results however you want with the second one. |
||||
|
||||
You could also set up an EFK-based (using Elastic, Fluentd, and Kibana) or ELK-based (Elastic, Logstash, and Kibana) logging solution to gather and analyze logs. |
||||
|
||||
Finally, when it comes to alerting based on your monitoring data, you could use something like [Alertmanager](https://github.com/prometheus/alertmanager) that integrates directly with Prometheus and get notified of any issues in your infrastructure. |
||||
|
||||
There are other options out there as well, such as NewRelic or Datadog. In the end, it’s all about your specific needs and the context around them. |
||||
@ -0,0 +1,28 @@ |
||||
 |
||||
|
||||
As usual, there are several options out there, some of them specialized in different aspects of IaC. |
||||
|
||||
**Configuration management tools** |
||||
|
||||
If you’re in search of effective configuration management tools to streamline and automate your IT infrastructure, you might consider exploring the following popular options: |
||||
|
||||
- Ansible |
||||
- Chef |
||||
- Puppet |
||||
|
||||
Configuration management tools are designed to help DevOps engineers manage and maintain consistent configurations across multiple servers and environments. These tools automate the process of configuring, deploying, and managing systems, ensuring that your infrastructure remains reliable, scalable, and compliant with your organization's standards. |
||||
|
||||
**Provisioning and orchestration tools** |
||||
|
||||
If, on the other hand, you’re looking for tools to handle provisioning and orchestration of your infrastructure, you might want to explore the following popular options: |
||||
|
||||
- Terraform |
||||
- CloudFormation (AWS) |
||||
- Pulumi |
||||
|
||||
Provisioning and orchestration tools are essential for automating the process of setting up and managing your infrastructure resources. These tools allow you to define your IaC, making it easier to deploy, manage, and scale resources across cloud environments. |
||||
|
||||
Finally, if you’re looking for multi-purpose tools, you can try something like: |
||||
|
||||
- Ansible (can also be used for provisioning) |
||||
- Pulumi (supports both IaC and configuration management) |
||||
@ -0,0 +1,8 @@ |
||||
Containers help to add consistency in several ways, here are some examples: |
||||
|
||||
- **Isolation**: Containers encapsulate all the dependencies, libraries, and configurations needed to run an application, isolating it from the host system and other containers. This ensures that the application runs the same way regardless of where the container is deployed. |
||||
- **Portability**: Containers can be run on any environment that supports the container runtime. This means that the same container image can be used on a developer's local machine, a testing environment, or a production server without any kind of modification. |
||||
- **Consistency**: By using the same container image across different environments, you eliminate inconsistencies from differences in configuration, dependencies, and runtime environments. This ensures that if the application works in one environment, it will work in all others. |
||||
- **Version Control**: Container images can be versioned and stored in registries (e.g., Docker Hub, AWS ECR). This allows teams to track and roll back to specific versions of an application if there are problems. |
||||
- **Reproducibility**: Containers make it easier to reproduce the exact environment required for the application. This is especially useful for debugging issues that occur in production but not in development, as developers can recreate the production environment locally. |
||||
- **Automation**: Containers facilitate the use of automated build and deployment pipelines. Automated processes can consistently create, test, and deploy container images. |
||||
@ -0,0 +1,6 @@ |
||||
A container is a runtime instance of a container image (which is a lightweight, executable package that includes everything needed to run your code). It is the execution environment that runs the application or service defined by the container image. |
||||
|
||||
When a container is started, it becomes an isolated process on the host machine with its own filesystem, network interfaces, and other resources. |
||||
Containers share the host operating system's kernel, making them more efficient and faster to start than virtual machines. |
||||
|
||||
A virtual machine (VM), on the other hand, is an emulation of a physical computer. Each VM runs a full operating system and has virtualized hardware, which makes them more resource-intensive and slower to start compared to containers. |
||||
@ -0,0 +1,7 @@ |
||||
As a DevOps engineer, the concept of continuous monitoring should be ingrained in your brain as a must-perform activity. |
||||
|
||||
You see, continuous monitoring is the practice of constantly overseeing and analyzing an IT system's performance, security, and compliance in real-time. |
||||
|
||||
It involves collecting and assessing data from various parts of the infrastructure to detect issues, security threats, and performance bottlenecks as soon as they occur. |
||||
|
||||
The goal is to ensure the system's health, security, and compliance, enabling quick responses to potential problems and maintaining the overall stability and reliability of the environment. Tools like Prometheus, Grafana, Nagios, and Splunk are commonly used for continuous monitoring. |
||||
@ -0,0 +1,11 @@ |
||||
Handling data migrations in a continuous deployment pipeline is not a trivial task. It requires careful planning to ensure that the application remains functional and data integrity is maintained throughout the process. Here’s an approach: |
||||
|
||||
1. **Backward Compatibility**: Ensure that any database schema changes are backward compatible. This means that the old application version should still work with the new schema. For example, if you're adding a new column, ensure the application can handle cases where this column might be null initially. |
||||
2. **Migration Scripts**: Write database migration scripts that are idempotent (meaning that they can be run multiple times without causing issues) and can be safely executed during the deployment process. Use a tool like Flyway or Liquibase to manage these migrations. |
||||
3. **Separate Deployment Phases**: |
||||
- **Phase 1 - Schema Migration**: Deploy the database migration scripts first, adding new columns, tables, or indexes without removing or altering existing structures that the current application relies on. |
||||
- **Phase 2 - Application Deployment**: Deploy the application code that utilizes the new schema. This ensures that the application is ready to work with the updated database structure. |
||||
- **Phase 3 - Cleanup (Optional)**: After verifying that the new application version is stable, you can deploy a cleanup script to remove or alter deprecated columns, tables, or other schema elements. While optional, this step is advised, as it helps reduce the chances of creating a build up of technical debt for future developers to deal with. |
||||
4. **Feature Flags**: Use feature flags to roll out new features that depend on the data migration. This allows you to deploy the new application code without immediately activating the new features, providing an additional safety net. |
||||
|
||||
That said, an important, non-technical step that should also be taken into consideration is the coordination with stakeholders, particularly if the migration is complex or requires downtime. Clear communication ensures that everyone is aware of the risks and the planned steps. |
||||
@ -0,0 +1,11 @@ |
||||
To implement security in a DevOps pipeline (DevSecOps), you should integrate security practices throughout the development and deployment process. This is not just about securing the app once it’s in production, this is about securing the entire app-creation process. |
||||
|
||||
That includes: |
||||
|
||||
1. **Shift Left Security**: Incorporate security early in the development process by integrating security checks in the CI/CD pipeline. This means performing static code analysis, dependency scanning, and secret detection during the build phase. |
||||
2. **Automated Testing**: Implement automated security tests, such as vulnerability scans and dynamic application security testing (DAST), to identify potential security issues before they reach production. |
||||
3. **Continuous Monitoring**: Monitor the pipeline and the deployed applications for security incidents using tools like Prometheus, Grafana, and specialized security monitoring tools. |
||||
4. **Infrastructure as Code - Security**: Ensure that infrastructure configurations defined in code are secure by scanning IaC templates (like Terraform) for misconfigurations and vulnerabilities (like hardcoded passwords). |
||||
5. **Access Control**: Implement strict access controls, using something like role-based access control (RBAC) or ABAC (attribute-based access control) and enforcing the principle of least privilege across the pipeline. |
||||
6. **Compliance Checks**: Figure out the compliance and regulations of your industry and integrate those checks to ensure the pipeline adheres to industry standards and regulatory requirements. |
||||
7. **Incident Response**: Figure out a clear incident response plan and integrate security alerts into the pipeline to quickly address potential security breaches. |
||||
@ -0,0 +1,10 @@ |
||||
Docker Compose is, in fact, a tool designed to simplify the definition and management of multi-container Docker applications. It allows you to define, configure, and run multiple containers as a single service using a single YAML file. |
||||
|
||||
In a multi-container application, Compose provides the following key roles: |
||||
|
||||
1. **Service Definition**: With Compose you can specify multiple services inside a single file, you can also define how each service should be built, the networks they should connect to, and the volumes they should use (if any). |
||||
2. **Orchestration**: It manages the startup, shutdown, and scaling of services, ensuring that containers are launched in the correct order based on the defined dependencies. |
||||
3. **Environment Management**: Docker Compose simplifies environment configuration because it lets you set environment variables, networking configurations, and volume mounts in the docker-compose.yml file. |
||||
4. **Simplified Commands**: All of the above can be done with a very simple set of commands you can run directly from the terminal (i.e. docker-compose up, or docker-compose down). |
||||
|
||||
In the end, Docker Compose simplifies the development, testing, and deployment of multi-container applications by giving you, as a user, an extremely friendly and powerful interface. |
||||
@ -0,0 +1,5 @@ |
||||
Continuous Integration (CI) involves automatically building and testing code changes as they are committed to version control systems (usually Git). This helps catch issues early and improves code quality. |
||||
|
||||
On the other hand, Continuous Deployment (CD) goes a step further by automatically deploying every change that passes the CI process, ensuring that software updates are delivered to users quickly and efficiently without manual intervention. |
||||
|
||||
Combined, they add a great deal of stability and agility to the development lifecycle. |
||||
@ -0,0 +1,9 @@ |
||||
Each DevOps team should define this list within the context of their own project, however, a good rule of thumb is to consider the following metrics: |
||||
|
||||
1. **Build Success Rate**: The percentage of successful builds versus failed builds. A low success rate indicates issues in code quality or pipeline configuration. |
||||
2. **Build Time**: The time it takes to complete a build. Monitoring build time helps identify bottlenecks and optimize the pipeline for faster feedback. |
||||
3. **Deployment Frequency**: How often deployments occur. Frequent deployments indicate a smooth pipeline, while long gaps may signal issues with your CI/CD or with the actual dev workflow. |
||||
4. **Lead Time for Changes**: The time from code commit to production deployment. Shorter lead times are preferable, indicating an efficient pipeline. |
||||
5. **Mean Time to Recovery (MTTR)**: The average time it takes to recover from a failure. A lower MTTR indicates a resilient pipeline that can quickly address and fix issues. |
||||
6. **Test Coverage and Success Rate**: The percentage of code covered by automated tests and the success rate of those tests. High coverage and success rates are good indicators of better quality and reliability. |
||||
7. **Change Failure Rate**: The percentage of deployments that result in failures. A lower change failure rate indicates a stable and reliable deployment process. |
||||
@ -0,0 +1,15 @@ |
||||
Having high availability in your system means that the cluster will always be accessible, even if one or more servers are down. |
||||
|
||||
While disaster recovery means having the ability to continue providing service even in the face of a regional network outage (when multiple sections of the world are rendered unreachable). |
||||
|
||||
To ensure high availability and disaster recovery in a cloud environment, you can follow these strategies if they apply to your particular context: |
||||
|
||||
- **Multi-Region Deployment**: If available, deploy your application across multiple geographic regions to ensure that if one region fails, others can take over, minimizing downtime. |
||||
- **Redundancy**: Keep redundant resources, such as multiple instances, databases, and storage systems, across different availability zones within a region to avoid single points of failure. |
||||
- **Auto-Scaling**: Implement auto-scaling to automatically adjust resource capacity in response to demand, ensuring the application remains available even under high load. |
||||
- **Monitoring and Alerts**: Implement continuous monitoring and set up alerts to detect and respond to potential issues before they lead to downtime. Use tools like CloudWatch, Azure Monitor, or Google Cloud Monitoring. |
||||
- **Failover Mechanisms**: Make sure to set up automated failover mechanisms to switch to backup systems or regions seamlessly in case of a failure in the primary systems. |
||||
|
||||
Whatever strategy (or combination of) you decide to go with, always develop and regularly test a disaster recovery plan that outlines steps for restoring services and data in the event of a major failure. |
||||
|
||||
This plan should include defined RTO (Recovery Time Objective) and RPO (Recovery Point Objective) targets. Being prepared to deal with the worst case scenarios is the only way, as these types of problems tend to cause chaos in small and big companies alike. |
||||
@ -0,0 +1,9 @@ |
||||
 |
||||
|
||||
IaC (Infrastructure as Code) is all about managing infrastructure through code, instead of using other more conventional configuration methods. Specifically in the context of Terraform, here is how you’d want to approach IaC: |
||||
|
||||
- **Configuration Files**: Define your infrastructure using HCL or JSON files. |
||||
- **Execution Plan**: Generate a plan showing the changes needed to reach the desired state. |
||||
- **Resource Provisioning**: Terraform will then apply the plan to provision and configure desired resources. |
||||
- **State Management**: Terraform then tracks the current state of your infrastructure with a state file. |
||||
- **Version Control**: Finally, store the configuration files in a version control system to easily version them and share them with other team members. |
||||
@ -0,0 +1,6 @@ |
||||
Logging for a distributed system is definitely not a trivial problem to solve. While the actual implementation might change based on your particular tech stack, the main aspects to consider are: |
||||
|
||||
- Keep the structure of all logs consistent and the same throughout your platform. This will ensure that whenever you want to explore them in search for details, you’ll be able to quickly move from one to the other without having to change anything. |
||||
- Centralize them somewhere. It can be an ELK stack, it can be Splunk or any of the many solutions available out there. Just make sure you centralize all your logs so that you can easily interact with all of them when required. |
||||
- Add unique IDs to each request that gets logged, that way you can trace the flow of data from service to service. Otherwise, debugging problems becomes a real issue. |
||||
- Add a tool that helps you search, query, and visualize the logs. After all, that’s why you want to keep track of that information, to use it somehow. Find yourself a UI that works for you and use it to explore your logs. |
||||
@ -0,0 +1,19 @@ |
||||
There are many components involved, some of them are part of the master node, and others belong to the worker nodes. |
||||
|
||||
Here’s a quick summary: |
||||
|
||||
1. **Master Node Component**s: |
||||
- **API Server**: The front-end for the Kubernetes control plane, handling all RESTful requests for the cluster. |
||||
- **etcd**: A distributed key-value store that holds the cluster's configuration and state. |
||||
- **Controller** Manager: Manages various controllers that regulate the state of the cluster. |
||||
- **Scheduler**: Assigns workloads to different nodes based on resource availability and other constraints. |
||||
2. *Worker Node Components*: |
||||
- **Kubelet**: This is an agent that runs on each node, and it ensures that each container is running in a Pod. |
||||
- **Kube-proxy**: A network proxy that maintains network rules and handles routing for services. |
||||
- **Container Runtime**: This software runs containers, such as Docker, containerd, or CRI-O. |
||||
3. **Additional Components**: |
||||
- **Pods**: These are the smallest deployable units in Kubernetes; they consist of one or more containers. |
||||
- **Services**: Services define a logical set of Pods and a policy for accessing them, they’re often used for load balancing. |
||||
- **ConfigMaps and Secrets**: They manage configuration data and sensitive information, respectively. |
||||
- **Ingress**: It manages external access to services, typically through HTTP/HTTPS. |
||||
- **Namespaces**: They provide a mechanism for isolating groups of resources within a single cluster. |
||||
@ -0,0 +1,15 @@ |
||||
As with any piece of software solution, there are no absolutes. In the case of Kubernetes Operators, while they do offer significant benefits for automating and managing complex applications, they also introduce additional complexity and resource requirements. |
||||
|
||||
**Advantages of Kubernetes Operators**: |
||||
|
||||
1. **Automation of Complex Tasks**: Operators automate the management of complex stateful applications, such as databases, reducing the need for manual intervention. |
||||
2. **Consistency**: They help reduce human error and increase reliability by ensuring consistent deployments, scaling, and management of applications across environments. |
||||
3. **Custom Resource Management**: Operators allow you to manage custom resources in Kubernetes, extending its capabilities to support more complex applications and services. |
||||
4. **Simplified Day-2 Operations**: Operators streamline tasks like backups, upgrades, and failure recovery, making it easier to manage applications over time. |
||||
|
||||
**Disadvantages of Kubernetes Operators**: |
||||
|
||||
1. **Complexity**: Developing and maintaining Operators can be complex and require in-depth knowledge of both Kubernetes and the specific application being managed. |
||||
2. **Overhead**: Running Operators adds additional components to your Kubernetes cluster, which can increase resource consumption and operational overhead. |
||||
3. **Limited Use Cases**: Not all applications benefit from the complexity of an Operator; for simple stateless applications, Operators might be overkill. |
||||
4. **Maintenance**: Operators need to be regularly maintained and updated, especially as Kubernetes itself keeps evolving, which can add to the maintenance burden. |
||||
@ -0,0 +1,7 @@ |
||||
 |
||||
|
||||
A load balancer is a device or software that distributes incoming network traffic across multiple servers to ensure no single server becomes overwhelmed. |
||||
|
||||
It is important because it improves the availability, reliability, and performance of applications by evenly distributing the load, preventing server overload, and providing failover capabilities in case of server failures. |
||||
|
||||
Load balancers are usually used when scaling up RESTful microservices, because given their stateless nature, you can set up multiple copies of the same one behind a load balancer and let it distribute the load amongst all copies evenly. |
||||
@ -0,0 +1,10 @@ |
||||
While in theory microservices can solve all platform problems, in practice there are several challenges that you might encounter along the way. |
||||
|
||||
Some examples are: |
||||
|
||||
1. **Complexity**: Managing multiple services increases the overall system complexity, making development, deployment, and monitoring more challenging (as there are more “moving parts”). |
||||
2. **Service Communication**: Ensuring reliable communication between services, handling network latency, and dealing with issues like service discovery and API versioning can be difficult. There are of course alternatives to deal with all of these issues, but they’re not evident right off the bat nor the same for everyone. |
||||
3. **Data Management**: It’s all about trade-offs in the world of distributed computing. Managing data consistency and transactions across distributed services is complex, often requiring techniques like eventual consistency and distributed databases. |
||||
4. **Deployment Overhead**: Coordinating the deployment of multiple services, especially when they have interdependencies, can lead to more complex CI/CD pipelines. |
||||
5. **Monitoring and Debugging**: Troubleshooting issues is harder in a microservices architecture due to the distributed nature of the system. Trying to figure out where the information goes and which services are involved in a single request can be quite a challenge for large platforms. This makes debugging microservices architecture a real headache. |
||||
6. **Security**: Securing microservices involves managing authentication, authorization, and data protection across multiple services, often with varying security requirements. |
||||
@ -0,0 +1,11 @@ |
||||
 |
||||
|
||||
A microservice is an architectural style that structures an application as a collection of small, loosely coupled, and independently deployable services (hence the term “micro”). |
||||
|
||||
Each service focuses on a specific business domain and can communicate with others through well-defined APIs. |
||||
|
||||
In the end, your application is not (usually) composed of a single microservice (that would make it monolith), instead, its architecture consists of multiple microservices working together to serve the incoming requests. |
||||
|
||||
On the other hand, a monolithic application is a single (often massive) unit where all functions and services are interconnected and run as a single process. |
||||
|
||||
The biggest difference between monoliths and microservices is that changes to a monolithic application require the entire system to be rebuilt and redeployed, while microservices can be developed, deployed, and scaled independently, allowing for greater flexibility and resilience. |
||||
@ -0,0 +1,8 @@ |
||||
To migrate an existing application into a containerized environment, you’ll need to adapt the following steps to your particular context: |
||||
|
||||
1. Figure out what parts of the application need to be containerized together. |
||||
2. Create your Dockerfiles and define the entire architecture in that configuration, including the interservice dependencies that there might be. |
||||
3. Figure out if you also need to containerize any external dependency, such as a database. If you do, add that to the Dockerfile. |
||||
4. Build the actual docker image. |
||||
5. Once you make sure it runs locally, configure the orchestration tool you use to manage the containers. |
||||
6. You’re now ready to deploy to production, however, make sure you keep monitoring and alerting on any problem shortly after the deployment in case you need to roll back. |
||||
@ -0,0 +1,5 @@ |
||||
The process is pretty much the same as it was described above, with an added step to set up the actual Kubernetes cluster: |
||||
|
||||
Use Terraform to define and provision Kubernetes clusters in each cloud. For instance, create an EKS cluster on AWS, an AKS cluster on Azure, and a GKE cluster on Google Cloud, specifying configurations such as node types, sizes, and networking. |
||||
|
||||
Once you’re ready, make sure to set up the Kubernetes auto-scaler on each of the cloud providers to manage resources and scale based on the load they receive. |
||||
@ -0,0 +1,9 @@ |
||||
Setting up a multi-cloud infrastructure using Terraform involves the following steps: |
||||
|
||||
1. **Define Providers**: In your Terraform configuration files, define the providers for each cloud service you intend to use (e.g., AWS, Azure, Google Cloud). Each provider block will configure how Terraform interacts with that specific cloud. |
||||
2. **Create Resource Definitions**: In the same or separate Terraform files, define the resources you want to provision in each cloud. For example, you might define AWS EC2 instances, Azure Virtual Machines, and Google Cloud Storage buckets within the same project. |
||||
3. **Set Up State Management**: Use a remote backend to manage Terraform state files centrally and securely. This is crucial for multi-cloud setups to ensure consistency and to allow collaboration among team members. |
||||
4. **Configure Networking**: Design and configure networking across clouds, including VPCs, subnets, VPNs, or peering connections, to enable communication between resources in different clouds. |
||||
5. **Provision Resources**: Run terraform init to initialize the configuration, then terraform plan to preview the changes, and finally terraform apply to provision the infrastructure across the multiple cloud environments. |
||||
6. **Handle Authentication**: Ensure that each cloud provider's authentication (e.g., access keys, service principals) is securely handled, possibly using environment variables or a secret management tool. Do not hardcode sensitive information in your code, ever. |
||||
7. **Monitor and Manage**: As always, after deploying, use Terraform's state files and output to monitor the infrastructure. |
||||
@ -0,0 +1,7 @@ |
||||
Managing the network configuration is not a trivial task, especially when the architecture is big and complex. |
||||
|
||||
- Specifically in a cloud environment, managing network configurations involves several steps: |
||||
Creating and isolating resources within Virtual Private Clouds (VPCs), organizing them into subnets, and controlling traffic using security groups and network ACLs. |
||||
- Set up load balancers to distribute traffic for better performance, while setting up DNS services at the same time to manage domain routing. |
||||
- Have VPNs and VPC peering connect cloud resources securely with other networks. |
||||
- Finally, automation tools like Terraform handle network setups consistently, and monitoring tools ensure everything runs smoothly. |
||||
@ -0,0 +1,9 @@ |
||||
There are many ways in which you can optimize a CI/CD pipeline for performance and reliability, it all depends highly on the tech stack and your specific context (your app, your CI/CD setup, etc). However, the following are some potential solutions to this problem: |
||||
|
||||
1. **Parallelize Jobs**: As long as you can, try to run independent jobs in parallel to reduce overall build and test times. This ensures faster feedback and speeds up the entire pipeline. |
||||
2. **Optimize Build Caching**: Use caching mechanisms to avoid redundant work, such as re-downloading dependencies or rebuilding unchanged components. This can significantly reduce build times. |
||||
3. **Incremental Builds**: Implement incremental builds that only rebuild parts of the codebase that have changed, rather than the entire project. This is especially useful for large projects with big codebases. |
||||
4. **Efficient Testing**: Prioritize and parallelize tests, running faster unit tests early and reserving more intensive integration or end-to-end tests for later stages. Be smart about it and use test impact analysis to only run tests affected by recent code changes. |
||||
5. **Monitor Pipeline Health**: Continuously monitor the pipeline for bottlenecks, failures, and performance issues. Use metrics and logs to identify and address inefficiencies. |
||||
6. **Environment Consistency**: Ensure that build, test, and production environments are consistent to avoid "it works on my machine" issues. Use containerization or Infrastructure as Code (IaC) to maintain environment parity. Your code should work in all environments, and if it doesn’t, it should not be the fault of the environment. |
||||
7. **Pipeline Stages**: Use pipeline stages wisely to catch issues early. For example, fail fast on linting or static code analysis before moving on to more resource-intensive stages. |
||||
@ -0,0 +1,7 @@ |
||||
Orchestration in DevOps refers to the automated coordination and management of complex IT systems. It involves combining multiple automated tasks and processes into a single workflow to achieve a specific goal. |
||||
|
||||
Nowadays, automation (or orchestration) is one of the key components of any software development process and it should never be avoided nor preferred over manual configuration. |
||||
|
||||
As an automation practice, orchestration helps to remove the chance of human error from the different steps of the software development lifecycle. This is all to ensure efficient resource utilization and consistency. |
||||
|
||||
Some examples of orchestration can include orchestrating container deployments with Kubernetes and automating infrastructure provisioning with tools like Terraform. |
||||
@ -0,0 +1,21 @@ |
||||
There are too many out there to name them all, but we can group them into two main categories: on-prem and cloud-based. |
||||
|
||||
**On-prem CI/CD tools** |
||||
|
||||
These tools allow you to install them on your own infrastructure and don’t require any extra external internet access. Some examples are: |
||||
|
||||
- Jenkins |
||||
- GitLab CI/CD (can be self-hosted) |
||||
- Bamboo |
||||
- TeamCity |
||||
|
||||
**Cloud-based CI/CD tools** |
||||
|
||||
On the other hand, these tools either require you to use them from the cloud or are only accessible in SaaS format, which means they provide the infrastructure, and you just use their services. |
||||
|
||||
Some examples of these tools are: |
||||
- CircleCI |
||||
- Travis CI |
||||
- GitLab CI/CD (cloud version) |
||||
- Azure DevOps |
||||
- Bitbucket Pipelines |
||||
@ -0,0 +1,8 @@ |
||||
When organizations and platforms grow large enough, keeping track of how different areas of the IT ecosystem (infrastructure, deployment pipelines, hardware, etc) are meant to be configured becomes a problem, and finding a way to manage that chaos suddenly becomes a necessity. |
||||
That is where configuration management comes into play. |
||||
|
||||
The purpose of a configuration management tool is to automate the process of managing and maintaining the consistency of software and hardware configurations across an organization's infrastructure. |
||||
|
||||
It makes sure that systems are configured correctly, updates are applied uniformly, and configurations are maintained according to predefined standards. |
||||
|
||||
This helps reduce configuration errors, increase efficiency, and ensure that environments are consistent and compliant. |
||||
@ -0,0 +1,5 @@ |
||||
 |
||||
|
||||
A reverse proxy is a piece of software that sits between clients and backend servers, forwarding client requests to the appropriate server and returning the server's response to the client. It helps with load balancing, security, caching, and handling SSL termination. |
||||
|
||||
An example of a reverse proxy is **Nginx**. For example, if you have a web application running on several backend servers, Nginx can distribute incoming HTTP requests evenly among these servers. This setup improves performance, enhances fault tolerance, and ensures that no single server is overwhelmed by traffic. |
||||
@ -0,0 +1,15 @@ |
||||
This is probably one of the most common DevOps interview questions out there because by answering it correctly, you show that you actually know what DevOps engineers (A.K.A “you”) are supposed to work on. |
||||
|
||||
That said, this is not a trivial question to answer because different companies will likely implement DevOps with their own “flavor” and in their own way. |
||||
|
||||
At a high level, the role of a DevOps engineer is to bridge the gap between development and operations teams with the aim of improving the development lifecycle and reducing deployment errors. |
||||
|
||||
With that said other key responsibilities may include: |
||||
|
||||
- Implementing and managing CI/CD pipelines. |
||||
- Automating infrastructure provisioning and configuration using IaC tools. |
||||
- Monitoring and maintaining system performance, security, and availability. |
||||
- Collaborating with developers to streamline code deployments and ensure smooth operations. |
||||
- Managing and optimizing cloud infrastructure. |
||||
- Ensuring system scalability and reliability. |
||||
- Troubleshooting and resolving issues across the development and production environments. |
||||
@ -0,0 +1,17 @@ |
||||
 |
||||
|
||||
They’re both valid scaling techniques, but they both have different limitations on the affected system. |
||||
|
||||
**Horizontal Scaling** |
||||
|
||||
- Involves adding more machines or instances to your infrastructure. |
||||
- Increases capacity by connecting multiple hardware or software entities so they work as a single logical unit. |
||||
- Often used in distributed systems and cloud environments. |
||||
|
||||
**Vertical Scaling** |
||||
|
||||
- Involves adding more resources (CPU, RAM, storage) to an existing machine. |
||||
- Increases capacity by enhancing the power of a single server or instance. |
||||
- Limited by the maximum capacity of the hardware. |
||||
|
||||
In summary, horizontal scaling adds more machines to handle increased load, while vertical scaling enhances the power of existing machines. |
||||
@ -0,0 +1,6 @@ |
||||
There are many ways to handle secrets management in a DevOps pipeline, some of them involve: |
||||
|
||||
- Storing secrets in environment variables managed by the CI/CD tool. |
||||
- Using secret management tools like HashiCorp Vault, AWS Secrets Manager, or Azure Key Vault to securely store and retrieve secrets. |
||||
- Encrypted configuration files are also an option, with decryption keys stored securely somewhere else. |
||||
- Whatever strategy you decide to go with, it's crucial to implement strict access controls and permissions, integrate secret management tools with CI/CD pipelines to fetch secrets securely at runtime, and above all, avoid hardcoding secrets in code repositories or configuration files. |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue