github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add videos listing page

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent 75c4f952dd
commit 86f599b5b7
24 changed files with 226 additions and 152 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 214
      content/videos.json
  2. 0
      content/videos/arrays-and-objects-in-javascript.md
  3. 0
      content/videos/content-delivery-networks.md
  4. 0
      content/videos/dns-explained.md
  5. 0
      content/videos/freeze-seal-js.md
  6. 0
      content/videos/how-to-use-css-variables.md
  7. 0
      content/videos/how-to-use-github-actions.md
  8. 0
      content/videos/http-caching.md
  9. 0
      content/videos/javascript-fetch-api.md
  10. 0
      content/videos/load-balancers-101.md
  11. 0
      content/videos/osi-model.md
  12. 0
      content/videos/practical-intro-to-react.md
  13. 0
      content/videos/promises-in-javascript.md
  14. 0
      content/videos/scaling-the-unscalable.md
  15. 0
      content/videos/tcp-ip-model.md
  16. 0
      content/videos/tcp-udp.md
  17. 0
      content/videos/what-is-dependency-injection.md
  18. 0
      content/videos/what-is-dom-shadow-dom-virtual-dom.md
  19. 17
      lib/guide.ts
  20. 27
      lib/video.ts
  21. 2
      pages/guides/[guide].tsx
  22. 8
      pages/guides/index.tsx
  23. 4
      pages/watch/components/video-grid-item.tsx
  24. 106
      pages/watch/index.tsx

214
content/videos.json
Unescape View File

