├── .prettierignore ├── .eslintrc.json ├── app ├── favicon.ico ├── [...not-Found] │ └── page.tsx ├── (marketing) │ ├── layout.tsx │ └── page.tsx ├── (docs) │ ├── docs │ │ ├── layout.tsx │ │ └── [[...slug]] │ │ │ └── page.tsx │ └── layout.tsx ├── (batches) │ ├── batch │ │ ├── layout.tsx │ │ └── [[...batchID]] │ │ │ └── page.tsx │ └── layout.tsx ├── layout.tsx └── not-found.tsx ├── postcss.config.js ├── .github ├── .github │ └── dependabot.yml ├── ISSUE_TEMPLATE │ ├── feature.yml │ └── bug.yml ├── workflows │ ├── greeting.yml │ ├── auto-reply.yml │ └── nextjs.yml ├── config.yml └── pull_request_template.md ├── lib └── utils.ts ├── next.config.js ├── components ├── video-player.tsx ├── theme-provider.tsx ├── markdown │ ├── link.tsx │ ├── callout.tsx │ ├── mdx-card.tsx │ └── mdx.tsx ├── layout │ ├── announcement-section.tsx │ ├── site-header.tsx │ ├── mobile-nav.tsx │ ├── docs-nav.tsx │ ├── main-nav.tsx │ ├── site-footer.tsx │ └── sidebar-nav.tsx ├── docs-header.tsx ├── ui │ ├── input.tsx │ ├── popover.tsx │ ├── scroll-area.tsx │ ├── tabs.tsx │ ├── card.tsx │ ├── accordion.tsx │ ├── button.tsx │ ├── dialog.tsx │ └── command.tsx ├── mode-toggle.tsx ├── command-menu.tsx ├── icons.tsx ├── faq.tsx ├── Review.tsx ├── tracks.tsx └── code-editor.tsx ├── components.json ├── config ├── nav.ts ├── docs.ts ├── social.ts └── sidebar.ts ├── .gitignore ├── public ├── vercel.svg ├── news_bg.svg └── next.svg ├── content ├── batch │ ├── build │ │ ├── interview │ │ │ ├── transfer-list.mdx │ │ │ ├── counter.mdx │ │ │ ├── table.mdx │ │ │ ├── like.mdx │ │ │ ├── tabs.mdx │ │ │ └── star-rating.mdx │ │ └── react │ │ │ ├── quiz.mdx │ │ │ └── todo.mdx │ ├── learn │ │ ├── js │ │ │ ├── github-wrapper.mdx │ │ │ ├── wack-a-mole.mdx │ │ │ └── google-keep.mdx │ │ └── github │ │ │ └── intro.mdx │ ├── index.mdx │ ├── dsa │ │ ├── recursion.mdx │ │ ├── basic-sorting.mdx │ │ ├── set-map.mdx │ │ ├── stack.mdx │ │ ├── advance-sorting.mdx │ │ ├── loops.mdx │ │ ├── time-complexity.mdx │ │ ├── string.mdx │ │ └── search.mdx │ └── hire │ │ └── hire.mdx └── docs │ ├── index.mdx │ ├── components.mdx │ └── getting-started.mdx ├── tsconfig.json ├── types └── index.d.ts ├── styles ├── mdx.css └── globals.css ├── LICENSE ├── package.json ├── contentlayer.config.js ├── tailwind.config.js ├── CONTRIBUTING.md ├── README.md └── CODE_OF_CONDUCT.md /.prettierignore: -------------------------------------------------------------------------------- 1 | content -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendFreaks/Official-Website/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /.github/.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/" 5 | schedule: 6 | interval: "daily" 7 | -------------------------------------------------------------------------------- /app/[...not-Found]/page.tsx: -------------------------------------------------------------------------------- 1 | import { notFound } from "next/navigation"; 2 | import { FC } from "react"; 3 | 4 | const page: FC = () => { 5 | notFound(); 6 | }; 7 | 8 | export default page; 9 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const { withContentlayer } = require("next-contentlayer"); 2 | 3 | const nextConfig = { reactStrictMode: true, swcMinify: true }; 4 | 5 | module.exports = withContentlayer(nextConfig); 6 | -------------------------------------------------------------------------------- /components/video-player.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import ReactPlayer from "react-player"; 4 | type Props = { 5 | src: string; 6 | }; 7 | 8 | export default function VideoPlayer({ src }: Props) { 9 | return ( 10 |
11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tailwind": { 6 | "config": "tailwind.config.js", 7 | "css": "app/globals.css", 8 | "baseColor": "slate", 9 | "cssVariables": true 10 | }, 11 | "aliases": { 12 | "components": "@/components", 13 | "utils": "@/lib/utils" 14 | } 15 | } -------------------------------------------------------------------------------- /components/theme-provider.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import { ThemeProvider as NextThemesProvider } from "next-themes"; 5 | import { type ThemeProviderProps } from "next-themes/dist/types"; 6 | 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) { 8 | return {children}; 9 | } 10 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature.yml: -------------------------------------------------------------------------------- 1 | name: 📄 Feature Request 2 | description: Want to add a new Feature? use this 3 | title: "[Feat] " 4 | labels: ["📄 aspect: feature", "🚦 status: awaiting triage"] 5 | body: 6 | - type: textarea 7 | id: description 8 | attributes: 9 | label: Description 10 | description: A brief description of the feature. 11 | validations: 12 | required: true 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug.yml: -------------------------------------------------------------------------------- 1 | name: 🐛 Bug 2 | description: Report an issue to help improve the project. 3 | labels: ["🛠 goal: fix", "🚦 status: awaiting triage"] 4 | body: 5 | - type: textarea 6 | id: description 7 | attributes: 8 | label: Description 9 | description: A brief description of the question or issue, also include what you tried and what didn't work 10 | validations: 11 | required: true 12 | -------------------------------------------------------------------------------- /config/nav.ts: -------------------------------------------------------------------------------- 1 | import { NavItem } from "@/types"; 2 | 3 | export const navConfig: NavItem[] = [ 4 | { 5 | title: "Learn", 6 | href: "/batch/learn/html/basic", 7 | }, 8 | { 9 | title: "DSA in JS", 10 | href: "/batch/dsa/loops", 11 | }, 12 | { 13 | title: "Build", 14 | href: "/batch/build/react/fundamentals", 15 | }, 16 | { 17 | title: "Hire", 18 | href: "/batch/hire/hire", 19 | }, 20 | { 21 | title: "Docs", 22 | href: "/docs", 23 | }, 24 | ]; 25 | -------------------------------------------------------------------------------- /components/markdown/link.tsx: -------------------------------------------------------------------------------- 1 | import { Icons } from "../icons"; 2 | 3 | type Props = { 4 | link: string; 5 | emoji?: string; 6 | text: string; 7 | }; 8 | 9 | export default function HeadingWithLink({ link, emoji, text }: Props) { 10 | return ( 11 |
12 |

13 | {emoji} {text} 14 |

15 | 16 | 17 | 18 |
19 | ); 20 | } 21 | 4; 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | yarn.lock 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | #contentlayer 39 | .contentlayer -------------------------------------------------------------------------------- /config/docs.ts: -------------------------------------------------------------------------------- 1 | import { documentationConfig } from "@/types"; 2 | 3 | export const DocumentationConfig: documentationConfig = [ 4 | { 5 | title: "Getting Started", 6 | items: [ 7 | { 8 | title: "Installation", 9 | href: "/docs", 10 | }, 11 | { 12 | title: "Getting started", 13 | href: "/docs/getting-started", 14 | }, 15 | ], 16 | }, 17 | { 18 | title: "Documentation", 19 | items: [ 20 | { 21 | title: "Components", 22 | href: "/docs/components", 23 | }, 24 | ], 25 | }, 26 | ]; 27 | -------------------------------------------------------------------------------- /app/(marketing)/layout.tsx: -------------------------------------------------------------------------------- 1 | import AnnouncementSection from "@/components/layout/announcement-section"; 2 | import SiteFooter from "@/components/layout/site-footer"; 3 | import SiteHeader from "@/components/layout/site-header"; 4 | import { socialConfig } from "@/config/social"; 5 | 6 | export default function layout({ children }: { children: React.ReactNode }) { 7 | return ( 8 |
9 | 10 | 11 |
{children}
12 | 13 |
14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/layout/announcement-section.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { cn } from "@/lib/utils"; 3 | import { Button } from "../ui/button"; 4 | 5 | type Props = {}; 6 | 7 | export default function AnnouncementSection({}: Props) { 8 | return ( 9 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /.github/workflows/greeting.yml: -------------------------------------------------------------------------------- 1 | name: Greetings 2 | 3 | on: [pull_request_target, issues] 4 | 5 | jobs: 6 | greeting: 7 | runs-on: ubuntu-latest 8 | permissions: 9 | issues: write 10 | pull-requests: write 11 | steps: 12 | - uses: actions/first-interaction@v1 13 | with: 14 | repo-token: ${{ secrets.GITHUB_TOKEN }} 15 | issue-message: 'Hi 😄, thanks for creating your first contribution at Official-Website, do read and follow the Contribution Guidelines while contributing.' 16 | pr-message: 'Thank you for your pull request and welcome to our community! We will be getting back to you soon . Your patience will be greatly appreciated! Thanks! 🥳' 17 | -------------------------------------------------------------------------------- /.github/workflows/auto-reply.yml: -------------------------------------------------------------------------------- 1 | name: Auto_Response_on_PR_Merge 2 | 3 | on: 4 | pull_request_target: 5 | types: [closed] 6 | 7 | jobs: 8 | auto-response: 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - uses: derekprior/add-autoresponse@master 13 | env: 14 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 15 | with: 16 | respondableId: ${{ github.event.pull_request.node_id }} 17 | response: "Thank you @${{ github.event.pull_request.user.login }} for taking out your valuable time in order to contribute to our project. Looking forward for more such amazing contributions :)" 18 | author: ${{ github.event.pull_request.user.login }} 19 | exemptedAuthors: "Vishal-raj-1, ManishBisht777" -------------------------------------------------------------------------------- /content/batch/build/interview/transfer-list.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🕹️ Transfer List 🦔 3 | description: Interview Question 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website). 9 | 10 | 11 | 12 | 13 | 14 | # Transfer List 15 |
16 | Medium 17 |
18 | 19 |
20 | 21 | 22 | [Boiler Plate React](https://codesandbox.io/s/transferlist-yphs70) 23 | 24 |
25 | 26 | 27 | ## 📺 Video Solution 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /public/news_bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /components/docs-header.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils"; 2 | 3 | interface DocsHeaderProps extends React.HTMLAttributes { 4 | title: string; 5 | text?: string; 6 | } 7 | 8 | export const DocsHeader = ({ 9 | title, 10 | text, 11 | className, 12 | ...props 13 | }: DocsHeaderProps) => { 14 | return ( 15 | <> 16 |
17 |

18 | {title} 19 |

20 | {text && ( 21 |

22 | {text} 23 |

24 | )} 25 |
26 |
27 | 28 | ); 29 | }; 30 | -------------------------------------------------------------------------------- /content/batch/build/interview/counter.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🕹️ Counter 🦔 3 | description: Interview Question 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website). 9 | 10 | 11 | 12 | 13 | 14 | # Counter 15 |
16 | Medium 17 |
18 | {/* Google */} 19 |
20 |
21 | 22 |
23 | [Boiler Plate React](https://codesandbox.io/s/undoablecounter-ctzd8o) 24 |
25 | 26 | ## 📺 Video Solution 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /app/(docs)/docs/layout.tsx: -------------------------------------------------------------------------------- 1 | import { DocSideNav } from "@/components/layout/docs-nav"; 2 | import { ScrollArea } from "@/components/ui/scroll-area"; 3 | import { DocumentationConfig } from "@/config/docs"; 4 | import React from "react"; 5 | 6 | interface CourseRootLayoutProps { 7 | children: React.ReactNode; 8 | } 9 | 10 | const CourseRootLayout = ({ children }: CourseRootLayoutProps) => { 11 | return ( 12 |
13 | 18 | {children} 19 |
20 | ); 21 | }; 22 | 23 | export default CourseRootLayout; 24 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ], 22 | "baseUrl": ".", 23 | "paths": { 24 | "@/*": ["./*"], 25 | "contentlayer/generated": ["./.contentlayer/generated"] 26 | } 27 | }, 28 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts",".contentlayer/generated", "contentlayer.config.js"], 29 | "exclude": ["node_modules"] 30 | } 31 | -------------------------------------------------------------------------------- /app/(batches)/batch/layout.tsx: -------------------------------------------------------------------------------- 1 | import { DocsSidebarNav } from "@/components/layout/sidebar-nav"; 2 | import { ScrollArea } from "@/components/ui/scroll-area"; 3 | import { docsConfig } from "@/config/sidebar"; 4 | import React from "react"; 5 | 6 | interface CourseRootLayoutProps { 7 | children: React.ReactNode; 8 | } 9 | 10 | const CourseRootLayout = ({ children }: CourseRootLayoutProps) => { 11 | return ( 12 |
13 | 18 | {children} 19 |
20 | ); 21 | }; 22 | 23 | export default CourseRootLayout; 24 | -------------------------------------------------------------------------------- /components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface InputProps 6 | extends React.InputHTMLAttributes {} 7 | 8 | const Input = React.forwardRef( 9 | ({ className, type, ...props }, ref) => { 10 | return ( 11 | 20 | ) 21 | } 22 | ) 23 | Input.displayName = "Input" 24 | 25 | export { Input } 26 | -------------------------------------------------------------------------------- /components/markdown/callout.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils"; 2 | 3 | interface CalloutProps { 4 | icon?: string; 5 | children?: React.ReactNode; 6 | type?: "default" | "warning" | "danger" | "info" | "calm"; 7 | } 8 | 9 | export function Callout({ 10 | children, 11 | icon, 12 | type = "default", 13 | ...props 14 | }: CalloutProps) { 15 | return ( 16 |
25 | {icon && {icon}} 26 |
{children}
27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /content/batch/build/interview/table.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🕹️ Generate Table Component 🦔 3 | description: Interview Question 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website). 9 | 10 | 11 | 12 | 13 | 14 | # Generate Table 15 |
16 | Medium 17 |
18 | Google 19 |
20 |
21 | 22 |
23 | [Boiler Plate Js](https://codesandbox.io/s/generate-table-rhjb0u) 24 | [Boiler Plate React](https://codesandbox.io/s/generate-table-4zlolc) 25 |
26 | 27 | ## 📺 Video Solution 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /config/social.ts: -------------------------------------------------------------------------------- 1 | import { SocialConfig } from "@/types"; 2 | import { Github, Instagram, Linkedin, Youtube } from "lucide-react"; 3 | import { FaXTwitter } from "react-icons/fa6"; 4 | 5 | export const socialConfig: SocialConfig[] = [ 6 | { 7 | title: "GitHub", 8 | href: "https://github.com/FrontendFreaks", 9 | iconName: Github, 10 | }, 11 | { 12 | title: "Twitter", 13 | href: "https://twitter.com/frontendfreaks", 14 | iconName: FaXTwitter, 15 | }, 16 | { 17 | title: "YouTube", 18 | href: "https://www.youtube.com/c/VishalRajput_1", 19 | iconName: Youtube, 20 | }, 21 | { 22 | title: "Instagram", 23 | href: "https://www.instagram.com/vishalraj.dev/", 24 | iconName: Instagram, 25 | }, 26 | { 27 | title: "LinkedIn", 28 | href: "https://www.linkedin.com/company/frontendfreaks/", 29 | iconName: Linkedin, 30 | }, 31 | ]; 32 | 33 | // '' 34 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils"; 2 | import { Inter as FontSans } from "next/font/google"; 3 | import { ThemeProvider } from "@/components/theme-provider"; 4 | import "../styles/globals.css"; 5 | import "../styles/mdx.css"; 6 | 7 | const fontSans = FontSans({ 8 | subsets: ["latin"], 9 | weight: ["400", "500", "700"], 10 | variable: "--font-sans", 11 | }); 12 | 13 | export const metadata = { 14 | title: "Frontend Freaks", 15 | description: "Unleash your Frontend Powers", 16 | }; 17 | 18 | export default function RootLayout({ 19 | children, 20 | }: { 21 | children: React.ReactNode; 22 | }) { 23 | return ( 24 | 25 | 31 | 32 | {children} 33 | 34 | 35 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /content/batch/build/interview/like.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🕹️ Like Button 🦔 3 | description: Interview Question 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website). 9 | 10 | 11 | 12 | 13 | 14 | # Like Button 15 |
16 | Medium 17 |
18 | Amazon 19 |
20 |
21 | 22 |
23 | 24 | [Boiler Plate Js](https://codesandbox.io/s/like-button-dxv0ll) 25 | 26 | 27 | [Boiler Plate React](https://codesandbox.io/s/like-button-mhwv9u) 28 | 29 |
30 | 31 | 32 | ## 📺 Video Solution 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /components/layout/site-header.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import MainNav from "./main-nav"; 3 | import { navConfig } from "@/config/nav"; 4 | import { Button, buttonVariants } from "../ui/button"; 5 | import { ModeToggle } from "../mode-toggle"; 6 | import Link from "next/link"; 7 | import { cn } from "@/lib/utils"; 8 | 9 | type Props = {}; 10 | 11 | export default function SiteHeader({}: Props) { 12 | return ( 13 |
14 |
15 | 16 | 17 | 18 | 23 | Join Community 24 | 25 |
26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /content/batch/build/interview/tabs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🕹️ Tabs Components 🦔 3 | description: Interview Question 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website). 9 | 10 | 11 | 12 | 13 | 14 | # Tabs Component 15 |
16 | Medium 17 |
18 | Airbnb 19 |
20 | 21 | 22 |
23 | 24 |
25 | 26 | [Boiler Plate Js](https://codesandbox.io/s/tab-sw79m8?file=/src/Task.js) 27 | 28 | 29 | [Boiler Plate React](https://codesandbox.io/s/tab-l3pz59?file=/src/Task.js) 30 | 31 |
32 | 33 | 34 | ## 📺 Video Solution 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | 2 | import { Icon } from "@/components/icons"; 3 | import { LucideProps } from "lucide-react"; 4 | import { LucideIcon } from "lucide-react"; 5 | import { ElementType } from "react"; 6 | 7 | export interface NavItem { 8 | title: string; 9 | href: string; 10 | disabled?: boolean; 11 | } 12 | 13 | export type SidebarNavItem = { 14 | title: string; 15 | disabled?: boolean; 16 | } & ( 17 | | { 18 | href: string; 19 | items?: never; 20 | } 21 | | { 22 | href?: string; 23 | items: NavItem[]; 24 | } 25 | ); 26 | 27 | export type SidebarNav = { 28 | title: string; 29 | } & ( 30 | | { 31 | href: string; 32 | items: never; 33 | } 34 | | { 35 | href?: string; 36 | items: SidebarNavItem[]; 37 | } 38 | ); 39 | 40 | export type DocsConfig = { 41 | mainNav: NavItem[]; 42 | sidebarNav: SidebarNav[]; 43 | }; 44 | 45 | export type SocialConfig = { 46 | title: string 47 | href: string, 48 | iconName: Icon, 49 | } 50 | 51 | export type documentationConfig = SidebarNavItem[]; 52 | -------------------------------------------------------------------------------- /components/markdown/mdx-card.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | import { cn } from "@/lib/utils"; 4 | 5 | interface CardProps extends React.HTMLAttributes { 6 | href?: string; 7 | disabled?: boolean; 8 | } 9 | 10 | export function MdxCard({ 11 | href, 12 | className, 13 | children, 14 | disabled, 15 | ...props 16 | }: CardProps) { 17 | return ( 18 |
26 |
27 |
28 | {children} 29 |
30 |
31 | {href && ( 32 | 33 | View 34 | 35 | )} 36 |
37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /styles/mdx.css: -------------------------------------------------------------------------------- 1 | [data-rehype-pretty-code-fragment] code { 2 | @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0 text-sm text-black; 3 | counter-reset: line; 4 | box-decoration-break: clone; 5 | } 6 | 7 | [data-rehype-pretty-code-fragment] [data-line] { 8 | @apply px-4 py-1; 9 | } 10 | 11 | [data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before { 12 | counter-increment: line; 13 | content: counter(line); 14 | display: inline-block; 15 | width: 1rem; 16 | margin-right: 1rem; 17 | text-align: right; 18 | color: gray; 19 | } 20 | 21 | [data-rehype-pretty-code-fragment] .line--highlighted { 22 | @apply bg-slate-300 bg-opacity-10; 23 | } 24 | 25 | [data-rehype-pretty-code-fragment] .line-highlighted span { 26 | @apply relative; 27 | } 28 | 29 | [data-rehype-pretty-code-fragment] .word--highlighted { 30 | @apply rounded-md bg-slate-300 bg-opacity-10 p-1; 31 | } 32 | 33 | [data-rehype-pretty-code-title] { 34 | @apply mt-4 py-2 px-4 text-sm font-medium; 35 | } 36 | 37 | [data-rehype-pretty-code-title] + pre { 38 | @apply mt-0; 39 | } -------------------------------------------------------------------------------- /app/(docs)/docs/[[...slug]]/page.tsx: -------------------------------------------------------------------------------- 1 | import { allDocs } from "@/.contentlayer/generated"; 2 | import { DocsHeader } from "@/components/docs-header"; 3 | import { Mdx } from "@/components/markdown/mdx"; 4 | import { notFound } from "next/navigation"; 5 | 6 | type Props = { 7 | params: { 8 | slug: string[]; 9 | }; 10 | }; 11 | 12 | async function getDocFromParams(params: any) { 13 | const slug = params.slug?.join("/") || ""; 14 | const doc = allDocs.find((doc) => doc.slugAsParams === slug); 15 | 16 | if (!doc) { 17 | null; 18 | } 19 | 20 | return doc; 21 | } 22 | 23 | export default async function page({ params }: Props) { 24 | const doc = await getDocFromParams(params); 25 | 26 | if (!doc) { 27 | notFound(); 28 | } 29 | 30 | return ( 31 |
32 |
33 | 34 | 35 |
36 |
37 |
38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Frontend Freaks 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /app/(batches)/batch/[[...batchID]]/page.tsx: -------------------------------------------------------------------------------- 1 | import { allBatches } from "@/.contentlayer/generated"; 2 | import { DocsHeader } from "@/components/docs-header"; 3 | import { Mdx } from "@/components/markdown/mdx"; 4 | import { notFound } from "next/navigation"; 5 | 6 | type Props = { 7 | params: { 8 | batchID: string[]; 9 | }; 10 | }; 11 | 12 | async function getDocFromParams(params: any) { 13 | const slug = params.batchID?.join("/") || ""; 14 | 15 | const batch = allBatches.find((batch) => batch.slugAsParams === slug); 16 | 17 | if (!batch) { 18 | null; 19 | } 20 | 21 | return batch; 22 | } 23 | 24 | export default async function page({ params }: Props) { 25 | const batch = await getDocFromParams(params); 26 | 27 | if (!batch) { 28 | notFound(); 29 | } 30 | 31 | return ( 32 |
33 |
34 | 35 | 36 |
37 |
38 |
39 |
40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /content/batch/build/interview/star-rating.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🕹️ Star Rating Component 🦔 3 | description: Interview Question 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website). 9 | 10 | 11 | 12 | 13 | 14 | # Star Rating Component 15 |
16 | Medium 17 |
18 | Airbnb 19 | Amazon 20 | Uber 21 |
22 |
23 | 24 |
25 | [Boiler Plate Js](https://codesandbox.io/s/starrating-eukmyy?file=/src/Task.js) 26 | [Boiler Plate React](https://codesandbox.io/s/starrating-okbg4t) 27 |
28 | 29 | ## 📺 Video Solution 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /.github/config.yml: -------------------------------------------------------------------------------- 1 | # Configuration for welcome - https://github.com/behaviorbot/welcome 2 | 3 | # Configuration for new-issue-welcome - https://github.com/behaviorbot/new-issue-welcome 4 | # Comment to be posted to on first time issues 5 | 6 | newIssueWelcomeComment: > 7 | Hello there!👋 Welcome to the project!🚀⚡ 8 | 9 | 10 | Thank you and congrats🎉 for opening your very first issue in this project. Please make sure not to start working on the issue, unless you get assigned to it.😄 11 | 12 | 13 | # Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome 14 | # Comment to be posted to on PRs from first time contributors in your repository 15 | 16 | newPRWelcomeComment: > 17 | Hello there!👋 Welcome to the project!💖 18 | 19 | 20 | Thank you and congrats🎉 for opening your first pull request. We will get back to you as soon as we can 😄. 21 | 22 | 23 | # Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge 24 | # Comment to be posted to on pull requests merged by a first time user 25 | 26 | firstPRMergeComment: > 27 | Congrats on merging your first pull request! 🎉 All the best for your amazing open source journey ahead 🚀. -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Fixes Issue 4 | 5 | 6 | 7 | 8 | 9 | ## Changes proposed 10 | 11 | 12 | 13 | 14 | 19 | 20 | ## Check List (Check all the applicable boxes) 21 | 22 | - [ ] My code follows the code style of this project. 23 | - [ ] My change requires changes to the documentation. 24 | - [ ] I have updated the documentation accordingly. 25 | - [ ] All new and existing tests passed. 26 | - [ ] This PR does not contain plagiarized content. 27 | - [ ] The title of my pull request is a short description of the requested changes. 28 | 29 | ## Screenshots 30 | 31 | 32 | 33 | ## Note to reviewers 34 | 35 | 36 | -------------------------------------------------------------------------------- /content/docs/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Documentation 3 | description: Welcome to the Frontend Freaks Documentation. 4 | --- 5 | 6 | This is the Documentation page for the Frontend Freaks site. 7 | in 8 | 9 | 10 | Here you should find everything you need from getting started with changing content of pages. We welcome contributions, check out the Frontend Freaks repo and the documentation source on GitHub for more information. 11 | 12 | 13 | 14 | ## Installation 15 | 16 | - Fork the Repository into your github account 17 | - Clone the project into your local machine by running following comman in console 18 | 19 | ```sh 20 | git clone https://github.com//frontend-freaks-website.git 21 | ``` 22 | 23 | - Navigate to the folder after successful cloning 24 | 25 | ```sh 26 | cd frontend-freaks-website 27 | ``` 28 | 29 | - Install required dependencies to run this software in your local machine 30 | 31 | ```sh 32 | npm i 33 | ``` 34 | 35 | 36 | As Frontend Freaks Website uses npm package manager, it is recommended to use 37 | npm, [install npm](https://docs.npmjs.com/cli/v8/commands/npm-install) 38 | 39 | 40 | - Run the project on your local machine 41 | 42 | ```sh 43 | npm run start 44 | ``` 45 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/ui/popover.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as PopoverPrimitive from "@radix-ui/react-popover" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | const Popover = PopoverPrimitive.Root 9 | 10 | const PopoverTrigger = PopoverPrimitive.Trigger 11 | 12 | const PopoverContent = React.forwardRef< 13 | React.ElementRef, 14 | React.ComponentPropsWithoutRef 15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( 16 | 17 | 27 | 28 | )) 29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName 30 | 31 | export { Popover, PopoverTrigger, PopoverContent } 32 | -------------------------------------------------------------------------------- /components/layout/mobile-nav.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | import { cn } from "@/lib/utils"; 4 | import { Icons } from "@/components/icons"; 5 | import { NavItem } from "@/types"; 6 | 7 | interface MobileNavProps { 8 | items: NavItem[]; 9 | children?: React.ReactNode; 10 | } 11 | 12 | export function MobileNav({ items, children }: MobileNavProps) { 13 | return ( 14 |
19 |
20 | 21 | 22 | Menu 23 | 24 | 37 | {children} 38 |
39 |
40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /components/mode-toggle.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import { MoonIcon, SunIcon } from "@radix-ui/react-icons"; 5 | import { useTheme } from "next-themes"; 6 | 7 | import { Button } from "@/components/ui/button"; 8 | 9 | export function ModeToggle() { 10 | const { resolvedTheme, setTheme } = useTheme(); 11 | 12 | const isDarkMode = resolvedTheme === "dark"; 13 | 14 | const toggleTheme = () => { 15 | setTheme(isDarkMode ? "light" : "dark"); 16 | }; 17 | 18 | return ( 19 | <> 20 | 43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /app/not-found.tsx: -------------------------------------------------------------------------------- 1 | import { Icons } from "@/components/icons"; 2 | import { buttonVariants } from "@/components/ui/button"; 3 | import Image from "next/image"; 4 | import Link from "next/link"; 5 | import React from "react"; 6 | 7 | const PageNotFound = () => { 8 | return ( 9 |
10 |
11 |
12 | Rocket Crashed 19 |

20 | Page not found... 21 |

22 |

23 | The Page you're searching for does not exist. 24 |

25 | 32 | 33 | Back to home 34 | 35 |
36 |
37 |
38 | ); 39 | }; 40 | 41 | export default PageNotFound; 42 | -------------------------------------------------------------------------------- /content/batch/learn/js/github-wrapper.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🕹️ Learn JavaScript by Building Github Wrapper 🦔 3 | description: 🎬Master JavaScript Promises, Fetch API, and Async/Await with GitHub API Wrapper Project 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website). 9 | 10 | 11 | 12 | ## Whats on this page? 13 | 14 | - 🔧 Project Overview (Github Wrapper) 15 | - 🌐 HTML for the website 16 | - 🧠 JS for the website 17 | - 🗃️ Fetch API in JS 18 | - 🤝 Promises in JS 19 | - ✅ Promises.then() 20 | - ❌ Promises.catch() 21 | - 🚀 How to use fetch API in JS? 22 | - 👥 Creating GitHub user profile card 23 | - 📁 Creating cards for projects 24 | - ⏭️ Async & Await in JS 25 | 26 | 27 | 28 | 29 | Learn 30 | Assignment 31 | 32 | 33 | 34 | ## 📺 Watch Now 35 | 36 | 37 | 38 | 39 | ### 📌🔨 Task 40 | Add the following features to the Google Keep clone built in the previous tutorial: 41 | 42 | - 1. Add these filter on repos, repository should be sorted on the basis of stars, forks and langauge. 43 | - 2. Put Some more information on repository card 44 | - 3. Try to add chart on your project to showcase stats using chart.js, refer documentation here: https://www.chartjs.org/ 45 | - 4. Working Demo [Link](https://git-hub-profile-finder-zeta.vercel.app/) 46 | 47 | 48 | Good luck with the assignment! 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /content/batch/build/react/quiz.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🕹️ Quiz App 🦔 3 | description: Learn ReactJS By building a Quiz app 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website). 9 | 10 | 11 | 12 | ## Whats on this page? 13 | 14 | - Preview of Quiz App 📝 15 | - Setting up the Coding Environment 💻 16 | - List Rendering 📋 17 | - Conditional Rendering 🤔 18 | - Refactoring APP into a Component 🔄 19 | - Understanding Fragment in React 🧩 20 | - Organizing all Components in the Components Folder 📁 21 | 22 | 23 | 24 | 25 | Learn 26 | Assignment 27 | 28 | 29 | 30 | ## 📺 Watch Now 31 | 32 | 33 | 34 | 35 | 36 | ### 📌🔨 Task 37 | - Build a time-bound question-answer web app using ReactJS. 38 | - Add a timer that stops when the time runs out and displays the user's score. 39 | - Include a review answer section where users can go back and check their answers. 40 | - Ensure the web app has an aesthetically pleasing design. 41 | - Working Demo [Link](https://quiz-project-gilt.vercel.app/) 42 | 43 | 44 | 🚀 Don't forget to share your learning and assignments on LinkedIn and Twitter using #FrontendWithVishal to showcase your skills to potential employers! 45 | 46 | 47 | 48 | Understanding how React components render will help you grasp advanced topics in ReactJS and make debugging your code much easier. So, this task is a must-do! 🤔👨‍💻 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /components/ui/scroll-area.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | const ScrollArea = React.forwardRef< 9 | React.ElementRef, 10 | React.ComponentPropsWithoutRef 11 | >(({ className, children, ...props }, ref) => ( 12 | 17 | 18 | {children} 19 | 20 | 21 | 22 | 23 | )) 24 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName 25 | 26 | const ScrollBar = React.forwardRef< 27 | React.ElementRef, 28 | React.ComponentPropsWithoutRef 29 | >(({ className, orientation = "vertical", ...props }, ref) => ( 30 | 43 | 44 | 45 | )) 46 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName 47 | 48 | export { ScrollArea, ScrollBar } 49 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontendfreaks", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "contentlayer build && next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@fortawesome/free-brands-svg-icons": "^6.4.2", 13 | "@fortawesome/free-solid-svg-icons": "^6.4.2", 14 | "@fortawesome/react-fontawesome": "^0.2.0", 15 | "@monaco-editor/react": "^4.5.2", 16 | "@radix-ui/react-accordion": "^1.1.2", 17 | "@radix-ui/react-dialog": "^1.0.4", 18 | "@radix-ui/react-dropdown-menu": "^2.0.5", 19 | "@radix-ui/react-icons": "^1.3.0", 20 | "@radix-ui/react-popover": "^1.0.6", 21 | "@radix-ui/react-scroll-area": "^1.0.4", 22 | "@radix-ui/react-slot": "^1.0.2", 23 | "@radix-ui/react-tabs": "^1.0.4", 24 | "@types/node": "20.3.1", 25 | "@types/react": "18.2.14", 26 | "@types/react-dom": "18.2.6", 27 | "autoprefixer": "10.4.14", 28 | "class-variance-authority": "^0.6.0", 29 | "clsx": "^1.2.1", 30 | "cmdk": "^0.2.0", 31 | "contentlayer": "^0.3.3", 32 | "embla-carousel-react": "^8.0.0-rc17", 33 | "eslint": "8.43.0", 34 | "eslint-config-next": "13.4.7", 35 | "lucide-react": "^0.252.0", 36 | "next": "13.4.7", 37 | "next-contentlayer": "^0.3.3", 38 | "next-themes": "^0.2.1", 39 | "postcss": "8.4.24", 40 | "react": "18.2.0", 41 | "react-dom": "18.2.0", 42 | "react-icons": "^4.11.0", 43 | "react-player": "^2.12.0", 44 | "rehype-autolink-headings": "^6.1.1", 45 | "rehype-pretty-code": "^0.10.0", 46 | "rehype-slug": "^5.1.0", 47 | "remark-gfm": "^3.0.1", 48 | "shiki": "^0.14.3", 49 | "tailwind-merge": "^1.13.2", 50 | "tailwindcss": "3.3.2", 51 | "tailwindcss-animate": "^1.0.6", 52 | "typescript": "5.1.3" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /app/(batches)/layout.tsx: -------------------------------------------------------------------------------- 1 | import { CommandMenu } from "@/components/command-menu"; 2 | import { Icons } from "@/components/icons"; 3 | import MainNav from "@/components/layout/main-nav"; 4 | import { DocsSidebarNav } from "@/components/layout/sidebar-nav"; 5 | import SiteFooter from "@/components/layout/site-footer"; 6 | 7 | import { ModeToggle } from "@/components/mode-toggle"; 8 | import { navConfig } from "@/config/nav"; 9 | import { docsConfig } from "@/config/sidebar"; 10 | import { socialConfig } from "@/config/social"; 11 | import Link from "next/link"; 12 | 13 | 14 | interface BatchRootLayoutProps { 15 | children: React.ReactNode; 16 | } 17 | 18 | const CourseRootLayout = ({ children }: BatchRootLayoutProps) => { 19 | return ( 20 |
21 |
22 |
23 | 24 | 25 | 26 | 27 |
28 | 38 |
39 |
40 |
41 |
{children}
42 | 43 |
44 | ); 45 | }; 46 | 47 | export default CourseRootLayout; 48 | -------------------------------------------------------------------------------- /content/batch/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Batches 3 | description: Welcome to the Frontend Freaks Batches. 4 | 5 | --- 6 | 7 | ## Batch Introduction 8 | 9 | This course is focused on making you a frontend developer from a beginner to an advanced level. 10 | 11 | - 📊 From Beginner to Advanced Level 🚀 12 | - 🛠️ Project Driven Learning 📁 13 | - 📝 Assignments and Notes Provided 📚 14 | - 👥 Supportive and Encouraging Community 🤝 15 | - 🎓 Learn from Industry Experts 👨‍🏫 16 | 17 | 18 | 19 | ## Batches 20 | 21 | Select a Batch below to learn more about it. 22 | 23 |
24 | 25 | Image 32 | 33 | #### Learn 34 | Learn HTML, CSS, JS and Git & Github 35 | 36 | 37 | Image 44 | 45 | #### DSA in Javascript 46 | Learn data structures and algorithms in JavaScript 47 | 48 | 49 | 50 | Image 57 | 58 | #### Build 59 | Master React, Redux and Next Js 60 | 61 | 62 | 63 | Image 70 | 71 | #### Hire 72 | Get Interview Tips and Tricks 73 | 74 |
75 | -------------------------------------------------------------------------------- /app/(docs)/layout.tsx: -------------------------------------------------------------------------------- 1 | import { CommandMenu } from "@/components/command-menu"; 2 | import { Icons } from "@/components/icons"; 3 | import { DocSideNav } from "@/components/layout/docs-nav"; 4 | import MainNav from "@/components/layout/main-nav"; 5 | import { ModeToggle } from "@/components/mode-toggle"; 6 | import { navConfig } from "@/config/nav"; 7 | import { DocumentationConfig } from "@/config/docs"; 8 | import { docsConfig } from "@/config/sidebar"; 9 | import Link from "next/link"; 10 | import SiteFooter from "@/components/layout/site-footer"; 11 | import { socialConfig } from "@/config/social"; 12 | 13 | interface BatchRootLayoutProps { 14 | children: React.ReactNode; 15 | } 16 | 17 | const CourseRootLayout = ({ children }: BatchRootLayoutProps) => { 18 | return ( 19 |
20 |
21 |
22 | 23 | 24 | 25 | 26 |
27 | 37 |
38 |
39 |
40 |
{children}
41 | 42 |
43 | ); 44 | }; 45 | 46 | export default CourseRootLayout; 47 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | :root { 7 | --background: 0 0% 100%; 8 | --foreground: 222.2 84% 4.9%; 9 | 10 | --muted: 210 40% 96.1%; 11 | --muted-foreground: 215.4 16.3% 46.9%; 12 | 13 | --popover: 0 0% 100%; 14 | --popover-foreground: 222.2 84% 4.9%; 15 | 16 | --card: 0 0% 100%; 17 | --card-foreground: 222.2 84% 4.9%; 18 | 19 | --border: 214.3 31.8% 91.4%; 20 | --input: 214.3 31.8% 91.4%; 21 | 22 | --primary: 222.2 47.4% 11.2%; 23 | --primary-foreground: 210 40% 98%; 24 | 25 | --secondary: 210 40% 96.1%; 26 | --secondary-foreground: 222.2 47.4% 11.2%; 27 | 28 | --accent: 210 40% 96.1%; 29 | --accent-foreground: 222.2 47.4% 11.2%; 30 | 31 | --destructive: 0 84.2% 60.2%; 32 | --destructive-foreground: 210 40% 98%; 33 | 34 | --ring: 215 20.2% 65.1%; 35 | 36 | --radius: 0.5rem; 37 | } 38 | 39 | .dark { 40 | --background: 222.2 84% 4.9%; 41 | --foreground: 210 40% 98%; 42 | 43 | --muted: 217.2 32.6% 17.5%; 44 | --muted-foreground: 215 20.2% 65.1%; 45 | 46 | --popover: 222.2 84% 4.9%; 47 | --popover-foreground: 210 40% 98%; 48 | 49 | --card: 222.2 84% 4.9%; 50 | --card-foreground: 210 40% 98%; 51 | 52 | --border: 217.2 32.6% 17.5%; 53 | --input: 217.2 32.6% 17.5%; 54 | 55 | --primary: 210 40% 98%; 56 | --primary-foreground: 222.2 47.4% 11.2%; 57 | 58 | --secondary: 217.2 32.6% 17.5%; 59 | --secondary-foreground: 210 40% 98%; 60 | 61 | --accent: 217.2 32.6% 17.5%; 62 | --accent-foreground: 210 40% 98%; 63 | 64 | --destructive: 0 62.8% 30.6%; 65 | --destructive-foreground: 0 85.7% 97.3%; 66 | 67 | --ring: 217.2 32.6% 17.5%; 68 | } 69 | } 70 | 71 | @layer base { 72 | * { 73 | @apply border-border; 74 | } 75 | body { 76 | @apply bg-background text-foreground; 77 | } 78 | } -------------------------------------------------------------------------------- /content/batch/learn/js/wack-a-mole.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🕹️ Learn JavaScript by Building a Whack A Mole Game 🦔 3 | description: In this tutorial, you will build fully working project. I have give some more features to implement by you as an assignment. 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website). 9 | 10 | 11 | 12 | ## Whats on this page? 13 | 14 | - 🎬 Introduction to Whack A Mole Game 15 | - 🔧 Structuring the Game Board with HTML 16 | - 🎨 Designing the Game with CSS 17 | - 🧠 Writing the Game Logic with JS 18 | - 🎲 Placing the Mole at Random Positions 19 | - 🆕 Logic to Start a New Game 20 | - 🔄 Understanding Callback Functions 21 | - ⏰ Using setInterval() for Game Timing 22 | - 👊 Logic for Hitting the Mole 23 | - ⏳ Logic for Time Left in the Game 24 | - 🛑 Using clearInterval() to Stop the Game 25 | - ⏸️ Adding Pause and Resume Functionality 26 | - 🎵 Adding Music to the Game 27 | - ⌛ Using setTimeout() for Delayed Actions 28 | 29 | 30 | 31 | 32 | Learn 33 | Assignment 34 | 35 | 36 | 37 | ## 📺 Watch Now 38 | 39 | 40 | 41 | 42 | ### 📌🔨 Task 43 | Add the following features to the Google Keep clone built in the previous tutorial: 44 | 45 | - 1. Complete the project, make it responsive. 46 | - 2. Deploy your fully working frontend project on GitHub and host it. Share the project's link on LinkedIn and Twitter using the hashtag **#FrontendWithVishal** to showcase your skills and connect with the community 47 | - 3. Working Demo [Link](https://knock-a-rodent.netlify.app/) 48 | Good luck with the assignment! 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /components/ui/tabs.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as TabsPrimitive from "@radix-ui/react-tabs" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | const Tabs = TabsPrimitive.Root 9 | 10 | const TabsList = React.forwardRef< 11 | React.ElementRef, 12 | React.ComponentPropsWithoutRef 13 | >(({ className, ...props }, ref) => ( 14 | 22 | )) 23 | TabsList.displayName = TabsPrimitive.List.displayName 24 | 25 | const TabsTrigger = React.forwardRef< 26 | React.ElementRef, 27 | React.ComponentPropsWithoutRef 28 | >(({ className, ...props }, ref) => ( 29 | 37 | )) 38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName 39 | 40 | const TabsContent = React.forwardRef< 41 | React.ElementRef, 42 | React.ComponentPropsWithoutRef 43 | >(({ className, ...props }, ref) => ( 44 | 52 | )) 53 | TabsContent.displayName = TabsPrimitive.Content.displayName 54 | 55 | export { Tabs, TabsList, TabsTrigger, TabsContent } 56 | -------------------------------------------------------------------------------- /components/ui/card.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | const Card = React.forwardRef< 6 | HTMLDivElement, 7 | React.HTMLAttributes 8 | >(({ className, ...props }, ref) => ( 9 |
17 | )) 18 | Card.displayName = "Card" 19 | 20 | const CardHeader = React.forwardRef< 21 | HTMLDivElement, 22 | React.HTMLAttributes 23 | >(({ className, ...props }, ref) => ( 24 |
29 | )) 30 | CardHeader.displayName = "CardHeader" 31 | 32 | const CardTitle = React.forwardRef< 33 | HTMLParagraphElement, 34 | React.HTMLAttributes 35 | >(({ className, ...props }, ref) => ( 36 |

44 | )) 45 | CardTitle.displayName = "CardTitle" 46 | 47 | const CardDescription = React.forwardRef< 48 | HTMLParagraphElement, 49 | React.HTMLAttributes 50 | >(({ className, ...props }, ref) => ( 51 |

56 | )) 57 | CardDescription.displayName = "CardDescription" 58 | 59 | const CardContent = React.forwardRef< 60 | HTMLDivElement, 61 | React.HTMLAttributes 62 | >(({ className, ...props }, ref) => ( 63 |

64 | )) 65 | CardContent.displayName = "CardContent" 66 | 67 | const CardFooter = React.forwardRef< 68 | HTMLDivElement, 69 | React.HTMLAttributes 70 | >(({ className, ...props }, ref) => ( 71 |
76 | )) 77 | CardFooter.displayName = "CardFooter" 78 | 79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } 80 | -------------------------------------------------------------------------------- /components/layout/docs-nav.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Link from "next/link"; 4 | import { usePathname } from "next/navigation"; 5 | 6 | import { cn } from "@/lib/utils"; 7 | import { NavItem, SidebarNavItem, documentationConfig } from "@/types"; 8 | 9 | export interface DocsSidebarNavProps { 10 | items: documentationConfig; 11 | } 12 | 13 | export function DocSideNav({ items }: DocsSidebarNavProps) { 14 | const pathname = usePathname(); 15 | 16 | return items.length ? ( 17 |
18 | {items.map((item, index) => ( 19 |
20 |

21 | {item.title} 22 |

23 |
24 | {item.items ? ( 25 | 26 | ) : null} 27 |
28 |
29 | ))} 30 |
31 | ) : null; 32 | } 33 | 34 | interface DocsSidebarNavItemsProps { 35 | items: NavItem[] | undefined; 36 | pathname: string | null; 37 | } 38 | 39 | export function DocsSidebarNavItems({ 40 | items, 41 | pathname, 42 | }: DocsSidebarNavItemsProps) { 43 | return items?.length ? ( 44 |
45 | {items.map((item, index) => { 46 | return ( 47 | 48 | ); 49 | })} 50 |
51 | ) : null; 52 | } 53 | 54 | interface DocsSidebarNavItemsrops { 55 | item: NavItem | SidebarNavItem; 56 | pathname: string | null; 57 | } 58 | 59 | export function DocsSidebarNavItem({ 60 | item, 61 | pathname, 62 | }: DocsSidebarNavItemsrops) { 63 | return item.href ? ( 64 | 70 | {item.title} 71 | 72 | ) : ( 73 | 74 | {item.title} 75 | 76 | ); 77 | } 78 | -------------------------------------------------------------------------------- /components/ui/accordion.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as AccordionPrimitive from "@radix-ui/react-accordion" 5 | import { ChevronDown } from "lucide-react" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | const Accordion = AccordionPrimitive.Root 10 | 11 | const AccordionItem = React.forwardRef< 12 | React.ElementRef, 13 | React.ComponentPropsWithoutRef 14 | >(({ className, ...props }, ref) => ( 15 | 20 | )) 21 | AccordionItem.displayName = "AccordionItem" 22 | 23 | const AccordionTrigger = React.forwardRef< 24 | React.ElementRef, 25 | React.ComponentPropsWithoutRef 26 | >(({ className, children, ...props }, ref) => ( 27 | 28 | svg]:rotate-180", 32 | className 33 | )} 34 | {...props} 35 | > 36 | {children} 37 | 38 | 39 | 40 | )) 41 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName 42 | 43 | const AccordionContent = React.forwardRef< 44 | React.ElementRef, 45 | React.ComponentPropsWithoutRef 46 | >(({ className, children, ...props }, ref) => ( 47 | 55 |
{children}
56 | 57 | )) 58 | AccordionContent.displayName = AccordionPrimitive.Content.displayName 59 | 60 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } 61 | -------------------------------------------------------------------------------- /components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Slot } from "@radix-ui/react-slot" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", 9 | { 10 | variants: { 11 | variant: { 12 | default: "bg-primary text-primary-foreground hover:bg-primary/90", 13 | destructive: 14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90", 15 | rounded: "bg-primary text-primary-foreground hover:bg-primary/90 rounded-full", 16 | outline: 17 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground", 18 | outlineRounded: 19 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground rounded-full", 20 | secondary: 21 | "bg-secondary text-secondary-foreground hover:bg-secondary/80", 22 | ghost: "hover:bg-accent hover:text-accent-foreground", 23 | link: "text-primary underline-offset-4 hover:underline", 24 | }, 25 | size: { 26 | default: "h-10 px-4 py-2", 27 | sm: "h-9 rounded-md px-3", 28 | lg: "h-11 rounded-md px-8", 29 | icon: "h-10 w-10", 30 | }, 31 | }, 32 | defaultVariants: { 33 | variant: "default", 34 | size: "default", 35 | }, 36 | } 37 | ) 38 | 39 | export interface ButtonProps 40 | extends React.ButtonHTMLAttributes, 41 | VariantProps { 42 | asChild?: boolean 43 | } 44 | 45 | const Button = React.forwardRef( 46 | ({ className, variant, size, asChild = false, ...props }, ref) => { 47 | const Comp = asChild ? Slot : "button" 48 | return ( 49 | 54 | ) 55 | } 56 | ) 57 | Button.displayName = "Button" 58 | 59 | export { Button, buttonVariants } 60 | -------------------------------------------------------------------------------- /components/layout/main-nav.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Link from "next/link"; 4 | import { Icons } from "../icons"; 5 | import { usePathname, useSelectedLayoutSegment } from "next/navigation"; 6 | import { cn } from "@/lib/utils"; 7 | import { MobileNav } from "./mobile-nav"; 8 | import { NavItem } from "@/types"; 9 | import { useEffect, useState } from "react"; 10 | 11 | import { useRouter } from "next/navigation"; 12 | 13 | interface MainNavProps { 14 | items?: NavItem[]; 15 | children?: React.ReactNode; 16 | } 17 | 18 | export default function MainNav({ items, children }: MainNavProps) { 19 | const segment = useSelectedLayoutSegment(); 20 | const [showMobileMenu, setShowMobileMenu] = useState(false); 21 | 22 | let pathname = usePathname(); 23 | 24 | return ( 25 |
26 | 27 | 28 | Frontend Freaks 29 | 30 | 31 | 32 | {items?.length ? ( 33 |
34 | 53 |
54 | ) : null} 55 | 56 | 63 | {showMobileMenu && items && ( 64 | {children} 65 | )} 66 |
67 | ); 68 | } -------------------------------------------------------------------------------- /content/batch/build/react/todo.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🕹️ Todo App 🦔 3 | description: Learn ReactJS By building a todo app 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website). 9 | 10 | 11 | 12 | ## Whats on this page? 13 | 14 | - Preview of Todo App 📝 15 | - Setting up the Coding Environment 💻 16 | - List Rendering 📋 17 | - Adding a Task ➕ 18 | - Deleting a Task ❌ 19 | - Conditional Rendering 🤔 20 | - Marking a Task as Complete ✅ 21 | - Adding Task Filters 🔍 22 | - Clearing All Completed Tasks 🗑️ 23 | - Showing Remaining Tasks Count 🔢 24 | - Refactoring APP into a Component 🔄 25 | - Understanding Fragment in React 🧩 26 | - Organizing all Components in the Components Folder 📁 27 | - How to Submit the Assignment? 📩 28 | 29 | 30 | 31 | 32 | Learn 33 | Assignment 34 | 35 | 36 | 37 | ## 📺 Watch Now 38 | 39 | 40 | 41 | 42 | ### 📌🔨 Task 43 | - Add, Delete and Mark as Complete the Task 44 | - Filter Active and Completed Task 45 | - Store Tasks in local storage, so that tasks doesn’t disappear on refreshing. 46 | (Optional) Implement Drag and Drop Task feature, you can use react-beautiful-dnd npm package. Refer https://www.npmjs.com/package/react-beautiful-dnd 47 | - Design the website as illustrated in the video 48 | - Add Both light and dark theme 49 | - Working Demo [Link](https://modern-todo-app.vercel.app/) 50 | 51 | Did you understand how ReactJS renders components? Take a moment to explain the concepts of Triggering a render, Rendering the component, and Committing to the DOM in a LinkedIn post or Twitter thread with a helpful image. Don't forget to use the hashtag #frontendwithVishal. Learn How React Component Trigger Rendering and Render the Component. 52 | 53 | 54 | 55 | Understanding how React components render will help you grasp advanced topics in ReactJS and make debugging your code much easier. So, this task is a must-do! 🤔👨‍💻 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /contentlayer.config.js: -------------------------------------------------------------------------------- 1 | import { defineDocumentType, makeSource } from "contentlayer/source-files"; 2 | import rehypeAutolinkHeadings from "rehype-autolink-headings"; 3 | import rehypePrettyCode from "rehype-pretty-code"; 4 | import rehypeSlug from "rehype-slug"; 5 | import remarkGfm from "remark-gfm"; 6 | 7 | /** @type {import('contentlayer/source-files').ComputedFields} */ 8 | const computedFields = { 9 | slug: { 10 | type: "string", 11 | resolve: (doc) => `/${doc._raw.flattenedPath}`, 12 | }, 13 | slugAsParams: { 14 | type: "string", 15 | resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"), 16 | }, 17 | }; 18 | 19 | export const Batch = defineDocumentType(() => ({ 20 | name: "Batch", 21 | filePathPattern: `batch/**/*.mdx`, 22 | contentType: "mdx", 23 | fields: { 24 | title: { 25 | type: "string", 26 | required: true, 27 | }, 28 | description: { 29 | type: "string", 30 | }, 31 | published: { 32 | type: "boolean", 33 | default: true, 34 | }, 35 | }, 36 | computedFields, 37 | })); 38 | 39 | export const Doc = defineDocumentType(() => ({ 40 | name: "Doc", 41 | filePathPattern: `docs/**/*.mdx`, 42 | contentType: "mdx", 43 | fields: { 44 | title: { 45 | type: "string", 46 | required: true, 47 | }, 48 | description: { 49 | type: "string", 50 | }, 51 | published: { 52 | type: "boolean", 53 | default: true, 54 | }, 55 | }, 56 | computedFields, 57 | })); 58 | 59 | export default makeSource({ 60 | contentDirPath: "./content", 61 | documentTypes: [Batch, Doc], 62 | mdx: { 63 | remarkPlugins: [remarkGfm], 64 | rehypePlugins: [ 65 | rehypeSlug, 66 | [ 67 | rehypePrettyCode, 68 | { 69 | theme: "github-dark", 70 | onVisitLine(node) { 71 | // Prevent lines from collapsing in `display: grid` mode, and allow empty 72 | // lines to be copy/pasted 73 | if (node.children.length === 0) { 74 | node.children = [{ type: "text", value: " " }]; 75 | } 76 | }, 77 | }, 78 | ], 79 | [ 80 | rehypeAutolinkHeadings, 81 | { 82 | properties: { 83 | className: ["subheading-anchor"], 84 | ariaLabel: "Link to section", 85 | }, 86 | }, 87 | ], 88 | ], 89 | }, 90 | }); 91 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | darkMode: ["class"], 4 | content: [ 5 | "./pages/**/*.{ts,tsx}", 6 | "./components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./app/**/*.{ts,tsx}", 8 | "./src/**/*.{ts,tsx}", 9 | "./content/**/*.{md,mdx}", 10 | ], 11 | theme: { 12 | container: { 13 | center: true, 14 | padding: "2rem", 15 | screens: { 16 | "2xl": "1400px", 17 | }, 18 | }, 19 | extend: { 20 | colors: { 21 | border: "hsl(var(--border))", 22 | input: "hsl(var(--input))", 23 | ring: "hsl(var(--ring))", 24 | background: "hsl(var(--background))", 25 | foreground: "hsl(var(--foreground))", 26 | primary: { 27 | DEFAULT: "hsl(var(--primary))", 28 | foreground: "hsl(var(--primary-foreground))", 29 | }, 30 | secondary: { 31 | DEFAULT: "hsl(var(--secondary))", 32 | foreground: "hsl(var(--secondary-foreground))", 33 | }, 34 | destructive: { 35 | DEFAULT: "hsl(var(--destructive))", 36 | foreground: "hsl(var(--destructive-foreground))", 37 | }, 38 | muted: { 39 | DEFAULT: "hsl(var(--muted))", 40 | foreground: "hsl(var(--muted-foreground))", 41 | }, 42 | accent: { 43 | DEFAULT: "hsl(var(--accent))", 44 | foreground: "hsl(var(--accent-foreground))", 45 | }, 46 | popover: { 47 | DEFAULT: "hsl(var(--popover))", 48 | foreground: "hsl(var(--popover-foreground))", 49 | }, 50 | card: { 51 | DEFAULT: "hsl(var(--card))", 52 | foreground: "hsl(var(--card-foreground))", 53 | }, 54 | }, 55 | borderRadius: { 56 | lg: "var(--radius)", 57 | md: "calc(var(--radius) - 2px)", 58 | sm: "calc(var(--radius) - 4px)", 59 | }, 60 | keyframes: { 61 | "accordion-down": { 62 | from: { height: 0 }, 63 | to: { height: "var(--radix-accordion-content-height)" }, 64 | }, 65 | "accordion-up": { 66 | from: { height: "var(--radix-accordion-content-height)" }, 67 | to: { height: 0 }, 68 | }, 69 | }, 70 | animation: { 71 | "accordion-down": "accordion-down 0.2s ease-out", 72 | "accordion-up": "accordion-up 0.2s ease-out", 73 | }, 74 | }, 75 | }, 76 | plugins: [require("tailwindcss-animate")], 77 | }; 78 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guide 2 | 3 | ## Issues & Pull Requests 4 | 5 | ### Creating an Issue 6 | 7 | Before **creating** an Issue for `features`/`bugs`/`improvements` please follow these steps: 8 | 9 | 1. search existing Issues before creating a new issue (has someone raised this already) 10 | 1. if it doesn't exist create a new issue giving as much context as possible (please select the correct Issue type, for example `bug` or `feature`) 11 | 12 | ### Working on an Issue (get it assigned to you) 13 | 14 | Before working on an existing Issue please follow these steps: 15 | 16 | 1. only ask to be assigned 1 issue at a time 17 | 1. comment asking for the issue to be assigned to you (do not tag maintainers on GitHub or Discord as all maintainers receive your comment notifications) 18 | 1. after the Issue is assigned to you, you can start working on it 19 | 1. **only** start working on this Issue (and open a Pull Request) when it has been assigned to you - this will prevent confusion, multiple people working on the same issue and work not being used 20 | 1. do **not** enable GitHub Actions on your fork 21 | 1. reference the Issue in your Pull Request (for example `closes #123`) 22 | 23 | > Notes: 24 | > - check the `Assignees` box at the top of the page to see if the issue has been assigned to someone else before requesting this be assigned to you 25 | > - if an Issue is unclear, ask questions to get more clarity before asking to have the Issue assigned to you 26 | > - only request to be assigned an Issue if you know how to work on it 27 | > - an Issue can be assigned to multiple people, if you all agree to collaborate on the issue (the Pull Request can contain commits from different collaborators) 28 | > - any Issues that have no activity after 2 weeks will be unassigned and re-assigned to someone else 29 | 30 | ## Reviewing Pull Requests 31 | 32 | We welcome everyone to review Pull Requests, it is a great way to learn, network and support each other. 33 | 34 | ### DOs 35 | 36 | - be kind and respectful, we use inclusive, gender neutral language (for example `they/them` instead of `guy/man`) 37 | - use inline comments to explain your suggestions 38 | - use inline suggestions to propose changes 39 | 40 | ### DON'Ts 41 | 42 | - do not be rude, disrespectful or aggressive 43 | - do not repeat feedback, this creates more noise than value (check the existing conversation), use GitHub reactions if you agree/disagree with a comment 44 | - do not blindly approve pull requests to improve your GitHub contributors graph 45 | -------------------------------------------------------------------------------- /content/batch/learn/js/google-keep.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 📝 Building a Google Keep Clone with JavaScript 3 | description: In this tutorial, you will build your first fully working project. I have give some more features to implement by you as an assignment. 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/ManishBisht777/frontend-freaks-website). 9 | 10 | 11 | 12 | ## Whats on this page? 13 | 14 | - 🎬 Introduction 15 | - 🔧 Structuring the Website with HTML 16 | - 🎨 Designing the Website with CSS 17 | - 🧠 Writing the Logic for the Website with JS 18 | - 📌 Adding Notes 19 | - 📋 Showing Notes on the Website 20 | - 🗄️ Exploring localStorage & Session Storage 21 | - 📥 Storing Data in Local Storage 22 | - 📤 Using JSON.stringify 23 | - 📤 Retrieving Data from Local Storage 24 | - 📥 Using JSON.parse 25 | - 🔄 Updating Data in Local Storage 26 | - 📝 Summary of addNote & showNote (MUST WATCH) 27 | - 🗑️ Deleting Notes 28 | - 🔑 Essential Features You Should Implement 29 | 30 | 31 | 32 | 33 | Learn 34 | Assignment 35 | 36 | 37 | 38 | ## 📺 Watch Now 39 | 40 | 41 | 42 | 43 | ### 📌🔨 Task 44 | Add the following features to the Google Keep clone built in the previous tutorial: 45 | 46 | - 1. Delete Notes: When a note is deleted, it should be moved to a separate section where all deleted notes can be viewed. 47 | - 2. Archive Notes: When a note is archived, it should be moved to a separate section where all archived notes can be viewed. 48 | - 3. Edit Note: Add the ability to edit notes after they have been created. 49 | - 4. **(Optional)** Reminder: Add a reminder functionality to the notes. Each note should have a due date/time property and when the due date/time is reached, a notification should be displayed. 50 | - 5. **(Optional)** Sorting Filter: Add the ability to sort and filter notes based on their creation time, reminder time, and other properties. 51 | - 6. Deploy your first fully working frontend project on GitHub and host it. Share the project's link on LinkedIn and Twitter using the hashtag **#FrontendWithVishal** to showcase your skills and connect with the community. 52 | - 7. Working Demo [Link](https://notes-puce-seven.vercel.app/) 53 | 54 | Good luck with the assignment! 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /content/batch/dsa/recursion.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Recursion 3 | description: Learn Recursion in JavaScript 4 | --- 5 | 6 | 7 | 8 | Want to improve this page?. Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website). 9 | 10 | 11 | # Recursion in JavaScript 12 | 13 | In this section, you will: 14 | 15 | - 🌀 Explore recursion in JavaScript and understand how it works. 16 | - 🔍 Delve into various recursion patterns and strategies. 17 | - 💡 Learn how to solve problems recursively. 18 | - 🚀 Practice your knowledge through assignments related to recursive problem-solving. 19 | 20 | 21 | 22 | 23 | 24 | Learn 25 | Assignment 26 | 27 | 28 | 29 | 30 | ## 📺 Watch Now 31 | 32 |
33 | 34 | 35 | 36 | 37 | We hope that you found the tutorial video helpful in understanding the basic concepts of recursion in javascript, You can refer this notes 📝 for quick revision. 38 | 39 | 40 | ## 📝 Study Notes 41 | 42 | ### Factorial of a Number 43 | 44 | ```javascript 45 | function factorial(n){ 46 | if(n === 0) 47 | return 1; 48 | return n * factorial(n - 1); 49 | } 50 | 51 | console.log(factorial(8)); 52 | ``` 53 | 54 | ### Sum of Array 55 | 56 | ```javascript 57 | function sumOfArrays(arr, n){ 58 | if(n === 0){ 59 | return 0; 60 | } 61 | 62 | return arr[n - 1] + sumOfArrays(arr, n - 1); 63 | } 64 | 65 | console.log(sumOfArrays([1, 2, 3, 4, 5], 5)); 66 | ``` 67 | 68 | ### Fibonacci Number 69 | 70 | ```javascript 71 | function fibo(n){ 72 | if(n < 2){ 73 | return n; 74 | } 75 | return fibo(n - 1) + fibo(n - 2); 76 | } 77 | 78 | console.log(fibo(5)); 79 | ``` 80 | 81 |
82 | 83 | 84 | 85 | 86 | ## Practice Questions 87 | 88 | - Check whether a string is palindrome or not 89 | - Create pow(x, n) function which returns x^n 90 | - Create a function which returns the sum of digits of a number (e.g., sumOfDigits(453) is 12) 91 | - Create a function which returns the number of digits in a number (e.g., countDigits(453) is 3) 92 | - Create a function to find the LCM of two numbers 93 | - Create a function to find the GCD of two numbers 94 | - Create a function to reverse a string 95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /components/command-menu.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { Check } from "lucide-react"; 3 | 4 | import { cn } from "@/lib/utils"; 5 | import { Button } from "@/components/ui/button"; 6 | import { 7 | Command, 8 | CommandEmpty, 9 | CommandGroup, 10 | CommandInput, 11 | CommandItem, 12 | } from "@/components/ui/command"; 13 | import { 14 | Popover, 15 | PopoverContent, 16 | PopoverTrigger, 17 | } from "@/components/ui/popover"; 18 | import { useState } from "react"; 19 | 20 | const frameworks = [ 21 | { 22 | value: "next.js", 23 | label: "Next.js", 24 | }, 25 | { 26 | value: "sveltekit", 27 | label: "SvelteKit", 28 | }, 29 | { 30 | value: "nuxt.js", 31 | label: "Nuxt.js", 32 | }, 33 | { 34 | value: "remix", 35 | label: "Remix", 36 | }, 37 | { 38 | value: "astro", 39 | label: "Astro", 40 | }, 41 | ]; 42 | 43 | export function CommandMenu() { 44 | const [open, setOpen] = useState(false); 45 | const [value, setValue] = useState(""); 46 | 47 | return ( 48 | 49 | {/* 50 | 65 | */} 66 | 67 | 68 | 69 | No framework found. 70 | 71 | {frameworks.map((framework) => ( 72 | { 75 | setValue(currentValue === value ? "" : currentValue); 76 | setOpen(false); 77 | }} 78 | > 79 | 85 | {framework.label} 86 | 87 | ))} 88 | 89 | 90 | 91 | 92 | ); 93 | } 94 | -------------------------------------------------------------------------------- /components/layout/site-footer.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { cn } from "@/lib/utils"; 3 | import { buttonVariants } from "../ui/button"; 4 | import Link from "next/link"; 5 | import { SocialConfig } from "@/types"; 6 | 7 | 8 | interface FooterProps { 9 | items?: SocialConfig[]; 10 | } 11 | 12 | export default function SiteFooter({items}: FooterProps) { 13 | return ( 14 | 94 | ); 95 | } 96 | -------------------------------------------------------------------------------- /content/batch/dsa/basic-sorting.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Basic Sorting 3 | description: Learn Sorting in JavaScript 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website). 9 | 10 | 11 | ## Whats on this page? 12 | 13 | 14 | 15 | 16 | 17 | Learn 18 | Assignment 19 | 20 | 21 | 22 | ## 📺 Watch Now 23 | 24 | 25 |
26 | 27 | 28 | 29 | We hope that you found the tutorial video helpful in understanding the Bubble, Insertion & Selection Sort, You can refer this notes 📝 for quick revision. 30 | 31 | 32 | ## Notes 33 | 34 | 35 | ### Sort an Array 36 | ```javascript 37 | const arr = [-2, -7, 1000, 5] 38 | console.log(arr.sort()) // -2, -7, 1000, 5 39 | console.log(arr.sort((a, b) => a - b)) // -7, -2 , 5, 1000 40 | console.log(arr.sort((a, b) => b - a)) // 1000, 5, -2, -7 41 | 42 | const strArr = ["mango", "apple", "banana"] 43 | console.log(strArr.sort()) // "apple", "banana", "mango" 44 | ``` 45 | 46 | ### Sort a String 47 | ```javascript 48 | const str = "Vishal" 49 | console.log(str.split("").sort().join("")) // "Vahils 50 | ``` 51 | 52 | ### Bubble Sort In JavaScript 53 | ```javascript 54 | const bubbleSort = (arr) => { 55 | let swapped; 56 | do { 57 | swapped = false; 58 | for (let i = 0; i < arr.length - 1; i++) { 59 | if (arr[i] > arr[i + 1]) { 60 | [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]] 61 | swapped = true; 62 | } 63 | } 64 | } while (swapped) 65 | return arr; 66 | } 67 | 68 | console.log(bubbleSort(arr)) // -7, -2 , 5, 1000 69 | ``` 70 | 71 | ### Selection Sort in JavaScript 72 | ```javascript 73 | const selectionSort = (arr) => { 74 | for (let i = 0; i < arr.length - 1; i++) { 75 | let minIndex = i; 76 | for (let j = i + 1; j < arr.length; j++) { 77 | if (arr[j] < arr[minIndex]) { 78 | minIndex = j; 79 | } 80 | } 81 | [arr[minIndex], arr[i]] = [arr[i], arr[minIndex]] 82 | } 83 | return arr; 84 | } 85 | 86 | console.log(selectionSort(arr)) // -7, -2 , 5, 1000 87 | ``` 88 | 89 | ### Insertion Sort In JavaScript 90 | ```javascript 91 | const insertionSort = (arr) => { 92 | for(let i=1; i= 0 && arr[j] > current){ 96 | arr[j+1] = arr[j]; 97 | j--; 98 | } 99 | arr[j+1] = current; 100 | } 101 | return arr; 102 | } 103 | 104 | console.log(insertionSort(arr)) // -7, -2 , 5, 1000 105 | ``` 106 | 107 |
108 | 109 | 110 | 111 | 112 | 113 | ## Practice Question 114 | 115 | - [How Many Numbers are smaller than the current number](https://leetcode.com/problems/how-many-numbers-are-smaller-than-the-current-number) 116 | - [Largest Number](https://leetcode.com/problems/largest-number) 117 | - [Sort Color](https://leetcode.com/problems/sort-colors) 118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /components/icons.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | AlertTriangle, 3 | ArrowRight, 4 | Check, 5 | ChevronLeft, 6 | ChevronRight, 7 | Gift, 8 | Share2, 9 | Anchor, 10 | CreditCard, 11 | File, 12 | FileText, 13 | HelpCircle, 14 | Image, 15 | Laptop, 16 | Loader2, 17 | LogOut, 18 | LucideProps, 19 | Moon, 20 | Menu, 21 | MoreVertical, 22 | Pizza, 23 | Plus, 24 | Settings, 25 | SunMedium, 26 | Trash, 27 | // Twitter, 28 | Film, 29 | User, 30 | Star, 31 | Pencil, 32 | Bookmark, 33 | Video, 34 | MessageSquare, 35 | LayoutDashboard, 36 | Link, 37 | X, 38 | type Icon as LucideIcon, 39 | Youtube, 40 | Instagram, 41 | Linkedin, 42 | } from "lucide-react"; 43 | import { FaXTwitter } from "react-icons/fa6"; 44 | export type Icon = LucideIcon; 45 | 46 | export const Icons = { 47 | logo: Anchor, 48 | menu: Menu, 49 | logout: LogOut, 50 | link: Link, 51 | comment: MessageSquare, 52 | dashboard: LayoutDashboard, 53 | star: Star, 54 | share: Share2, 55 | bookmark: Bookmark, 56 | like: Gift, 57 | video: Film, 58 | write: Pencil, 59 | live: Video, 60 | close: X, 61 | spinner: Loader2, 62 | chevronLeft: ChevronLeft, 63 | chevronRight: ChevronRight, 64 | trash: Trash, 65 | post: FileText, 66 | page: File, 67 | media: Image, 68 | settings: Settings, 69 | billing: CreditCard, 70 | ellipsis: MoreVertical, 71 | add: Plus, 72 | warning: AlertTriangle, 73 | user: User, 74 | arrowRight: ArrowRight, 75 | help: HelpCircle, 76 | pizza: Pizza, 77 | sun: SunMedium, 78 | moon: Moon, 79 | laptop: Laptop, 80 | gitHub: ({ ...props }: LucideProps) => ( 81 | 96 | ), 97 | twitter: FaXTwitter, 98 | check: Check, 99 | youtube: Youtube, 100 | instagram: Instagram, 101 | linkedin: Linkedin, 102 | }; 103 | -------------------------------------------------------------------------------- /.github/workflows/nextjs.yml: -------------------------------------------------------------------------------- 1 | # Sample workflow for building and deploying a Next.js site to GitHub Pages 2 | # 3 | # To get started with Next.js see: https://nextjs.org/docs/getting-started 4 | # 5 | name: Deploy Next.js site to Pages 6 | 7 | on: 8 | # Runs on pushes targeting the default branch 9 | push: 10 | branches: ["master"] 11 | 12 | # Allows you to run this workflow manually from the Actions tab 13 | workflow_dispatch: 14 | 15 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 16 | permissions: 17 | contents: read 18 | pages: write 19 | id-token: write 20 | 21 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 22 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 23 | concurrency: 24 | group: "pages" 25 | cancel-in-progress: false 26 | 27 | jobs: 28 | # Build job 29 | build: 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v3 34 | - name: Detect package manager 35 | id: detect-package-manager 36 | run: | 37 | if [ -f "${{ github.workspace }}/yarn.lock" ]; then 38 | echo "manager=yarn" >> $GITHUB_OUTPUT 39 | echo "command=install" >> $GITHUB_OUTPUT 40 | echo "runner=yarn" >> $GITHUB_OUTPUT 41 | exit 0 42 | elif [ -f "${{ github.workspace }}/package.json" ]; then 43 | echo "manager=npm" >> $GITHUB_OUTPUT 44 | echo "command=ci" >> $GITHUB_OUTPUT 45 | echo "runner=npx --no-install" >> $GITHUB_OUTPUT 46 | exit 0 47 | else 48 | echo "Unable to determine package manager" 49 | exit 1 50 | fi 51 | - name: Setup Node 52 | uses: actions/setup-node@v3 53 | with: 54 | node-version: "16" 55 | cache: ${{ steps.detect-package-manager.outputs.manager }} 56 | - name: Setup Pages 57 | uses: actions/configure-pages@v3 58 | with: 59 | # Automatically inject basePath in your Next.js configuration file and disable 60 | # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized). 61 | # 62 | # You may remove this line if you want to manage the configuration yourself. 63 | static_site_generator: next 64 | - name: Restore cache 65 | uses: actions/cache@v3 66 | with: 67 | path: | 68 | .next/cache 69 | # Generate a new cache whenever packages or source files change. 70 | key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }} 71 | # If source files changed but packages didn't, rebuild from a prior cache. 72 | restore-keys: | 73 | ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}- 74 | - name: Install dependencies 75 | run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} 76 | - name: Build with Next.js 77 | run: ${{ steps.detect-package-manager.outputs.runner }} next build 78 | - name: Static HTML export with Next.js 79 | run: ${{ steps.detect-package-manager.outputs.runner }} next export 80 | - name: Upload artifact 81 | uses: actions/upload-pages-artifact@v2 82 | with: 83 | path: ./out 84 | 85 | # Deployment job 86 | deploy: 87 | environment: 88 | name: github-pages 89 | url: ${{ steps.deployment.outputs.page_url }} 90 | runs-on: ubuntu-latest 91 | needs: build 92 | steps: 93 | - name: Deploy to GitHub Pages 94 | id: deployment 95 | uses: actions/deploy-pages@v2 96 | -------------------------------------------------------------------------------- /content/docs/components.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Components 3 | description: Use React components in Markdown using MDX. 4 | --- 5 | 6 | The following components are available out of the box for use in Markdown. 7 | 8 | If you'd like to build and add your own custom components, see the [Custom Components](#custom-components) section below. 9 | 10 | ## Built-in Components 11 | 12 | ### 1. Callout 13 | 14 | ```mdx 15 | 16 | 17 | This is a default callout. You can embed **Markdown** inside a `callout`. 18 | 19 | 20 | ``` 21 | 22 | 23 | 24 | This is a default callout. You can embed **Markdown** inside a `callout`. 25 | 26 | 27 | 28 | 29 | 30 | This is a warning callout. It uses the props `type="warning"`. 31 | 32 | 33 | 34 | 35 | 36 | This is a danger callout. It uses the props `type="danger"`. 37 | 38 | 39 | 40 | 41 | 42 | This is a info callout. It uses the props `type="info"`. 43 | 44 | 45 | 46 | 47 | 48 | Idk what to name this. It uses the props `type="calm"`. 49 | 50 | 51 | 52 | ### 2. Card 53 | 54 | ```mdx 55 | 56 | 57 | #### Heading 58 | 59 | You can use **markdown** inside cards. 60 | 61 | 62 | ``` 63 | 64 | 65 | 66 | #### Heading 67 | 68 | You can use **markdown** inside cards. 69 | 70 | 71 | 72 | You can also use HTML to embed cards in a grid. 73 | 74 | ```mdx 75 |
76 | 77 | #### Card One 78 | You can use **markdown** inside cards. 79 | 80 | 81 | 82 | #### Card Two 83 | You can also use `inline code` and code blocks. 84 | 85 |
86 | ``` 87 | 88 |
89 | 90 | #### Card One 91 | You can use **markdown** inside cards. 92 | 93 | 94 | 95 | #### Card Two 96 | You can also use `inline code` and code blocks. 97 | 98 |
99 | 100 | --- 101 | 102 | ## Custom Components 103 | 104 | You can add your own custom components using the `components` props from `useMDXComponent`. 105 | 106 | ```ts title="components/mdx.tsx" {2,6} 107 | import { Callout } from "@/components/callout"; 108 | import { CustomComponent } from "@/components/custom"; 109 | 110 | const components = { 111 | Callout, 112 | CustomComponent, 113 | }; 114 | 115 | export function Mdx({ code }) { 116 | const Component = useMDXComponent(code); 117 | 118 | return ( 119 |
120 | 121 |
122 | ); 123 | } 124 | ``` 125 | 126 | Once you've added your custom component, you can use it in MDX as follows: 127 | 128 | ```js 129 | 130 | ``` 131 | 132 | --- 133 | 134 | ## HTML Elements 135 | 136 | You can overwrite HTML elements using the same technique above. 137 | 138 | ```ts {4} 139 | const components = { 140 | Callout, 141 | CustomComponent, 142 | hr: ({ ...props }) =>
, 143 | }; 144 | ``` 145 | 146 | This will overwrite the `
` tag or `---` in Mardown with the HTML output above. 147 | 148 | --- 149 | 150 | ## Styling 151 | 152 | Tailwind CSS classes can be used inside MDX for styling. 153 | 154 | ```mdx 155 |