@ -1,92 +1,230 @@
[
{
"id": "tcp-udp",
"title": "Transport Protocols: TCP vs UDP",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"description": "Learn about the Transport Layer of the TCP/IP model and different transport protocols.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"fileName": "tcp-udp.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "10 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"title": "OSI Model Explained",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"id": "tcp-ip-model",
"title": "TCP/IP Model Explained",
"description": "Learn what is TCP/IP Model and the different layers involved.",
"url": "/watch/tcp-ip-model",
"fileName": "tcp-ip-model.md",
"isPro": false,
"duration": "10 minutes",
"authorUsername": "kamranahmedse",
"duration": "5 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"title": "Creating a React App",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"id": "osi-model",
"title": "OSI Model Explained",
"description": "Learn what is OSI Model and the different layers involved.",
"url": "/watch/osi-model",
"fileName": "osi-model.md",
"isPro": false,
"duration": "10 minutes",
"authorUsername": "kamranahmedse",
"duration": "7 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"title": "DOM vs Shadow DOM vs Virtual DOM",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"id": "freeze-seal-js",
"title": "Freeze and Seal Objects in JavaScript",
"description": "Learn what is OSI Model and the different layers involved.",
"url": "/watch/freeze-and-seal-objects-in-javascript",
"fileName": "freeze-seal-js.md",
"isPro": false,
"duration": "10 minutes",
"authorUsername": "kamranahmedse",
"duration": "6 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "http-caching",
"title": "Everything you need to know about HTTP Caching",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"description": "Learn what is HTTP caching, places for caching and different caching headers.",
"url": "/watch/all-about-http-caching",
"fileName": "http-caching.md",
"isPro": false,
"duration": "10 minutes",
"authorUsername": "kamranahmedse",
"duration": "13 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "content-delivery-networks",
"title": "Content Delivery Networks",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"description": "Learn what the CDNs are and the difference between push CDN vs pull CDN.",
"url": "/watch/content-delivery-networks",
"fileName": "content-delivery-networks.md",
"isPro": false,
"duration": "10 minutes",
"authorUsername": "kamranahmedse",
"duration": "4 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"title": "Load Balancers in Depth",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"id": "load-balancers-101",
"title": "Load Balancers 101",
"description": "Learn the basics of load balancers, types and different algorithms.",
"url": "/watch/load-balancers-101",
"fileName": "load-balancers-101.md",
"isPro": false,
"duration": "10 minutes",
"authorUsername": "kamranahmedse",
"duration": "9 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"title": "DNS and How does it Work?",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"id": "dns-records",
"title": "DNS Records",
"description": "Learn what the DNS is and how a website is found on the internet.",
"url": "/watch/dns-records",
"fileName": "dns-records.md",
"isPro": false,
"duration": "10 minutes",
"authorUsername": "kamranahmedse",
"duration": "6 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "dns-explained",
"title": "DNS and how does it work?",
"description": "Learn what the DNS is and how a website is found on the internet.",
"url": "/watch/dns-explained",
"fileName": "dns-explained.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "5 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "system-design-101",
"title": "System Design 101",
"description": "Learn about all the bits and pieces of system design.",
"url": "/watch/system-design-101",
"fileName": "system-design-101.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "7 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "javascript-fetch-api",
"title": "JavaScript Fetch API",
"description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
"url": "/watch/transport-protocols-tcp-vs-udp",
"fileName": "tcp-udp",
"description": "Learn how to use JavaScript's Fetch API to interact with remote API.",
"url": "/watch/javascript-fetch-api",
"fileName": "javascript-fetch-api.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "3 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "scaling-the-unscalable",
"title": "Scaling the Unscalable",
"description": "Learn the basics of System Design and understand how to build a scalable application.",
"url": "/watch/scaling-the-unscalable",
"fileName": "scaling-the-unscalable.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "10 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "promises-in-javascript",
"title": "All about Promises in JavaScript",
"description": "Learn how to write asynchronous code in JavaScript using promises.",
"url": "/watch/promises-in-javascript",
"fileName": "promises-in-javascript.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "8 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "how-to-use-github-actions",
"title": "Automate your workflows with GitHub Actions",
"description": "Learn how to implement CI/CD with GitHub Actions",
"url": "/watch/how-to-use-github-actions",
"fileName": "how-to-use-github-actions.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "6 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "what-is-dependency-injection",
"title": "What is Dependency Injection?",
"description": "Learn what is dependency injection and how to write better code with the help of it.",
"url": "/watch/what-is-dependency-injection",
"fileName": "what-is-dependency-injection.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "3 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "how-to-use-css-variables",
"title": "How to use CSS Variables?",
"description": "Learn how to write scalable CSS using CSS Variables.",
"url": "/watch/how-to-use-css-variables",
"fileName": "how-to-use-css-variables.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "5 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "what-is-dom-shadow-dom-virtual-dom",
"title": "What is DOM, Shadow DOM and Virtual DOM?",
"description": "Learn what is DOM, Shadow DOM and Virtual DOM and how they work.",
"url": "/watch/what-is-dom-shadow-dom-virtual-dom",
"fileName": "what-is-dom-shadow-dom-virtual-dom.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "6 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "practical-intro-to-react",
"title": "Practical Introduction to React",
"description": "Learn how to create a React Application with practical example.",
"url": "/watch/practical-intro-to-react",
"fileName": "practical-intro-to-react.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "40 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
},
{
"id": "arrays-and-objects-in-javascript",
"title": "Built-in Methods for Arrays and Objects in JavaScript",
"description": "Learn how to manipulate arrays and objects in JavaScript.",
"url": "/watch/arrays-and-objects-in-javascript",
"fileName": "arrays-and-objects-in-javascript.md",
"isPro": false,
"authorUsername": "kamranahmedse",
"duration": "12 minutes",
"updatedAt": "2020-07-09T19:59:14.191Z",
"createdAt": "2020-07-09T19:59:14.191Z"
}
]

0
content/videos/arrays-and-objects-in-javascript.md
Unescape View File

0
content/videos/content-delivery-networks.md
Unescape View File

0
content/videos/dns-explained.md
Unescape View File

0
content/videos/freeze-seal-js.md
Unescape View File

0
content/videos/how-to-use-css-variables.md
Unescape View File

0
content/videos/how-to-use-github-actions.md
Unescape View File

0
content/videos/http-caching.md
Unescape View File

0
content/videos/javascript-fetch-api.md
Unescape View File

0
content/videos/load-balancers-101.md
Unescape View File

0
content/videos/osi-model.md
Unescape View File

0
content/videos/practical-intro-to-react.md
Unescape View File

0
content/videos/promises-in-javascript.md
Unescape View File

0
content/videos/scaling-the-unscalable.md
Unescape View File

0
content/videos/tcp-ip-model.md
Unescape View File

0
content/videos/tcp-udp.md
Unescape View File

0
content/videos/what-is-dependency-injection.md
Unescape View File

0
content/videos/what-is-dom-shadow-dom-virtual-dom.md
Unescape View File

17
lib/guide.ts
Unescape View File