This text will be red.

156 | ``` 157 | 158 | Make sure you have configured the path to your content in your `tailwind.config.js` file: 159 | 160 | ```js title="tailwind.config.js" {6} 161 | /** @type {import('tailwindcss').Config} */ 162 | module.exports = { 163 | content: [ 164 | "./app/**/*.{ts,tsx}", 165 | "./components/**/*.{ts,tsx}", 166 | "./content/**/*.{md,mdx}", 167 | ], 168 | }; 169 | ``` 170 | -------------------------------------------------------------------------------- /content/batch/dsa/set-map.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Set & Map 3 | description: Learn Set and Map in JavaScript 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website). 9 | 10 | 11 | 12 | ## Whats on this page? 13 | 14 | 15 | 16 | 17 | 18 | Learn 19 | Assignment 20 | 21 | 22 | 23 | ## 📺 Watch Now 24 | 25 | 26 |
27 | 28 | 29 | 30 | We hope that you found the tutorial video helpful in understanding the Stack Data Structure, You can refer this notes 📝 for quick revision. 31 | 32 | 33 | ## Notes 34 | 35 | 36 | ## Set in JavaScript: 37 | 38 | ```javascript 39 | // Creating a Set 40 | const mySet = new Set(); 41 | 42 | // Adding values to the Set 43 | mySet.add(1); 44 | mySet.add("hello"); 45 | mySet.add(true); 46 | 47 | // Checking if a value exists 48 | console.log(mySet.has(1)); // true 49 | 50 | // Removing a value 51 | mySet.delete("hello"); 52 | 53 | // Iterating through the Set 54 | for (const value of mySet) { 55 | console.log(value); 56 | } 57 | 58 | // Size of the Set 59 | console.log(mySet.size); // 2 60 | 61 | // Clearing the Set 62 | mySet.clear(); 63 | ``` 64 | 65 | ## Map in JavaScript 66 | 67 | ```javascript 68 | // Creating a Map 69 | const myMap = new Map(); 70 | 71 | // Adding key-value pairs to the Map 72 | myMap.set("name", "Vishal"); 73 | myMap.set("age", 21); 74 | 75 | // Getting a value using a key 76 | console.log(myMap.get("name")); // Vishal 77 | 78 | // Checking if a key exists 79 | console.log(myMap.has("age")); // true 80 | 81 | // Removing a key-value pair 82 | myMap.delete("age"); 83 | 84 | // Iterating through the Map 85 | for (const [key, value] of myMap) { 86 | console.log(key, value); 87 | } 88 | 89 | // Size of the Map 90 | console.log(myMap.size); // 1 91 | 92 | // Clearing the Map 93 | myMap.clear(); 94 | ``` 95 | 96 | ## Weak Map in JavaScript 97 | 98 | ```javascript 99 | let obj = { key: 'value' }; 100 | 101 | // Creating a WeakMap 102 | let weakMap = new WeakMap(); 103 | weakMap.set(obj, 'metadata'); 104 | 105 | // Checking if the object still exists in the WeakMap 106 | console.log(weakMap.has(obj)); // true 107 | 108 | // Removing the strong reference to the object 109 | obj = null; 110 | 111 | // At this point, the object is no longer strongly referenced 112 | // The WeakMap's weak reference will allow the object to be garbage collected 113 | console.log(weakMap.has(obj)); // false 114 | ``` 115 |
116 | 117 | 118 | 119 | 120 | 121 | 122 | ## Practice Questions 123 | 124 | 1. [Contains Duplicate](https://leetcode.com/problems/contains-duplicate/) 125 | 2. [Intersection of Two Arrays](https://leetcode.com/problems/intersection-of-two-arrays/) (LeetCode 349) 126 | 3. [Distribute Candies](https://leetcode.com/problems/distribute-candies/) 127 | 4. [Longest Consecutive Sequence](https://leetcode.com/problems/longest-consecutive-sequence/) (LeetCode 128) 128 | 5. [Happy Number](https://leetcode.com/problems/happy-number/) 129 | 6. [First Unique Character In A String](https://leetcode.com/problems/first-unique-character-in-a-string/) 130 | 7. [Find Common Characters](https://leetcode.com/problems/find-common-characters/) 131 | 8. [Sort Characters By Frequency](https://leetcode.com/problems/sort-characters-by-frequency/) 132 | 9. [Valid Sudoku](https://leetcode.com/problems/valid-sudoku/) 133 | 10. [First Unique Character in a String](https://leetcode.com/problems/first-unique-character-in-a-string/) 134 | 11. [Longest Substring Without Repeating Characters](https://leetcode.com/problems/longest-substring-without-repeating-characters/) 135 | 136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend Freaks Official Website 2 | 3 | Welcome to the official repository for the Frontend Freaks website! This website is designed to help you learn and improve your frontend development skills. Whether you're a beginner looking to get started or an experienced developer seeking to stay updated with the latest trends, Frontend Freaks has something for you. 4 | 5 | ## Table of Contents 6 | 7 | - [About Frontend Freaks](#about-frontend-freaks) 8 | - [Tech Stack](#tech-stack) 9 | - [Getting Started](#getting-started) 10 | - [Contributing](#contributing) 11 | - [License](#license) 12 | 13 | ## About Frontend Freaks 14 | 15 | Frontend Freaks is a community-driven platform dedicated to frontend development. Our goal is to provide resources, tutorials, articles, and tools that empower frontend developers to excel in their craft. Whether you are interested in HTML, CSS, JavaScript, or any other frontend technology, you'll find valuable content here to enhance your skills. 16 | 17 | ## Tech Stack 18 | 19 | The Frontend Freaks website is built using the following technologies: 20 | 21 | - [NEXT.js](https://nextjs.org/): A popular React framework for building fast, modern web applications. 22 | - [Tailwind CSS](https://tailwindcss.com/): A utility-first CSS framework that helps you quickly design and style your web components. 23 | - [ContentLayer](https://contentlayer.dev/): A content management system (CMS) or data layer used to manage dynamic content and data-driven pages on the website. 24 | - [Node.js](https://nodejs.org/): A JavaScript runtime for server-side development. 25 | - [npm](https://www.npmjs.com/): The package manager for JavaScript that manages project dependencies. 26 | 27 | ## Getting Started 28 | 29 | To get started with the Frontend Freaks website, follow these steps: 30 | 31 | ### Prerequisites 32 | 33 | - Node.js: Make sure you have Node.js installed on your computer. You can download it from [nodejs.org](https://nodejs.org/). 34 | 35 | ### Installation 36 | 37 | 1. Clone the repository to your local machine: 38 | 39 | ```bash 40 | git clone https://github.com/FrontendFreaks/Official-Website.git 41 | ``` 42 | 43 | 2. Change into the project directory: 44 | 45 | ```bash 46 | cd Official-Website 47 | ``` 48 | 49 | 3. Install the project dependencies: 50 | 51 | ```bash 52 | npm install 53 | ``` 54 | 55 | ### Development 56 | 57 | To run the development server and start working on the Frontend Freaks website, use the following command: 58 | 59 | ```bash 60 | npm run dev 61 | ``` 62 | 63 | This will start a local development server and open the website in your default web browser. You can make changes to the code, and the website will automatically reload to reflect your modifications. 64 | 65 | ### Building for Production 66 | 67 | When you are ready to build the website for production, use the following command: 68 | 69 | ```bash 70 | npm run build 71 | ``` 72 | 73 | This will create a production-ready build of the website in the `build` directory. 74 | 75 | ## Contributing 76 | 77 | We welcome contributions from the community to improve the Frontend Freaks website. If you'd like to contribute, please follow these guidelines: 78 | 79 | 1. Fork this repository and clone it to your local machine. 80 | 2. Create a new branch for your changes: `git checkout -b feature/your-feature-name` 81 | 3. Make your changes, and ensure that the code passes any tests. 82 | 4. Commit your changes: `git commit -m "Add your commit message"` 83 | 5. Push your changes to your fork: `git push origin feature/your-feature-name` 84 | 6. Create a pull request to the `master` branch of this repository. 85 | 86 | ## Wall of Contributors 87 | 88 | 89 | 90 | 91 | --- 92 | 93 | Thank you for visiting the Frontend Freaks official repository. We hope you find our website valuable and enjoy learning and improving your frontend development skills with us! If you have any questions or suggestions, please feel free to open an issue or reach out to us. Happy coding! 94 | -------------------------------------------------------------------------------- /components/layout/sidebar-nav.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Link from "next/link"; 4 | import { usePathname } from "next/navigation"; 5 | 6 | import { cn } from "@/lib/utils"; 7 | import { NavItem, SidebarNav, SidebarNavItem } from "@/types"; 8 | import { 9 | Accordion, 10 | AccordionContent, 11 | AccordionItem, 12 | AccordionTrigger, 13 | } from "../ui/accordion"; 14 | 15 | export interface DocsSidebarNavProps { 16 | items: SidebarNav[]; 17 | } 18 | 19 | export function DocsSidebarNav({ items }: DocsSidebarNavProps) { 20 | const pathname = usePathname(); 21 | 22 | return items.length ? ( 23 |
24 | {items.map((item, index) => ( 25 |
26 | 27 | 28 |
29 | 30 | {item.title} 31 | 32 |
33 | 34 | {item.items ? ( 35 |
36 | {item.items.map((item,index) => ( 37 |
38 | {item.href ? ( 39 | 40 | ) : ( 41 | 42 | 46 |
47 | 48 | {" "} 49 | {item.title} 50 | 51 |
52 | 53 | 57 | 58 | 59 | 60 | )} 61 |
62 | ))} 63 |
64 | ) : null} 65 | 66 | 67 | 68 |
69 | ))} 70 |
71 | ) : null; 72 | } 73 | 74 | interface DocsSidebarNavItemsProps { 75 | items: NavItem[] | undefined; 76 | pathname: string | null; 77 | } 78 | 79 | export function DocsSidebarNavItems({ 80 | items, 81 | pathname, 82 | }: DocsSidebarNavItemsProps) { 83 | return items?.length ? ( 84 |
85 | {items.map((item, index) => { 86 | return ( 87 | 88 | ); 89 | })} 90 |
91 | ) : null; 92 | } 93 | 94 | interface DocsSidebarNavItemsrops { 95 | item: NavItem | SidebarNavItem; 96 | pathname: string | null; 97 | } 98 | 99 | export function DocsSidebarNavItem({ 100 | item, 101 | pathname, 102 | }: DocsSidebarNavItemsrops) { 103 | return item.href ? ( 104 | 110 | {item.title} 111 | 112 | ) : ( 113 | 114 | {item.title} 115 | 116 | ); 117 | } 118 | -------------------------------------------------------------------------------- /content/batch/dsa/stack.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stack 3 | description: Learn Stack in JavaScript 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website). 9 | 10 | 11 | 12 | ## Whats on this page? 13 | 14 | 15 | 16 | 17 | 18 | Learn 19 | Assignment 20 | 21 | 22 | 23 | ## 📺 Watch Now 24 | 25 | 26 |
27 | 28 | 29 | 30 | We hope that you found the tutorial video helpful in understanding the Stack Data Structure, You can refer this notes 📝 for quick revision. 31 | 32 | 33 | ## Notes 34 | 35 | 36 | ## Stack Implementation Using Array 37 | ```javascript 38 | class Stack{ 39 | constructor(){ 40 | this.stack = [] 41 | } 42 | 43 | push(item){ 44 | this.stack.push(item) 45 | } 46 | 47 | pop(){ 48 | if(this.isEmpty()){ 49 | return null; 50 | } 51 | return this.stack.pop() 52 | } 53 | 54 | peek(){ 55 | if(this.isEmpty()){ 56 | return null; 57 | } 58 | return this.stack[this.stack.length - 1] 59 | } 60 | 61 | isEmpty(){ 62 | return this.stack.length === 0 63 | } 64 | 65 | size(){ 66 | return this.stack.length; 67 | } 68 | } 69 | 70 | const stack = new Stack() 71 | stack.push(10) 72 | stack.push(12) 73 | stack.push(13) 74 | stack.push(15) 75 | stack.push(17) 76 | stack.pop() 77 | console.log(stack.peek()) 78 | console.log(stack) 79 | ``` 80 | 81 | ## Stack Implementation Using Linked List 82 | 83 | ```javascript 84 | class Node { 85 | constructor(data) { 86 | this.data = data; 87 | this.next = null; 88 | } 89 | } 90 | 91 | class StackLinkedList { 92 | constructor() { 93 | this.top = null; 94 | this.size = 0; 95 | } 96 | 97 | push(data) { 98 | const newNode = new Node(data); 99 | newNode.next = this.top; 100 | this.top = newNode; 101 | this.size++; 102 | } 103 | 104 | pop() { 105 | if (this.isEmpty()) { 106 | return "List is already empty" 107 | } 108 | const item = this.top.data; 109 | this.top = this.top.next; 110 | this.size--; 111 | return item; 112 | } 113 | 114 | peek(){ 115 | return this.top.data; 116 | } 117 | 118 | isEmpty() { 119 | return this.size === 0; 120 | } 121 | } 122 | 123 | const stack1 = new StackLinkedList() 124 | stack1.push(10) 125 | stack1.push(12) 126 | stack1.push(14) 127 | console.log(stack1.pop()) 128 | console.log(stack1.peek()) 129 | console.log(stack1) 130 | ``` 131 |
132 | 133 | 134 | 135 | 136 | 137 | 138 | ## Practice Questions 139 | 140 | 141 | You can find solutions of all these problems in [this playlist](https://www.youtube.com/playlist?list=PLSH9gf0XETotSpywVcJGIYODBNL_j0P0u) 142 | 143 | Before checking the solutions, challenge yourself to solve the problems on your own. If you're stuck, watch the solution video up to the intuition part. Then, code it yourself before watching the complete solution. 144 | 145 | This approach builds solid problem-solving skills. 146 | 147 | 148 | 1. [Remove All Adjacent Duplicate in String](https://leetcode.com/problems/remove-all-adjacent-duplicates-in-string/) 149 | 2. [Valid Parentheses](https://leetcode.com/problems/valid-parentheses/) 150 | 3. [Backspace String Compare](https://leetcode.com/problems/backspace-string-compare/) 151 | 4. [Next Greater Element 1](https://leetcode.com/problems/next-greater-element-i/) 152 | 5. [Online Stock Span](https://leetcode.com/problems/online-stock-span/) 153 | 6. [Next Greater Element 2](https://leetcode.com/problems/next-greater-element-ii/) 154 | 7. [Remove K Digits](https://leetcode.com/problems/remove-k-digits/) 155 | 8. [Sum of Subarray Minimums](https://leetcode.com/problems/sum-of-subarray-minimums/) 156 | 157 | 158 | 159 | 160 | -------------------------------------------------------------------------------- /components/faq.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Accordion, 3 | AccordionContent, 4 | AccordionItem, 5 | AccordionTrigger, 6 | } from "@/components/ui/accordion"; 7 | 8 | export function Faq() { 9 | return ( 10 |
11 |

12 | FAQ 13 |

14 | 15 |
16 | 17 | 18 | 19 | 20 | What is Frontend Freaks? 21 | 22 | 23 | 24 | Frontend Freaks is a vibrant community founded by Vishal Rajput, 25 | dedicated to helping individuals in frontend development. We 26 | provide resources to learn frontend basics, work on practical 27 | projects, and stay up-to-date with the latest industry trends. 28 | 29 | 30 | 31 | 32 | 33 | 34 | What is Frontend Developer Mentorship? 35 | 36 | 37 | Frontend Developer Mentorship is our program at Frontend Freaks 38 | Community designed to guide newcomers in learning frontend 39 | development, building real-world projects, and assisting them in 40 | securing internships and jobs. 41 | 42 | 43 | 44 | 45 | 46 | 47 | Is Frontend Developer Mentorship paid? 48 | 49 | 50 | No, our mentorship programs and resources are completely free of 51 | cost. At Frontend Freaks, we believe in making quality education 52 | accessible to everyone. 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | When can I join? 61 | 62 | 63 | 64 | You can join our community at any time! Our courses and resources 65 | are self-paced, allowing you to learn at your own convenience. 66 | 67 | 68 | 69 | 70 | 71 | 72 | What types of mentorship do you provide? 73 | 74 | 75 | We offer three batches of mentorship. The first batch is perfect 76 | for beginners, covering HTML, CSS, and JavaScript fundamentals 77 | through exciting projects. The second batch focuses on mastering 78 | ReactJS and building real-world projects. The third batch provides 79 | guidance on job hunting, application strategies, and securing 80 | referrals. 81 | 82 | 83 | 84 | 85 | 86 | Not sure which batch to join? 87 | 88 | 89 | 90 | If you're confident in your HTML, CSS, and JavaScript skills, 91 | join batch 2 to learn ReactJS. Otherwise, start with batch 1 to 92 | establish a solid foundation before diving into ReactJS. If you 93 | already have impressive skills and projects, join batch 3 to focus 94 | on job applications. Otherwise, joining batch 2 to build 95 | real-world projects would be beneficial. 96 | 97 | 98 | 99 |
100 |
101 | ); 102 | } 103 | -------------------------------------------------------------------------------- /content/batch/dsa/advance-sorting.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Advance Sorting 3 | description: Learn Sorting in JavaScript 4 | --- 5 | 6 | 7 | 8 | Want to improve this page? Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website). 9 | 10 | 11 | ## Whats on this page? 12 | 13 | 14 | 15 | 16 | 17 | Learn 18 | Assignment 19 | 20 | 21 | 22 | ## 📺 Watch Now 23 | 24 | 25 |
26 | 27 | 28 | 29 | We hope that you found the tutorial video helpful in understanding the Quick & Merge Sort, You can refer this notes 📝 for quick revision. 30 | 31 | 32 | ## Notes 33 | 34 | 35 | ### Merge Sort in JavaScript 36 | ```javascript 37 | const mergeSort = (arr) => { 38 | if (arr.length < 2) { 39 | return arr; 40 | } 41 | let mid = Math.floor(arr.length / 2); 42 | let left = mergeSort(arr.slice(0, mid)) 43 | let right = mergeSort(arr.slice(mid)) 44 | return merge(left, right) 45 | } 46 | 47 | const merge = (left, right) => { 48 | const result = [] 49 | let leftIndex = 0, rightIndex = 0; 50 | while (leftIndex < left.length && rightIndex < right.length) { 51 | if (left[leftIndex] < right[rightIndex]) { 52 | result.push(left[leftIndex]) 53 | leftIndex++; 54 | } 55 | else { 56 | result.push(right[rightIndex]) 57 | rightIndex++; 58 | } 59 | } 60 | 61 | while (leftIndex < left.length) { 62 | result.push(left[leftIndex]) 63 | leftIndex++; 64 | } 65 | 66 | while (rightIndex < right.length) { 67 | result.push(right[rightIndex]) 68 | rightIndex++; 69 | } 70 | 71 | return result; 72 | } 73 | 74 | const arr1 = [29, 10, 8, 16, 37, 14, 4, 45] 75 | console.log(mergeSort(arr1)) 76 | ``` 77 | ### Merge Sort in JavaScript (Space Optimised) 78 | 79 | ```javascript 80 | const mergeSortInplace = (arr, low, high) => { 81 | if (low < high) { 82 | let mid = Math.floor((low + high) / 2); 83 | mergeSortInplace(arr, low, mid) 84 | mergeSortInplace(arr, mid + 1, high) 85 | mergeInplace(arr, low, mid, high) 86 | } 87 | } 88 | 89 | const mergeInplace = (arr, low, mid, high) => { 90 | const result = [] 91 | let leftIndex = low, rightIndex = mid + 1; 92 | while (leftIndex <= mid && rightIndex <= high) { 93 | if (arr[leftIndex] < arr[rightIndex]) { 94 | result.push(arr[leftIndex]) 95 | leftIndex++; 96 | } 97 | else { 98 | result.push(arr[rightIndex]) 99 | rightIndex++; 100 | } 101 | } 102 | 103 | while (leftIndex <= mid) { 104 | result.push(arr[leftIndex]) 105 | leftIndex++; 106 | } 107 | 108 | while (rightIndex <= high) { 109 | result.push(arr[rightIndex]) 110 | rightIndex++; 111 | } 112 | 113 | for (let i = low; i <= high; i++) { 114 | arr[i] = result[i - low]; 115 | } 116 | } 117 | 118 | const arr1 = [29, 10, 8, 16, 37, 14, 4, 45] 119 | console.log(mergeSortInplace(arr1, 0, arr.length - 1)) 120 | console.log(arr1) 121 | ``` 122 | 123 | ### Quick Sort in JavaScript 124 | 125 | ```javascript 126 | const quickSort = (arr) => { 127 | if(arr.length < 2){ 128 | return arr; 129 | } 130 | let pivotIndex = Math.floor(Math.random() * arr.length); 131 | let left = [], right = []; 132 | for(let i=0; i 150 | 151 | 152 | 153 | 154 | 155 | ## Practice Question 156 | 157 | - [Merge Sorted Array](https://leetcode.com/problems/merge-sorted-array) 158 | - [Sort an Array](https://leetcode.com/problems/sort-an-array) 159 | 160 | 161 | 162 | -------------------------------------------------------------------------------- /components/ui/dialog.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as DialogPrimitive from "@radix-ui/react-dialog" 5 | import { X } from "lucide-react" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | const Dialog = DialogPrimitive.Root 10 | 11 | const DialogTrigger = DialogPrimitive.Trigger 12 | 13 | const DialogPortal = ({ 14 | className, 15 | ...props 16 | }: DialogPrimitive.DialogPortalProps) => ( 17 | 18 | ) 19 | DialogPortal.displayName = DialogPrimitive.Portal.displayName 20 | 21 | const DialogOverlay = React.forwardRef< 22 | React.ElementRef, 23 | React.ComponentPropsWithoutRef 24 | >(({ className, ...props }, ref) => ( 25 | 33 | )) 34 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName 35 | 36 | const DialogContent = React.forwardRef< 37 | React.ElementRef, 38 | React.ComponentPropsWithoutRef 39 | >(({ className, children, ...props }, ref) => ( 40 | 41 | 42 | 50 | {children} 51 | 52 | 53 | Close 54 | 55 | 56 | 57 | )) 58 | DialogContent.displayName = DialogPrimitive.Content.displayName 59 | 60 | const DialogHeader = ({ 61 | className, 62 | ...props 63 | }: React.HTMLAttributes) => ( 64 |
71 | ) 72 | DialogHeader.displayName = "DialogHeader" 73 | 74 | const DialogFooter = ({ 75 | className, 76 | ...props 77 | }: React.HTMLAttributes) => ( 78 |
85 | ) 86 | DialogFooter.displayName = "DialogFooter" 87 | 88 | const DialogTitle = React.forwardRef< 89 | React.ElementRef, 90 | React.ComponentPropsWithoutRef 91 | >(({ className, ...props }, ref) => ( 92 | 100 | )) 101 | DialogTitle.displayName = DialogPrimitive.Title.displayName 102 | 103 | const DialogDescription = React.forwardRef< 104 | React.ElementRef, 105 | React.ComponentPropsWithoutRef 106 | >(({ className, ...props }, ref) => ( 107 | 112 | )) 113 | DialogDescription.displayName = DialogPrimitive.Description.displayName 114 | 115 | export { 116 | Dialog, 117 | DialogTrigger, 118 | DialogContent, 119 | DialogHeader, 120 | DialogFooter, 121 | DialogTitle, 122 | DialogDescription, 123 | } 124 | -------------------------------------------------------------------------------- /content/batch/dsa/loops.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Loops 3 | description: Learn Loops in JavaScript 4 | --- 5 | 6 | 7 | Want to improve this page? Raise an issue on [@github](https://github.com/FrontendFreaks/Official-Website). 8 | 9 | 10 | ## What's on this section? 11 | 12 | - 🔄 Explore different types of loops in JavaScript. 13 | - 🔍 Understand the syntax and usage of each loop. 14 | - 💡 Learn how to control the flow of loops. 15 | - 🚀 Practice your knowledge through assignments related to loops. 16 | 17 | 18 | 19 | 20 | 21 | Learn 22 | Assignment 23 | 24 | 25 | 26 | ## 📺 Watch Now 27 | 28 | 29 |
30 | 31 | 32 | 33 | We hope that you found the tutorial video helpful in understanding the loops in javascript, You can refer this notes 📝 for quick revision. 34 | 35 | 36 | ## 📝 Study Notes 37 | ### Question 1: Sum of all natural numbers from 1 to n 38 | 39 | ```javascript 40 | function sumOfNaturalNumber(num){ 41 | let sum = 0; 42 | for(let i=1; i<=num; i++){ 43 | sum = sum + i; 44 | } 45 | return sum; 46 | } 47 | 48 | console.log(sumOfNaturalNumber(5)); // 15 49 | console.log(sumOfNaturalNumber(10)); // 55 50 | console.log(sumOfNaturalNumber(8)); // 36 51 | ``` 52 | 53 | ### Question 2: Sum of digits of a number 54 | 55 | ```javascript 56 | function sumOfDigits(num){ 57 | let sum = 0; 58 | while(num > 0){ 59 | sum += num%10; 60 | num = Math.floor(num / 10); 61 | } 62 | return sum; 63 | } 64 | 65 | console.log(sumOfDigits(1287)); // 18 66 | ``` 67 | 68 | ### Question 3: Count the number of digits of a number 69 | 70 | ```javascript 71 | function countDigits(num){ 72 | num = Math.abs(num); 73 | let count = 0; 74 | do { 75 | count++; 76 | num = Math.floor(num / 10); 77 | } while (num > 0); 78 | return count; 79 | } 80 | 81 | console.log(countDigits(121)); // 3 82 | console.log(countDigits(-1211413131)); // 10 83 | ``` 84 | 85 | ### Question 4: Check if a number is palindrome 86 | 87 | ```javascript 88 | let isPalindrome = function(x) { 89 | let copyNum = x, reverseNum = 0; 90 | 91 | while(copyNum > 0){ 92 | const lastDigit = copyNum % 10; 93 | reverseNum = reverseNum * 10 + lastDigit; 94 | copyNum = Math.floor(copyNum / 10); 95 | } 96 | 97 | return x === reverseNum; 98 | }; 99 | 100 | console.log(isPalindrome(121)); // true 101 | console.log(isPalindrome(1234)); // false 102 | ``` 103 | 104 | ### Question 5: Find nth Fibonacci number 105 | The Fibonacci numbers, commonly denoted F(n) form a sequence, called the Fibonacci sequence, 106 | such that each number is the sum of the two preceding ones, starting from 0 and 1. 107 | 108 | ```javascript 109 | let fib = function(n) { 110 | if(n < 2){ 111 | return n; 112 | } 113 | 114 | let prev = 0, curr = 1, next; 115 | for(let i=2; i<= n; i++){ 116 | next = prev + curr; 117 | prev = curr; 118 | curr = next; 119 | } 120 | return next; 121 | }; 122 | 123 | // Fibonacci Sequence: 0 1 1 2 3 5 8... 124 | console.log(fib(5)); // 5 125 | console.log(fib(10)); // 55 126 | ``` 127 | 128 | ### Question 6: Missing Number in an Array 129 | Given an array nums containing n distinct numbers in the range [0, n], 130 | return the only number in the range that is missing from the array. 131 | ```javascript 132 | let missingNumber = function(nums) { 133 | let sum = 0; 134 | for(let i=0; i nums.length*(nums.length+1)/2 - nums.reduce((acc, num) => num + acc); 142 | 143 | console.log(missingNumber([3,0,1])); // 2 144 | console.log(missingNumber([9,6,4,2,3,5,7,0,1])); // 8 145 | ``` 146 | 147 | 148 |
149 | 150 | 151 | 152 | 153 | 154 | ### 📌🔨 Practise Questions 155 | 156 | - [Count Odd Numbers in an Interval Range](https://leetcode.com/problems/count-odd-numbers-in-an-interval-range/) 157 | - [Fizz Buzz](https://leetcode.com/problems/fizz-buzz/) 158 | - [Power of Two](https://leetcode.com/problems/power-of-two/) 159 | - [Find Square root of a Number](https://leetcode.com/problems/sqrtx/) 160 | 161 | 162 | 163 | 164 | -------------------------------------------------------------------------------- /content/batch/dsa/time-complexity.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Time Complexity 3 | description: Learn Time Complexity in JavaScript 4 | --- 5 | 6 | 7 | Want to improve this page?. Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website). 8 | 9 | 10 | # What's in this section? 11 | 12 | In this section, you will: 13 | 14 | - ⏳ Analyze time complexity in JavaScript code. 15 | - 🧠 Understand the concept of Big O notation and how it is used to express algorithmic performance. 16 | - 📈 Learn how to determine the time complexity of different algorithms and data structures. 17 | - 💻 Practice your knowledge through exercises and assignments related to time complexity analysis. 18 | 19 | 20 | 21 | 22 | Learn 23 | Assignment 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | We hope that you found the tutorial video helpful in understanding the basic concepts of Time Complexity in javascript. You can refer to these notes 📝 for quick revision. 32 | 33 | 34 | ## 📝 Study Notes 35 | 36 | ### What is Time Complexity? 37 | Time complexity is a measure of the efficiency of an algorithm in terms of the amount of time it takes to execute relative to the size of the input. It is expressed using Big O notation, which describes the upper bound of an algorithm's running time. 38 | 39 | ### Big O Notation 40 | Big O notation is a way to describe the efficiency of an algorithm. It represents the upper bound of an algorithm's running time in terms of the size of the input. The most common time complexities are O(1), O(log n), O(n), O(n log n), and O(n^2). 41 | 42 | ### Constant Time Complexity - O(1) 43 | Constant time complexity means that the running time of the algorithm does not depend on the size of the input. The algorithm takes the same amount of time to execute regardless of the size of the input. 44 | 45 | ```javascript 46 | function constantTimeFunction() { 47 | console.log("This function has constant time complexity."); 48 | } 49 | ``` 50 | 51 | ### Linear Time Complexity - O(n) 52 | Linear time complexity means that the running time of the algorithm is directly proportional to the size of the input. The algorithm takes longer to execute as the size of the input increases. 53 | 54 | ```javascript 55 | function linearTimeFunction(n) { 56 | for (let i = 0; i < n; i++) { 57 | console.log("This function has linear time complexity."); 58 | } 59 | } 60 | ``` 61 | 62 | ### Quadratic Time Complexity - O(n^2) 63 | Quadratic time complexity means that the running time of the algorithm is proportional to the square of the size of the input. The algorithm takes much longer to execute as the size of the input increases. 64 | 65 | ```javascript 66 | function quadraticTimeFunction(n) { 67 | for (let i = 0; i < n; i++) { 68 | for (let j = 0; j < n; j++) { 69 | console.log("This function has quadratic time complexity."); 70 | } 71 | } 72 | } 73 | ``` 74 | 75 | ### Logarithmic Time Complexity - O(log n) 76 | Logarithmic time complexity means that the running time of the algorithm grows logarithmically with the size of the input. The algorithm takes longer to execute, but the increase in time is slower than linear time complexity. 77 | 78 | ```javascript 79 | function logarithmicTimeFunction(n) { 80 | for (let i = 1; i < n; i *= 2) { 81 | console.log("This function has logarithmic time complexity."); 82 | } 83 | } 84 | ``` 85 | 86 | ### Linearithmic Time Complexity - O(n log n) 87 | Linearithmic time complexity means that the running time of the algorithm is proportional to n log n. This is a common time complexity for algorithms that divide the input into smaller pieces and process each piece linearly. 88 | 89 | ```javascript 90 | function linearithmicTimeFunction(n) { 91 | if (n <= 1) return; 92 | const mid = Math.floor(n / 2); 93 | linearithmicTimeFunction(mid); 94 | linearithmicTimeFunction(n - mid); 95 | console.log("This function has linearithmic time complexity."); 96 | } 97 | ``` 98 | 99 | ### Trade-offs 100 | It's important to consider the trade-offs between time complexity and space complexity when designing algorithms. Sometimes, optimizing for one can result in a less optimal solution for the other. 101 | 102 |
103 | 104 | 105 | 106 | 107 | ## Practice Questions 108 | 109 | - Solve time complexity of all upcoming questions you solve in this series. 110 | 111 | 112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /app/(marketing)/page.tsx: -------------------------------------------------------------------------------- 1 | import { Faq } from "@/components/faq"; 2 | import Tracks from "@/components/tracks"; 3 | import {Review }from "@/components/Review" 4 | import { Button, buttonVariants } from "@/components/ui/button"; 5 | import { cn } from "@/lib/utils"; 6 | import Image from "next/image"; 7 | import Link from "next/link"; 8 | 9 | export default function Home() { 10 | return ( 11 |
12 |
18 |
19 |
20 |

21 | 22 | Unleash 23 | {" "} 24 | Your 25 |

26 | Frontend{" "} 27 | 28 | Superpowers 29 | 30 |
31 |

32 | Unlocking the Power of Stunning Interfaces: Join a Thriving 33 | Community Led by an Exceptional Frontend Developer. 34 |

35 |
36 | 41 | Join Community 42 | 43 | 44 | Get Started 45 | 46 |
47 |
48 |
49 | 50 |
51 | girl working on a laptop 58 |
59 |

60 | Premium{" "} 61 | 62 | Learning 63 | {" "} 64 | Experience 65 |

66 | 67 |
68 |
69 | learn 75 |
76 |

77 | Learn 78 |

79 |

80 | Master HTML , CSS ,Git and Javascript 81 |

82 |
83 |
84 |
85 | learn 91 |
92 |

93 | Build 94 |

95 |

96 | Built Projects using React , Redux and Next Js 97 |

98 |
99 |
100 |
101 | learn 102 |
103 |

Hire

104 |

105 | Prepare Yourself for Interviews and Get Hired 106 |

107 |
108 |
109 |
110 |
111 |
112 | 113 | {/* tracks section */} 114 | 115 | 116 | 117 |
118 | ); 119 | } 120 | -------------------------------------------------------------------------------- /content/batch/hire/hire.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Let’s Get Hired 🚀 3 | description: 🎉 Welcome to the third (Hired) batch of Frontend Developer Mentorship! 🚀 4 | --- 5 | 6 | 📚 In this batch, you'll learn everything you need to know about how to get off-campus opportunities, including how to make the perfect resume, how to apply for jobs, how to clear interviews, and how to negotiate offers. 7 | 8 | ## Optimise Your Linkedin Profile 9 | 10 | 💼 Start by optimizing your LinkedIn profile. This is a great way to showcase your skills and experiences to potential employers. Use keywords that are relevant to your industry and include a professional-looking headshot 📸. 11 | 12 | 🎬 Check out this tutorial video to learn how to improve your LinkedIn profile and attract potential employers. 13 | 14 | ### 📺 Watch Video 15 | 16 | 17 | ## Let’s Create Profile on AngelList (Wellfound) 18 | 19 | 🚀 AngelList (now called Wellfound) is a platform that connects job seekers with startups. Setting up a profile on AngelList can increase your chances of finding an internship or job at a startup. 20 | 21 | 📝 Watch this tutorial to learn how to apply for jobs on AngelList and increase your chances of getting an interview call. 22 | 23 | 👨‍💻 This is the method I use to get 20+ internships and job offers: After setting up your profiles on LinkedIn and AngelList, start applying to internships and jobs that match your skills and interests. Tailor your application to the specific company and position, and follow up with the recruiter or hiring manager. It's important to be persistent and patient, and to always give your best effort.💪 24 | 25 | ### 📺 Watch Video 26 | 27 | 28 | ## Let's Create a Resume that got shortlisted everywhere 29 | 30 | Include essential sections such as header, summary, experience, education, skills, achievements, and coding profiles 👨‍💻 31 | 32 | Optimize your resume using ChatGPT 🤖 and improve your ATS score using Resumeworded 📈 33 | 34 | Get your first experience as a remote frontend developer through open-source projects and internships 🌎 35 | 36 | Explore different resume templates, including single-column and two-column designs 🎨 37 | 38 | Create a resume on Overleaf 🖥️ to showcase your skills and experience in a professional manner 💼 39 | 40 | ### 📺 Watch Video 41 | 42 | 43 | 44 | 🎥 Here are the upcoming topics we will discuss: 45 | 📄 Learn how to craft a resume that showcases your skills and experience for startups. We'll cover different types of resumes for freshers, experienced professionals, internships, and MNCs. 46 | 47 | 👨‍💻 Get tips on how to prepare for technical interviews, including common frontend developer interview questions and how to answer them. 48 | 49 | 💰 How to negotiate offers: Once you receive an offer, learn how to negotiate the terms and conditions to get the best deal possible. 50 | 51 |
52 |
53 |
54 | 55 | ### 📃 Below are some latex resume templates that you can use to create your resume: 56 | 57 | 65 | 66 |
67 | #### Two Column Resume Templates 68 | 1. Two Column Resume Template - 1 69 | 2. Two Column Resume Template - 2 70 | 3. Two Column Resume Template - 3 71 | 4. Two Column Resume Template - 4 72 |
-------------------------------------------------------------------------------- /content/batch/dsa/string.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Strings 3 | description: Learn Strings in JavaScript 4 | --- 5 | 6 | 7 | Want to improve this page? Raise an issue on [@github](https://github.com/FrontendFreaks/Official-Website). 8 | 9 | ## What's on this section? 10 | 11 | In this section, you will: 12 | 13 | - 🎨 Explore different string manipulation techniques in JavaScript. 14 | - 🔍 Understand the various string methods and their usage. 15 | - 💡 Learn about template literals and string interpolation. 16 | - 🚀 Practice your knowledge through assignments related to string manipulation. 17 | 18 | 19 | 20 | 21 | Learn 22 | Assignment 23 | 24 | 25 | 26 | 27 | ## 📺 Watch Now 28 | 29 |
30 | 31 | 32 | 33 | We hope that you found the tutorial video helpful in understanding the basic concepts of Strings in javascript, You can refer this notes 📝 for quick revision. 34 | 35 | 36 | ## 📝 Study Notes 37 | 38 | # String In JavaScript 39 | 40 | 41 | ### Length of a String 42 | ```javascript 43 | let firstName = "Vaishali"; 44 | console.log(firstName.length); 45 | ``` 46 | 47 | ### Access String Element 48 | ```javascript 49 | console.log(firstName.charAt(2)); // i 50 | console.log(firstName[2]); // i 51 | console.log(firstName.charCodeAt(2)); // 115 (Ascii Code) 52 | ``` 53 | 54 | ### Check Presence of Character 55 | ```javascript 56 | console.log(firstName.includes("r")); // false (& if present it return true) 57 | console.log(firstName.indexOf("i")); // 2 (& if not present it return -1) 58 | console.log(firstName.lastIndexOf("i")); // 7 59 | ``` 60 | 61 | ### Compare Two Strings 62 | ```javascript 63 | let anotherName = "Vishal"; 64 | console.log(firstName.localeCompare(anotherName)); // -1 (& if strings are equal it return 0) 65 | ``` 66 | 67 | ### Replace Substring 68 | ```javascript 69 | const str = "Vishal is Best Frontend Developer. Vishal is Best Developer. "; 70 | console.log(str.replace("Vishal", "Sujit")); // "Sujit is Best Frontend Developer. Vishal is Best Developer. " 71 | console.log(str.replaceAll("Vishal", "Sujit")); // "Sujit is Best Frontend Developer. Sujit is Best Developer. " 72 | ``` 73 | 74 | ### Substring of a String 75 | ```javascript 76 | console.log(str.substring(6, 30)); 77 | console.log(str.slice(-10, -1)); 78 | ``` 79 | 80 | ### Split and Join 81 | ```javascript 82 | console.log(str.split("")); 83 | const subString = str.split(" "); 84 | console.log(subString.join(" ")); 85 | ``` 86 | 87 | ### String Start and End 88 | ```javascript 89 | console.log(str.startsWith("Vishal")); // true 90 | console.log(str.endsWith("Developer")); // true 91 | ``` 92 | 93 | ### Trim and Case Conversion 94 | ```javascript 95 | const trimStr = str.trim(); 96 | const trimStrStart = str.trimStart(); 97 | const trimStrEnd = str.trimEnd(); 98 | console.log(trimStr, trimStr.length); 99 | console.log(str.toLowerCase()); 100 | console.log(str.toUpperCase()); 101 | ``` 102 | 103 | ### Convert Number and Object to String 104 | ```javascript 105 | const num = 123; 106 | console.log(num, num.toString()); 107 | 108 | const obj = { 109 | name: "Vishal", 110 | course: "DSA with Vishal" 111 | }; 112 | console.log(obj, JSON.stringify(obj)); 113 | ``` 114 | 115 | ### Concatenate Strings 116 | ```javascript 117 | const lastName = "Rajput"; 118 | console.log(firstName + lastName); 119 | console.log(`${firstName} ${lastName} is a Best Developer`); 120 | console.log(firstName.concat(lastName, " is a", " Best")); 121 | ``` 122 | 123 |
124 | 125 | 126 | 127 | ## Practice Questions 128 | 129 | - [Find the Index of the First Occurrence in a String](https://leetcode.com/problems/find-the-index-of-the-first-occurrence-in-a-string/) 130 | - [Reverse String](https://leetcode.com/problems/reverse-string) 131 | - [Valid Anagram](https://leetcode.com/problems/valid-anagram) 132 | - [Longest Common Prefix](https://leetcode.com/problems/longest-common-prefix) 133 | - [Merge Strings Alternately](https://leetcode.com/problems/merge-strings-alternately) 134 | - [Length of Last Word](https://leetcode.com/problems/length-of-last-word/) 135 | - [Valid Palindrome](https://leetcode.com/problems/valid-palindrome) 136 | - [String Compression](https://leetcode.com/problems/string-compression) 137 | - [Reverse Words in a String](https://leetcode.com/problems/reverse-words-in-a-string) 138 | - [Reverse Vowels of a String](https://leetcode.com/problems/reverse-vowels-of-a-string) 139 | - [Rotate String](https://leetcode.com/problems/rotate-string) 140 | 141 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /components/Review.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { FaStar } from "react-icons/fa"; 4 | import { 5 | Carousel, 6 | CarouselContent, 7 | CarouselItem, 8 | CarouselNext, 9 | CarouselPrevious, 10 | } from "@/components/ui/carousel" 11 | 12 | export const testimonials = [ 13 | { 14 | 15 | name: "Hariharan Reddy", 16 | title: "Fullstack Intern", 17 | quote:"Your guidance did helped me prioritize what I needed to do for getting my first internship. Your videos on resume building, cover letter templates and tips and tricks helped immensely in getting my resume shortlisted." , 18 | img:"https://media.licdn.com/dms/image/D4D03AQForZe5Npk8Qw/profile-displayphoto-shrink_800_800/0/1689487033085?e=1709164800&v=beta&t=2s6gpZpvRr1UQAwD8iw159nAhH-lE8UHwgnRNqPhTps" 19 | }, 20 | { 21 | 22 | title: "Frontend Engineer", 23 | name: "SAurav (Kumar Avishek)", img:"https://media.licdn.com/dms/image/C5603AQHp3_SXyYHZFQ/profile-displayphoto-shrink_400_400/0/1600053166501?e=1709164800&v=beta&t=ZZM3Bg4EXsfNLaxC9GDrEgA5LhOQCj1nixhuNFw9pqM" 24 | , 25 | quote:"Before joining, I was isolated with no connections, and my progress was slow. However, being a member of Frontend Freaks propelled me to my current position. Without this group, I might not be where I am today. My heartfelt thanks to Vishal for creating and managing this group. The impact on my professional growth is immeasurable, and I am truly appreciative." }, 26 | { 27 | name: " KEEGAN COLACO ", 28 | title: "Student", img:"https://media.licdn.com/dms/image/D4D03AQENueFehAtxAQ/profile-displayphoto-shrink_800_800/0/1685429356858?e=1709164800&v=beta&t=lmrMRs7MGi0Nry9SbG-MTiFz99saQY8yFgCwpa61RRs" 29 | , 30 | quote: "Vishal is very helpful and will make sure that all your doubts are clear. Along with that the awesome community is very helpful and they will be very supportive. " 31 | }, 32 | { 33 | name: "Jyoti Pal", 34 | title: "Full Stack Engineer", 35 | img:"https://pbs.twimg.com/profile_images/1732254187218694144/synyPvoD_400x400.jpg" 36 | , 37 | quote: "Vishal's guidance was pivotal in my decision to join my current company. Their support during tough times and the experienced community's assistance were invaluable. I'm truly grateful for your motivation and impactful work. Thank you immensely!" 38 | }, 39 | { 40 | name: "Sujit Memane", 41 | title: "Student", 42 | img:"https://media.licdn.com/dms/image/D4D03AQH9NENenfDMYg/profile-displayphoto-shrink_800_800/0/1681362877178?e=1709164800&v=beta&t=gepBZZSswzDuLlSfrK041zZKavAd9O5VvmgIznG4su0" 43 | , 44 | quote: "Vishal Bhaiya helped me from the start of my tech journey. His community is so helpful and supportive. His JavaScript DSA video series is very useful.Thank you immensely!" 45 | }, 46 | 47 | 48 | ] 49 | 50 | 51 | export function Review() { 52 | return ( 53 |
54 |

55 | Reviews 56 |

57 |

What Our Student Says?

58 | 59 |
60 | 61 | 62 | {testimonials.map((item, idx) => ( 63 | 64 |
  • 65 |
    66 |
    67 | “{item.quote}“ 68 |
    69 |
    70 |
    71 | {item.name} 72 |
    73 | {item.name} 74 | {item.title} 75 |
    76 |
    77 |

    78 | 79 | 80 | 81 | 82 | 83 |

    84 |
    85 | 86 |
    87 |
    • 88 |     89 | ))} 90 |     91 | 92 | 93 |     94 |
    95 | 96 | 97 | 98 |
    99 | 100 | ) 101 | } 102 | -------------------------------------------------------------------------------- /content/docs/getting-started.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Getting Started 3 | description: Welcome to the Frontend Freaks Documentation. 4 | --- 5 | 6 | 7 | 8 | Here you should find everything you need from getting started with creating content. 9 | 10 | 11 | 12 | ## Understanding the folder structure 13 | 14 | For writing you may primarly be working on `./content` folder. The `batch/index.mdx` files give the structure for [docs](https://frontend-freaks-website.vercel.app/batch) page. 15 | 16 | - `/batch/learn` - Specify learn batch 17 | 18 | 19 | Naming convention is upto to you just make sure there are no spaces between 20 | name 21 | 22 | 23 | The example of learn batch which has `4 pages` and each has some more pages. 24 | 25 | ```mdx 26 | batch/learn/ 27 | ├── index.mdx - the intro page 28 | ├── html - folder 29 | ├── github - folder 30 | ├── css - folder 31 | └── js - folder 32 | ``` 33 | 34 | If you want to add new page to learn css page let's say `layouts` you can add a new folder to `./content/learn/css`, For example 35 | 36 | ```mdx 37 | batch/learn/css/ 38 | ├── index.mdx - the intro page 39 | ├── page1.mdx 40 | ├── page2.mdx 41 | └── page3.mdx 42 | ``` 43 | 44 | 45 | There is no limit to number of pages, so write as much you want 46 | 47 | 48 | ### Add Content to `.MDX` files 49 | 50 | Add content Using React components in Markdown using MDX. 51 | 52 | ```mdx 53 | --- 54 | 55 | title: Getting Started 56 | description: Welcome to the Documentation. 57 | 58 | --- 59 | Write anything to want using the MDX components 60 | ``` 61 | 62 | 63 | Make sure to add a title and description to `.mdx files` either they won't 64 | work 65 | 66 | 67 | ### Update the links in `.config/sidebar.ts` 68 | 69 | As the content is generated now the only remaining part is to show it 70 | 71 | - Go to `.config/sidebar.ts` 72 | - Add the links to Newly generated content 73 | 74 | ```mdx 75 | ... 76 | sidebarNav: [ 77 | { 78 | title: "Getting Started", 79 | items: [ 80 | { 81 | title: "Introduction", 82 | href: "/batch", 83 | }, 84 | ], 85 | }, 86 | { 87 | title: "Learn", 88 | items: [ 89 | { 90 | title: "Html", 91 | items: [ 92 | { 93 | title: "basic", 94 | href: "/batch/learn/html/basic", 95 | }, 96 | { 97 | title: "new page", 98 | href: "/batch/learn/html/new-page", 99 | }, 100 | ], 101 | }, 102 | ... 103 | ], 104 | }, 105 | ... 106 | ``` 107 | 108 | - Links without `topic name` go to `index.mdx` in that folder 109 | - `batch/learn` reffer to `.content/batch/learn/index.mdx` 110 | - `batch/learn/html/topic-name` reffers to `.content/batch/learn/html/topic-name.mdx` 111 | 112 | ## Congrats You made it to the end 113 | 114 | Now Raise a pull request Lets other people feedback on it 115 | 116 |
    117 | Image 118 |
    119 | 120 | Reffer to the links below for understanding the flow of content 121 | 122 | 123 | 124 | This is not the only structure or flow for writing content you can write however you want using the [components](https://frontend-freaks-website.vercel.app/docs/components) provide here also you can make custom components as you like. 125 | 126 | 127 | 128 |
    129 | 130 | Image 137 | 138 | #### Learn 139 | Learn HTML, CSS, JS and Git & Github 140 | 141 | 142 | Image 149 | 150 | #### DSA in Javascript 151 | Learn data structures and algorithms in JavaScript 152 | 153 | 154 | 155 | Image 162 | 163 | #### Build 164 | Master React, Redux and Next Js 165 | 166 | 167 | 168 | Image 175 | 176 | #### Hire 177 | Get Interview Tips and Tricks 178 | 179 | 180 |
    -------------------------------------------------------------------------------- /content/batch/dsa/search.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Linear & Binary Search 3 | description: learn Search in JavaScript 4 | --- 5 | 6 | 7 | 8 | Want to improve this page?. Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website). 9 | 10 | 11 | ## What's on this section? 12 | 13 | In this section, you will: 14 | 15 | - 🎨 Explore different search algorithms in JavaScript. 16 | - 🔍 Understand the concepts of linear search and binary search. 17 | - 💡 Learn how to implement linear and binary search algorithms. 18 | - 🚀 Practice your knowledge through assignments related to search algorithms. 19 | 20 | 21 | 22 | 23 | Learn 24 | Assignment 25 | 26 | 27 | 28 | 29 | ## 📺 Watch Now 30 | 31 |
    32 | 33 | 34 | 35 | We hope that you found the tutorial video helpful in understanding the basic concepts of search in javascript, You can refer this notes 📝 for quick revision. 36 | 37 | ## 📝 Study Notes 38 | 39 | ### Linear Search in JavaScript 40 | 41 | ```javascript 42 | const arr = [1, 2, 6, 9, 0, -5]; 43 | 44 | const linearSearch = (arr, target) => { 45 | for (let i = 0; i < arr.length; i++) { 46 | if (arr[i] === target) { 47 | return i; 48 | } 49 | } 50 | return -1; 51 | } 52 | 53 | console.log(linearSearch(arr, 8)); 54 | console.log(arr.includes(9)); 55 | console.log(arr.indexOf(9)); 56 | console.log(arr.find((num) => num > 0)); 57 | console.log(arr.findIndex((num) => num < 0)); 58 | ``` 59 | 60 | ### Binary Search In JavaScript 61 | 62 | ```javascript 63 | const BinarySearch = (arr, target) => { 64 | let start = 0, end = arr.length - 1; 65 | while (start <= end) { 66 | let mid = Math.floor((start + end) / 2); 67 | 68 | if (arr[mid] === target) { 69 | return mid; 70 | } 71 | 72 | else if (arr[mid] > target) { 73 | end = mid - 1; 74 | } 75 | 76 | else { 77 | start = mid + 1; 78 | } 79 | } 80 | 81 | return -1; 82 | } 83 | 84 | console.log(BinarySearch([1, 4, 6, 9, 12, 15], 8)); 85 | ``` 86 | 87 | ### Binary Search using Recursion 88 | 89 | ```javascript 90 | const BinarySearchRecur = (arr, target) => { 91 | return BinarySearchUtil(arr, target, 0, arr.length); 92 | } 93 | 94 | const BinarySearchUtil = (arr, target, start, end) => { 95 | if (start > end) 96 | return -1; 97 | 98 | let mid = Math.floor((start + end) / 2); 99 | 100 | if (arr[mid] === target) { 101 | return mid; 102 | } 103 | 104 | else if (arr[mid] > target) { 105 | return BinarySearchUtil(arr, target, start, mid - 1); 106 | } 107 | 108 | else { 109 | return BinarySearchUtil(arr, target, mid + 1, end); 110 | } 111 | } 112 | ``` 113 | 114 | ### Find floor and ceil value of X in an array 115 | 116 | ```javascript 117 | const floorCeil = (arr, target) => { 118 | let start = 0, end = arr.length; 119 | let floor = -1, ceil = -1; 120 | while(start <= end){ 121 | let mid = Math.floor((start + end)/2); 122 | 123 | if(arr[mid] === target){ 124 | floor = mid; 125 | ceil = mid; 126 | return [ceil, mid] 127 | } 128 | 129 | else if(arr[mid] > target){ 130 | ceil = mid; 131 | end = mid - 1; 132 | } 133 | 134 | else { 135 | floor = mid; 136 | start = mid + 1; 137 | } 138 | } 139 | 140 | return [ceil, floor] 141 | } 142 | ``` 143 |
    144 | 145 |     146 | 147 | 148 | ## Practice Questions 149 | 150 | ### Level 1 151 | - [Sqrt(x)](https://leetcode.com/problems/sqrtx/) 152 | - [First Bad Version](https://leetcode.com/problems/first-bad-version) 153 | - [Find the Index of the First Occurrence in a String](https://leetcode.com/problems/find-the-index-of-the-first-occurrence-in-a-string/) 154 | - [Binary Search](https://leetcode.com/problems/binary-search) 155 | - [Search Insert Position](https://leetcode.com/problems/search-insert-position) 156 | - [Find Minimum in Rotated Sorted Array](https://leetcode.com/problems/find-minimum-in-rotated-sorted-array) 157 | 158 | ### Level 2 159 | - [Find First and Last Position of Element in Sorted Array](https://leetcode.com/problems/find-first-and-last-position-of-element-in-sorted-array) 160 | - [Single Element in a Sorted Array](https://leetcode.com/problems/single-element-in-a-sorted-array/) 161 | - [Search a 2D Matrix](https://leetcode.com/problems/search-a-2d-matrix/) 162 | - [Find Peak Element](https://leetcode.com/problems/find-peak-element) 163 | - [Search in Rotated Sorted Array](https://leetcode.com/problems/search-in-rotated-sorted-array) 164 | 165 | 166 | 167 |     168 | 169 | -------------------------------------------------------------------------------- /components/ui/command.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import { DialogProps } from "@radix-ui/react-dialog" 5 | import { Command as CommandPrimitive } from "cmdk" 6 | import { Search } from "lucide-react" 7 | 8 | import { cn } from "@/lib/utils" 9 | import { Dialog, DialogContent } from "@/components/ui/dialog" 10 | 11 | const Command = React.forwardRef< 12 | React.ElementRef, 13 | React.ComponentPropsWithoutRef 14 | >(({ className, ...props }, ref) => ( 15 | 23 | )) 24 | Command.displayName = CommandPrimitive.displayName 25 | 26 | interface CommandDialogProps extends DialogProps {} 27 | 28 | const CommandDialog = ({ children, ...props }: CommandDialogProps) => { 29 | return ( 30 | 31 | 32 | 33 | {children} 34 | 35 | 36 | 37 | ) 38 | } 39 | 40 | const CommandInput = React.forwardRef< 41 | React.ElementRef, 42 | React.ComponentPropsWithoutRef 43 | >(({ className, ...props }, ref) => ( 44 |
    45 | 46 | 54 |
    55 | )) 56 | 57 | CommandInput.displayName = CommandPrimitive.Input.displayName 58 | 59 | const CommandList = React.forwardRef< 60 | React.ElementRef, 61 | React.ComponentPropsWithoutRef 62 | >(({ className, ...props }, ref) => ( 63 | 68 | )) 69 | 70 | CommandList.displayName = CommandPrimitive.List.displayName 71 | 72 | const CommandEmpty = React.forwardRef< 73 | React.ElementRef, 74 | React.ComponentPropsWithoutRef 75 | >((props, ref) => ( 76 | 81 | )) 82 | 83 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName 84 | 85 | const CommandGroup = React.forwardRef< 86 | React.ElementRef, 87 | React.ComponentPropsWithoutRef 88 | >(({ className, ...props }, ref) => ( 89 | 97 | )) 98 | 99 | CommandGroup.displayName = CommandPrimitive.Group.displayName 100 | 101 | const CommandSeparator = React.forwardRef< 102 | React.ElementRef, 103 | React.ComponentPropsWithoutRef 104 | >(({ className, ...props }, ref) => ( 105 | 110 | )) 111 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName 112 | 113 | const CommandItem = React.forwardRef< 114 | React.ElementRef, 115 | React.ComponentPropsWithoutRef 116 | >(({ className, ...props }, ref) => ( 117 | 125 | )) 126 | 127 | CommandItem.displayName = CommandPrimitive.Item.displayName 128 | 129 | const CommandShortcut = ({ 130 | className, 131 | ...props 132 | }: React.HTMLAttributes) => { 133 | return ( 134 | 141 | ) 142 | } 143 | CommandShortcut.displayName = "CommandShortcut" 144 | 145 | export { 146 | Command, 147 | CommandDialog, 148 | CommandInput, 149 | CommandList, 150 | CommandEmpty, 151 | CommandGroup, 152 | CommandItem, 153 | CommandShortcut, 154 | CommandSeparator, 155 | } 156 | -------------------------------------------------------------------------------- /components/tracks.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { buttonVariants } from "./ui/button"; 3 | import Link from "next/link"; 4 | import { cn } from "@/lib/utils"; 5 | 6 | type Props = {}; 7 | 8 | export default function Tracks({}: Props) { 9 | return ( 10 |
    11 |

    12 | Our Batches 13 |

    14 |

    Master the Frontend Development with Frontend Freaks

    15 | 16 | {/* Cards Wrapper */} 17 |
    18 |
    19 | learn 26 |
    27 |

    Build Your Foundation

    28 |

    29 | Make your foundation strong by learning HTML, CSS, JS, Git, and 30 | GitHub. Join this batch if you want to make your foundation as 31 | strong as concrete. 32 |

    33 |
    34 | 38 | Join 39 | 40 |
    41 |
    42 | learn 49 |
    50 |

    DSA In Javascript

    51 |

    52 | Enroll for this batch to ace DSA skills with javascript, enhancing 53 | your skills for job success. 54 |

    55 |
    56 | 60 | Join 61 | 62 |
    63 |
    64 | learn 71 |
    72 |

    Build Projects

    73 |

    74 | Build the project with the latest technologies like React, Redux, 75 | and Next.js. Join this batch if you want to be a part of it. 76 |

    77 |
    78 | 82 | Join 83 | 84 |
    85 |
    86 | learn 93 |
    94 |

    Get Hired

    95 |

    96 | Enroll for this batch to ace interviews with tips, tricks, and 97 | mock sessions, enhancing your skills for job success. 98 |

    99 |
    100 | 104 | Join 105 | 106 |
    107 |
    108 |
    109 | ); 110 | } -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | . 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /components/code-editor.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useEffect, useState } from "react"; 4 | import Editor from "@monaco-editor/react"; 5 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 6 | import { faHtml5, faCss3, faJs } from "@fortawesome/free-brands-svg-icons"; 7 | import { faPlay, faCircleXmark } from "@fortawesome/free-solid-svg-icons"; 8 | 9 | interface File { 10 | name: string; 11 | language: string; 12 | value: string; 13 | } 14 | 15 | const files: Record = { 16 | "index.html": { 17 | name: "index.html", 18 | language: "html", 19 | value: `\n\n\n\n My Page\n\n\n

    Hello, HTML!

    \n\n`, 20 | }, 21 | "style.css": { 22 | name: "style.css", 23 | language: "css", 24 | value: `/* Your CSS code goes here */\nbody { background-color: #f0f0f0; }`, 25 | }, 26 | "script.js": { 27 | name: "script.js", 28 | language: "javascript", 29 | value: `// Your JavaScript code goes here\nconsole.log('Hello, JavaScript!');`, 30 | }, 31 | 32 | }; 33 | 34 | 35 | export default function CodeEditor() { 36 | const [fileName, setFileName] = useState("index.html"); 37 | const [htmlCode, setHtmlCode] = useState(""); 38 | const [cssCode, setCssCode] = useState(""); 39 | const [jsCode, setJsCode] = useState(""); 40 | const [outputVisible, setOutputVisible] = useState(false); 41 | 42 | useEffect(() => { 43 | const runBtn = document.getElementById("runCode"); 44 | const clsBtn = document.getElementById("closeWindow"); 45 | 46 | runBtn?.addEventListener("click", () => { 47 | setHtmlCode(files["index.html"].value); 48 | setCssCode(files["style.css"].value); 49 | setJsCode(files["script.js"].value); 50 | 51 | setOutputVisible(true); 52 | }); 53 | 54 | clsBtn?.addEventListener("click", () => { 55 | setOutputVisible(false); 56 | }); 57 | }, []); 58 | 59 | const file = files[fileName]; 60 | 61 | const handleEditorChange: import("@monaco-editor/react").OnChange = (value) => { 62 | if (value !== undefined) { 63 | files[fileName].value = value; 64 | } 65 | }; 66 | 67 | return ( 68 | <> 69 |
    70 | {Object.keys(files).map((fileKey) => ( 71 | 89 | ))} 90 | 99 |
    100 | 101 | 111 | 112 | {outputVisible && ( 113 |
    114 |
    115 | 124 |