@ -1,6 +1,5 @@
import guides from '../content/guides.json';
import formatDate from 'date-fns/format';
import { NextApiRequest } from 'next';
import { AuthorType, findAuthorByUsername } from './author';
export type GuideType = {
@ -13,23 +12,16 @@ export type GuideType = {
isDraft: boolean;
createdAt: string;
updatedAt: string;
formattedCreatedAt: string;
formattedUpdatedAt: string;
formattedCreatedAt?: string;
formattedUpdatedAt?: string;
authorUsername: string;
author?: AuthorType;
};
export function getGuideById(id: string): GuideType | undefined {
const allGuides = getAllGuides();
const foundGuide = allGuides.find(guide => guide.id === id);
if (!foundGuide) {
return undefined;
}
return {
...foundGuide,
author: findAuthorByUsername(foundGuide.authorUsername)
};
return allGuides.find(guide => guide.id === id);
}
export function getAllGuides(limit: number = 0): GuideType[] {
@ -39,7 +31,8 @@ export function getAllGuides(limit: number = 0): GuideType[] {
.map(guide => ({
...guide,
formattedCreatedAt: formatDate(new Date(guide.createdAt), 'MMMM d, yyyy'),
formattedUpdatedAt: formatDate(new Date(guide.updatedAt), 'MMMM d, yyyy')
formattedUpdatedAt: formatDate(new Date(guide.updatedAt), 'MMMM d, yyyy'),
author: findAuthorByUsername(guide.authorUsername)
}))
.slice(0, limit ? limit : guides.length);
}

27
lib/video.ts
Unescape View File

@ -1,8 +1,9 @@
import videos from '../content/videos.json';
import formatDate from 'date-fns/format';
import { NextApiRequest } from 'next';
import { AuthorType, findAuthorByUsername } from './author';
export type VideoType = {
id: string;
title: string;
description: string;
url: string;
@ -11,8 +12,10 @@ export type VideoType = {
duration: string;
createdAt: string;
updatedAt: string;
formattedCreatedAt: string;
formattedUpdatedAt: string;
formattedCreatedAt?: string;
formattedUpdatedAt?: string;
authorUsername: string;
author?: AuthorType;
};
export function getAllVideos(limit: number = 0): VideoType[] {
@ -21,24 +24,14 @@ export function getAllVideos(limit: number = 0): VideoType[] {
.map(video => ({
...video,
formattedCreatedAt: formatDate(new Date(video.createdAt), 'MMMM d, yyyy'),
formattedUpdatedAt: formatDate(new Date(video.updatedAt), 'MMMM d, yyyy')
formattedUpdatedAt: formatDate(new Date(video.updatedAt), 'MMMM d, yyyy'),
author: findAuthorByUsername(video.authorUsername)
}))
.slice(0, limit ? limit : videos.length);
}
export function getRequestedGuide(req: NextApiRequest): VideoType | undefined {
export function getVideoById(id: string): VideoType | undefined {
const allVideos = getAllVideos();
const video = allVideos.find(video => video.url === req.url);
if (!video) {
return undefined;
}
try {
return video;
} catch (e) {
console.log(e);
}
return undefined;
return allVideos.find(guide => guide.id === id);
}

2
pages/guides/[guide].tsx
Unescape View File

@ -23,7 +23,7 @@ export default function Guide(props: GuideProps) {
<ContentPageHeader
title={guide.title}
subtitle={guide.description}
formattedDate={guide.formattedUpdatedAt}
formattedDate={guide.formattedUpdatedAt!}
author={{
twitter: guide?.author?.twitter!,
picture: guide?.author?.picture!,

8
pages/guides/index.tsx
Unescape View File

@ -1,4 +1,4 @@
import { Box, Container, SimpleGrid, Stack } from '@chakra-ui/react';
import { Box, Container, SimpleGrid } from '@chakra-ui/react';
import { GlobalHeader } from '../../components/global-header';
import { LinksList } from '../../components/links-list';
import { LinksListItem } from '../../components/links-list-item';
@ -7,7 +7,7 @@ import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../../components/footer';
import { GuideGridItem } from './components/guide-grid-item';
import { PageHeader } from '../../components/page-header';
import { getAllGuides, getGuideById, GuideType } from '../../lib/guide';
import { getAllGuides, GuideType } from '../../lib/guide';
type GuidesProps = {
guides: GuideType[]
@ -35,7 +35,7 @@ export default function Guides(props: GuidesProps) {
key={recentGuide.id}
title={recentGuide.title}
subtitle={recentGuide.description}
date={recentGuide.formattedUpdatedAt}
date={recentGuide.formattedUpdatedAt!}
isNew
colorIndex={counter}
/>
@ -49,7 +49,7 @@ export default function Guides(props: GuidesProps) {
key={oldGuide.id}
title={oldGuide.title}
badgeText={oldGuide.isPro ? 'PRO' : ''}
subtitle={oldGuide.formattedUpdatedAt}
subtitle={oldGuide.formattedUpdatedAt!}
/>
))}
</LinksList>

4
pages/watch/components/video-grid-item.tsx
Unescape View File

@ -57,12 +57,12 @@ export function VideoGridItem(props: VideoGridItemProps) {
return (
<Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px'
rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
<Text mb='10px' fontSize='13px' color='gray.400'>
<Text mb='7px' fontSize='12px' color='gray.400'>
{isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
{isPro && <Badge colorScheme={'blue'} mr='10px'>PRO</Badge>}
{date}
</Text>
<Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
<Heading color='white' mb={'6px'} fontSize='20px' lineHeight={'28px'}>{title}</Heading>
<Text color='gray.300' fontSize='14px'>{subtitle}</Text>
</Link>
);

106
pages/watch/index.tsx
Unescape View File

@ -1,12 +1,19 @@
import { Box, Container, SimpleGrid, Stack } from '@chakra-ui/react';
import { Box, Container, SimpleGrid } from '@chakra-ui/react';
import { GlobalHeader } from '../../components/global-header';
import { OpensourceBanner } from '../../components/opensource-banner';
import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../../components/footer';
import { VideoGridItem } from './components/video-grid-item';
import { PageHeader } from '../../components/page-header';
import { getAllVideos, VideoType } from '../../lib/video';
type VideosProps = {
videos: VideoType[]
}
export default function Watch(props: VideosProps) {
const { videos = [] } = props;
export default function Watch() {
return (
<Box bg='white' minH='100vh'>
<GlobalHeader />
@ -17,82 +24,17 @@ export default function Watch() {
/>
<Container maxW='container.md' position='relative'>
<SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
<VideoGridItem
title='Session Based Authentication'
subtitle='Learn what the Session Based Authentication is, the pros and cons.'
date='June 25, 2021'
isNew
/>
<VideoGridItem
title='JSON Web Tokens'
subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
date='June 25, 2021'
colorIndex={1}
isPro
/>
<VideoGridItem
title='JSON Web Tokens'
subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
date='June 25, 2021'
colorIndex={2}
/>
<VideoGridItem
title='JSON Web Tokens'
subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
date='June 25, 2021'
colorIndex={3}
/>
<VideoGridItem
title='JSON Web Tokens'
subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
date='June 25, 2021'
colorIndex={4}
isPro
/>
<VideoGridItem
title='JSON Web Tokens'
subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
date='June 25, 2021'
colorIndex={5}
/>
<VideoGridItem
title='JSON Web Tokens'
subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
date='June 25, 2021'
colorIndex={6}
/>
<VideoGridItem
title='JSON Web Tokens'
subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
date='June 25, 2021'
colorIndex={7}
/>
<VideoGridItem
title='JSON Web Tokens'
subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
date='June 25, 2021'
colorIndex={8}
isPro
/>
<VideoGridItem
title='JSON Web Tokens'
subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
date='June 25, 2021'
colorIndex={9}
/>
<VideoGridItem
title='JSON Web Tokens'
subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
date='June 25, 2021'
colorIndex={10}
isPro
/>
<VideoGridItem
title='JSON Web Tokens'
subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
date='June 25, 2021'
colorIndex={11}
/>
{videos.map((video, counter) => (
<VideoGridItem
key={video.id}
title={video.title}
subtitle={video.description}
date={video.formattedUpdatedAt!}
isNew={counter <= 1}
colorIndex={counter}
isPro={video.isPro}
/>
))}
</SimpleGrid>
</Container>
</Box>
@ -103,3 +45,11 @@ export default function Watch() {
</Box>
);
}
export async function getStaticProps() {
return {
props: {
videos: getAllVideos()
}
};
}

Write Preview
Loading…
Cancel
Save