diff --git a/assets/icons/SearchIcon.tsx b/assets/icons/SearchIcon.tsx new file mode 100644 index 000000000..f09f00b98 --- /dev/null +++ b/assets/icons/SearchIcon.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import { SVGProps } from "react"; +const SearchIcon = ({ ...rest }: SVGProps) => { + return ( + + ); +}; + +export default SearchIcon; diff --git a/components/BackToTop/BackToTopButton.tsx b/components/BackToTop/BackToTopButton.tsx index bd8b89707..02ec9c206 100644 --- a/components/BackToTop/BackToTopButton.tsx +++ b/components/BackToTop/BackToTopButton.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import { FaArrowUp } from "react-icons/fa"; -import { SCROLL_LIMIT } from "../../app/constants"; +import { SCROLL_LIMIT } from "app/constants"; export const BackToTopButton = () => { const [scrollY, setScrollY] = useState(0); @@ -17,30 +17,30 @@ export const BackToTopButton = () => { return () => { window.removeEventListener("scroll", handleScroll); }; - }, []); const handleClick = () => { window.scrollTo({ top: 0, behavior: "smooth", - }) - } + }); + }; if (scrollY > SCROLL_LIMIT) { return (
- 👾
- ) + ); } return null; -} +}; diff --git a/components/LinksContainer/LinksContainer.tsx b/components/LinksContainer/LinksContainer.tsx deleted file mode 100644 index b05c94dcd..000000000 --- a/components/LinksContainer/LinksContainer.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import { data } from "../../database/data"; -import { ISideNavbarElement, IData } from "../../types/index"; -import { FaSlackHash } from "react-icons/fa"; -import { LinkContainer } from "./LinkContainer"; - -export const LinksContainer = () => { - return ( -
-
-
- -

Images

-
- -
- {data.filter(item=>item.subcategory.includes(item.subcategory)).map((d:IData, key:number) => ( - - ))} -
-
-
- ); -}; - -LinksContainer.defaultProps = { - title: "Images", - data, -}; diff --git a/components/LinksContainer/index.ts b/components/LinksContainer/index.ts deleted file mode 100644 index 680ed1688..000000000 --- a/components/LinksContainer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./LinksContainer" \ No newline at end of file diff --git a/components/Loader/Preloader.tsx b/components/Loader/Preloader.tsx index 76401efe2..04272a3f4 100644 --- a/components/Loader/Preloader.tsx +++ b/components/Loader/Preloader.tsx @@ -1,12 +1,24 @@ -import { Spinner } from "./Spinner" +import useLoader from "hooks/useLoader"; +import { ReactNode } from "react"; +import { Spinner } from "./Spinner"; -export const Preloader = ({backgroundColor, spinnerColor, spinnerSize}:{backgroundColor: string, spinnerColor:string, spinnerSize: number}) => { - return ( -
- -
- ) -} \ No newline at end of file +export const Preloader = ({ + backgroundColor, + children, + ...rest +}: { + children: JSX.Element; + backgroundColor: string; + color: string; + size: number; +}): JSX.Element => { + const { loader } = useLoader(); + if (!loader) return children; + return ( +
+ +
+ ); +}; diff --git a/components/Loader/Spinner.tsx b/components/Loader/Spinner.tsx index 9804c7f94..1759870f0 100644 --- a/components/Loader/Spinner.tsx +++ b/components/Loader/Spinner.tsx @@ -1,13 +1,8 @@ -import Gridloader from "react-spinners/GridLoader" - -export const Spinner = ({spinnerColor, spinnerSize}:{spinnerColor:string, spinnerSize:number}) => { +import Gridloader from "react-spinners/GridLoader"; +import { LengthType } from "react-spinners/helpers/props"; +export const Spinner = (props: { color: string; size: LengthType }) => { return ( - + ); }; diff --git a/components/Searchbar/Searchbar.tsx b/components/Searchbar/Searchbar.tsx index 1bdc1658c..75cdf89ba 100644 --- a/components/Searchbar/Searchbar.tsx +++ b/components/Searchbar/Searchbar.tsx @@ -1,9 +1,9 @@ -interface SearchbarProps { - setSearch: (search: string) => void; -} +import SearchIcon from "assets/icons/SearchIcon"; +import { ChangeEvent } from "react"; +import { SearchbarProps } from "types"; export const Searchbar = ({ setSearch }: SearchbarProps) => { - const handleSearch = (e: any) => { + const handleSearch = (e: ChangeEvent) => { setSearch(e.target.value); }; @@ -13,20 +13,8 @@ export const Searchbar = ({ setSearch }: SearchbarProps) => { Search
-
- +
+
{ setMounted(true) }, []); + useEffect(() => { + setMounted(true); + }, []); - if (!mounted) return <>; + if (!mounted) return <>; - return ( - - ); -} \ No newline at end of file + return ( + + ); +} diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx index 72ef454d0..d9e8d6fda 100644 --- a/components/TopBar/TopBar.tsx +++ b/components/TopBar/TopBar.tsx @@ -1,11 +1,11 @@ -import { useRouter } from 'next/router'; -import { IconContext } from 'react-icons'; -import { FaGithub, FaSlackHash } from 'react-icons/fa'; -import { ThemeToggler } from '../ThemeToggler/themeToggler'; +import { useRouter } from "next/router"; +import { IconContext } from "react-icons"; +import { FaGithub, FaSlackHash } from "react-icons/fa"; +import { ThemeToggler } from "../ThemeToggler/themeToggler"; export const TopBar = ({ header }: { header?: string }) => { const router = useRouter(); - const category = router.asPath.replace('/', ''); + const category = router.asPath.replace("/", ""); return (
@@ -23,9 +23,9 @@ export const TopBar = ({ header }: { header?: string }) => { href="https://github.com/rupali-codes/LinksHub" > - + diff --git a/components/cards/index.tsx b/components/cards/index.tsx index 68d873219..34ff7a51c 100644 --- a/components/cards/index.tsx +++ b/components/cards/index.tsx @@ -1,17 +1,21 @@ import { useRouter } from "next/router"; import React from "react"; -import { data } from "../../database/data"; -import { IData } from "../../types"; import { LinkContainer } from "../LinksContainer/LinkContainer"; import { BackToTopButton } from "../BackToTop/BackToTopButton"; +import * as DB from "database"; const Cards = () => { const router = useRouter(); + const { subcategory } = router.query; - const filterDB = data.filter((item) => - item.subcategory - .toLowerCase() - .includes(router.asPath.replace("/", "").toLowerCase()) + // This filters trough the DB with the subcategory which results in an array of arrays + const filterSubCat = Object.values(DB)?.map((item: any) => + item?.filter((cat: any) => cat.subcategory.includes(subcategory)) + ); + + // This filters out an empty array from the filterSubCat + const filterDB = filterSubCat.filter( + (item: any, index: number) => item.length !== 0 ); return ( @@ -20,7 +24,7 @@ const Cards = () => { filterDB.length < 3 && "lg:justify-start" }`} > - {filterDB?.map((data: IData, key: number) => ( + {filterDB[0]?.map((data: any, key: number) => ( { key={key + "-" + data.name} /> ))} -
- {filterDB.length === 0 && ( +
+ {filterDB?.length === 0 && (

Coming diff --git a/context/GlobalContext.tsx b/context/GlobalContext.tsx index 0b4f109e4..d20e083a3 100644 --- a/context/GlobalContext.tsx +++ b/context/GlobalContext.tsx @@ -1,5 +1,5 @@ import { useReducer, createContext, ReactNode } from "react"; -import { IContext } from "../types"; +import { IContext } from "types"; import GlobalReducer from "./GlobalReducer"; const initialState: IContext = { @@ -39,4 +39,4 @@ const GlobalProvider = ({ children }: { children: ReactNode }) => { ); }; -export {GlobalContext,GlobalProvider}; +export { GlobalContext, GlobalProvider }; diff --git a/database/Readme.md b/database/Readme.md new file mode 100644 index 000000000..2bb460652 --- /dev/null +++ b/database/Readme.md @@ -0,0 +1,25 @@ +#Database instructions + +

    +
  • +A newly created category and subcategiry should be added to the data file +
    • +
  • A category has it's own folder
    • +
  • +A subcategory is contained in a category folder +
    • + +
  • +When a new category is added ensure to create a folder for it +
    • +
  • +When a new subcategory is added ensure to create a json file for it and place in its respective category +
    • +
  • +Add your resources to the subcategory json file of your choice +
    • +
  • +Export the newly created json file on the index file +
    • + +
diff --git a/database/backend/authentication.json b/database/backend/authentication.json new file mode 100644 index 000000000..fe51488c7 --- /dev/null +++ b/database/backend/authentication.json @@ -0,0 +1 @@ +[] diff --git a/database/backend/caching.json b/database/backend/caching.json new file mode 100644 index 000000000..fe51488c7 --- /dev/null +++ b/database/backend/caching.json @@ -0,0 +1 @@ +[] diff --git a/database/backend/security.json b/database/backend/security.json new file mode 100644 index 000000000..fe51488c7 --- /dev/null +++ b/database/backend/security.json @@ -0,0 +1 @@ +[] diff --git a/database/backend/testing.json b/database/backend/testing.json new file mode 100644 index 000000000..fe51488c7 --- /dev/null +++ b/database/backend/testing.json @@ -0,0 +1 @@ +[] diff --git a/database/backend/validation.json b/database/backend/validation.json new file mode 100644 index 000000000..9332a7f3d --- /dev/null +++ b/database/backend/validation.json @@ -0,0 +1,10 @@ +[ + { + "id": "66", + "name": "Express Validator", + "description": "Express validator is a set of express.js middlewares that wraps validator.js validator and sanitizer functions.", + "url": "https://express-validator.github.io/docs/", + "category": "backend", + "subcategory": "validation" + } +] diff --git a/database/data.ts b/database/data.ts index 67d330d70..8b1fb8002 100644 --- a/database/data.ts +++ b/database/data.ts @@ -1,655 +1,45 @@ -import { IData, ISidebar } from '../types'; - -export const data: IData[] = [ - { - id: '1', - name: 'Unsplash', - description: - 'Unsplash is a site to get free images, you can download all kind of HD images in here for free.', - url: 'https://unsplash.com', - category: 'frontend', - subcategory: 'images', - }, - { - id: '2', - name: 'Pixabay', - description: - 'Pixabay have Over 2M free stock photos, vectors and art illustrations you can use anywhere.', - url: 'https://pixabay.com/', - category: 'frontend', - subcategory: 'images', - }, - { - id: '3', - name: 'Pexels', - description: - 'A great resource for free stock photos and videos, created by photographers around the world.', - url: 'https://pexels.com/', - category: 'frontend', - subcategory: 'images', - }, - { - id: '4', - name: 'Open Color', - description: - 'An open-source color scheme, optimized for UI. My go-to resource to choose colors from scratch. ', - url: 'https://yeun.github.io/open-color/', - category: 'frontend', - subcategory: 'colors', - }, - { - id: '5', - name: 'UI Gradients', - description: - 'Collection of beautiful color gradients for you to choose from and export to your project. ', - url: 'https://uigradients.com/#MoonlitAsteroid', - category: 'frontend', - subcategory: 'colors', - }, - { - id: '6', - name: 'Tailwind Colors', - description: - 'This an excellent and popular set of color pallettes by TailwindCSS. Get beautiful colors of all shades ', - url: 'https://tailwindcss.com/docs/customizing-colors', - category: 'frontend', - subcategory: 'colors', - }, - { - id: '7', - name: 'Color Contract Checker', - description: - 'This an excellent site to check whether contrast of two colors is good or not ', - url: 'https://coolors.co/contrast-checker', - category: 'frontend', - subcategory: 'colors', - }, - { - id: '8', - name: '0to255', - description: - '0to255 is a color tool that makes it easy to find lighter and darker colors, or tints and shades, based on any color. ', - url: 'https://0to255.com/', - category: 'frontend', - subcategory: 'colors', - }, - { - id: '9', - name: 'Google Fonts', - description: - 'The No. 1 resource for free and easy-to-use webfonts by Google. It has a huge library of fonts. ', - url: 'https://fonts.google.com/', - category: 'frontend', - subcategory: 'fonts', - }, - { - id: '10', - name: 'Fonts Quirrel', - description: - "Fonts Quirrel is platform to get free commercial fonts for your project. It's another huge library for fonts ", - url: 'https://fontsquirrel.com/', - category: 'frontend', - subcategory: 'fonts', - }, - { - id: '11', - name: 'Glaze', - description: - 'All in one resource to get free illustrations images for characters, backgrounds, avatar and more', - url: 'https://glazestock.com/', - category: 'frontend', - subcategory: 'illustrations', - }, - { - id: '12', - name: 'unDraw', - description: - 'unDraw os another exccelent platform to get free illustration images with No color restrictions', - url: 'https://undraw.co/illustrations', - category: 'frontend', - subcategory: 'illustrations', - }, - { - id: '13', - name: 'DrawKit', - description: - 'It is a collection of fully customisable PSD illustrations, in two styles, available to use on your next project.', - url: 'https://drawkit.com/', - category: 'frontend', - subcategory: 'illustrations', - }, - { - id: '14', - name: 'Font Awesome', - description: - 'A highly popular icon font, consisting of 1000+ icons spread across countless categories.', - url: 'https://fontawesome.com/', - category: 'frontend', - subcategory: 'icons', - }, - { - id: '15', - name: 'Phosphor Icons', - description: - 'Another beautiful, more boxy SVG collection of free icons. Customizable thickness and color.', - url: 'https://phosphoricons.com/', - category: 'frontend', - subcategory: 'icons', - }, - { - id: '16', - name: 'Flat Icon', - description: - 'It is a collection of fully customisable PSD icons, in two styles, available to use on your next project.', - url: 'https://flaticon.com/', - category: 'frontend', - subcategory: 'icons', - }, - { - id: '17', - name: 'Line Awesome', - description: - 'It is a collection of fully customisable PSD icons, in two styles, available to use on your next project.', - url: 'https://icons8.com/line-awesome', - category: 'frontend', - subcategory: 'icons', - }, - { - id: '18', - name: 'Font Joy', - description: - 'Font Joy is a website that generates font pairings for designers and developers to use in their projects. ', - url: 'https://fontjoy.com/', - category: 'frontend', - subcategory: 'fonts', - }, - { - id: '19', - name: 'Icon Sets', - description: - 'Icon-sets is a website that provides a collection of icons for designers and developers to use in their projects.', - url: 'https://icon-sets.iconify.design/', - category: 'frontend', - subcategory: 'icons', - }, - { - id: '20', - name: 'Kaboompics', - description: - 'it allows to search pictures by color, and it provides a complementary palette of colors in the photo.', - url: 'https://kaboompics.com/', - category: 'frontend', - subcategory: 'images', - }, - { - id: "21", - name: "1001 fonts", - description: - "1001 fonts is a platform that offers 42933 free fonts in 24214 families · Free licenses for commercial use·", - url: "https://www.1001fonts.com/", - category: "frontend", - subcategory: "fonts", - }, - { - id: "22", - name: "Coolors", - description: - "Coolors is the essential tool for creating color palettes. It generates perfect matching colors in seconds.", - url: "https://coolors.co/", - category: "frontend", - subcategory: "colors", - }, - { - id: "23", - name: "Lottie files", - description: - "LottieFiles takes away the complexity from Motion Design. It lets you Create, Edit, Test, Collaborate and Ship a Lottie in the easiest way possible.", - url: "https://lottiefiles.com/", - category: "frontend", - subcategory: "animations", - }, - { - id: "24", - name: "Type Scale", - description: - "A tool to create visual type scales - sets of font sizes that follow good-looking proportions.", - url: "https://type-scale.com", - category: "frontend", - subcategory: "fonts", - }, - { - id: "25", - name: "Dribbble", - description: - "Explore the world’s leading design portfolios.", - url: "https://dribbble.com", - category: "frontend", - subcategory: "design-inspiration", - }, - { - id: "26", - name: "Godly Website", - description: - "A curated collection of good web design from all over the web", - url: "https://godly.website", - category: "frontend", - subcategory: "design-inspiration", - }, - { - id: "27", - name: "Cubic Bezier", - description: - "A tool for visualisation and creation of cubic-bezier curves for animation in CSS", - url: "https://cubic-bezier.com/", - category: "frontend", - subcategory: "animations", - }, - { - id: "28", - name: "Framer Motion", - description: - "Framer Motion is a production-ready motion library for React from Framer, It's simple yet powerful, allowing you to express complex user interactions with robust, semantic markup.", - url: "https://www.framer.com/motion/", - category: "frontend", - subcategory: "animations", - }, - { - id: "29", - name: "UI Faces", - description: - "UI Faces aggregates various free avatar placeholder sources that you can use in your design mockups by copy & paste, API, and plugins for Sketch, Adobe XD, and Figma.", - url: "https://uifaces.co/browse-avatars/", - category: "frontend", - subcategory: "images", - }, - { - id: "30", - name: "HTML Color Picker", - description: - "This is a color picker by w3schools which provides different shades of colors based on your requirements. It also gives Hex and RGB value of color.", - url: "https://w3schools.com/colors/colors_picker.asp", - category: "frontend", - subcategory: "colors", - }, - { - id: "31", - name: "Neumorphism.io", - description: "It's a platform where you can generate Soft-UI CSS elements for your webiste or app.", - url: "https://neumorphism.io/#e0e0e0", - category: "frontend", - subcategory: "ui-generators", - }, - { - id: "32", - name: "Hype4 Academy", - description: "Another cool and excellent site to generate Glassmorphism CSS for your project.", - url: "https://hype4.academy/tools/glassmorphism-generator", - category: "frontend", - subcategory: "ui-generators", - }, - { - id: "33", - name: "Universe.io", - description: "It provides tones of cool UI elements made with HTML & CSS.", - url: "https://uiverse.io/all", - category: "frontend", - subcategory: "ui-generators", - }, - { - id: "34", - name: "CSS Portal", - description: "A bundle of amazing and UI CSS elements for you to use in your project.", - url: "https://www.cssportal.com/ui-generators.php", - category: "frontend", - subcategory: "ui-generators", - }, - { - id: "35", - name: "EnjoyCSS", - description: "A platform to implement amazing CSS elements of your choice for your porject.", - url: "https://enjoycss.com/", - category: "frontend", - subcategory: "ui-generators", - }, - { - id: "36", - name: "CSS Generator", - description: "A CSS generator that helps you demonstrate and quickly generate CSS declarations for your website.", - url: "https://cssgenerator.org/", - category: "frontend", - subcategory: "ui-generators", - }, - { - id: "37", - name: "Code Magic", - description: "An amazing open source platform for generating ready to use CSS elements for your project. ", - url: "https://code-magic.vercel.app/", - category: "frontend", - subcategory: "ui-generators", - }, - { - id: "38", - name: "daisyUI", - description: "A platform where you can generate UI components based on TailwindCSS. ", - url: "https://daisyui.com/", - category: "frontend", - subcategory: "ui-generators", - }, - { - id: "39", - name: "TailBlocks", - description: "Another great platform where you can generate UI components based on TailwindCSS. ", - url: "https://tailblocks.cc/", - category: "frontend", - subcategory: "ui-generators", - }, - { - id: "40", - name: "Proton", - description: "A JavaScript particle based animation engine. Which provides you tones of animated elements.", - url: "https://drawcall.github.io/Proton/", - category: "frontend", - subcategory: "animations", - }, - { - id: "41", - name: "Codepen", - description: "An amazing online community for testing and showcasing HTML, CSS, JavaScript code snippets.", - url: "https://codepen.io", - category: "frontend", - subcategory: "online-code-editors", - }, - { - id: "42", - name: "Tryit", - description: "Another online platform for testing codes written in HTML, CSS and JavaScript.", - url: "https://w3schools.com/html/tryit.asp?filename=tryhtml_basic", - category: "frontend", - subcategory: "online-code-editors", - }, - { - id: "43", - name: "OnlineGDB", - description: "Another online platform for testing codes written in HTML, CSS and JavaScript.", - url: "https://w3schools.com/html/tryit.asp?filename=tryhtml_basic", - category: "frontend", - subcategory: "online-code-editors", - }, - { - id: "44", - name: "Sololearn", - description: "It's multi-language online code editor test and share your code snippets.", - url: "https://sololearn.com/compiler-playground/cVRUy2BwauK8", - category: "frontend", - subcategory: "online-code-editors", - }, - { - id: "45", - name: "CodeChef", - description: "An online IDE to practice you competitive programming skills. It allows you to code in multiple languages.", - url: "https://www.codechef.com/ide", - category: "frontend", - subcategory: "online-code-editors", - }, - { - id: "46", - name: "FreeCodeCamp", - description: "This channel provides free multi programming language courses for Web-dev, android and more.", - url: "https://www.youtube.com/watch?v=fis26HvvDII", - category: "youtube", - subcategory: "android", - }, - { - id: "47", - name: "The Net Ninja", - description: "The Net Ninja is a YouTube channel that teaches web development, including HTML, CSS, JavaScript, PHP, Python, C#, and more.", - url: "https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg", - category: "youtube", - subcategory: "web-development", - }, - { - id: "48", - name: "3Blue1Brown", - description: "3Blue1Brown, by Grant Sanderson, is some combination of math and entertainment, depending on your disposition. The goal is for explanations to be driven by animations and for difficult problems to be made simple with changes in perspective.", - url: "https://www.youtube.com/@3blue1brown", - category: "youtube", - subcategory: "machine-learning" - }, - { - id: "49", - name: "UI Color Picker", - description: "A color picker that contains different shades of solid colors & gradients. Which can be used in any kind of projects.", - url: "https://uicolorpicker.com/", - category: "frontend", - subcategory: "colors" - }, - { - id: "50", - name: "Traversy Media", - description: "This channel is for all level of developers who want to start or continue their journey in tech.", - url: "https://www.youtube.com/@TraversyMedia", - category: "youtube", - subcategory: "web-development", - }, - { - id: "51", - name: "FreeCodeCamp", - description: "This channel provide free courses related to web-dev, app-dev, projects and many more.", - url: "https://www.youtube.com/@freecodecamp", - category: "youtube", - subcategory: "web-development", - }, - { - id: "52", - name: "Fireship", - description: "Fireship is a channel which provides short introuction videos and quick learning guides.", - url: "https://www.youtube.com/@Fireship", - category: "youtube", - subcategory: "web-development", - }, - { - id: "53", - name: "Programming with Mosh", - description: "It's another great channel for starting you web development journey.", - url: "https://www.youtube.com/@programmingwithmosh", - category: "youtube", - subcategory: "web-development", - }, - { - id: "54", - name: "Jennys Lectures CSIT", - description: "This channel provides free courses for DSA, C, C++, Python etc.", - url: "https://www.youtube.com/@JennyslecturesCSIT", - category: "youtube", - subcategory: "dsa", - }, - { - id: "55", - name: "Academind", - description: "It's a great channel for web development. It's more focused on JavaScript and it's frameworks.", - url: "https://www.youtube.com/@academind", - category: "youtube", - subcategory: "web-development", - }, - { - id: "56", - name: "Devicon", - description: "Set of icons representing programming languages, designing & development tools, all in one single font.", - url: "https://devicon.dev", - category: "frontend", - subcategory: "icons" - }, - { - id: "57", - name: "Medium", - description: "Medium is a website that allows people to publish and share articles, stories, and ideas with a community of readers.", - url: "https://medium.com", - category: "resources", - subcategory: "blogs" - }, - { - id: "58", - name: "GeeksforGeeks", - description: "GeeksforGeeks is a computer science portal for geeks offering coding and algorithm tutorials, interview questions and more.", - url: "https://geeksforgeeks.org", - category: "resources", - subcategory: "blogs" - }, - { - id: "59", - name: "Javatpoint", - description: "A platform that provides free tutorials and interview questions about technologies related to computer science.", - url: "https://www.javatpoint.com/", - category: "resources", - subcategory: "blogs" - }, - { - id: "60", - name: "W3Schools", - description: "W3Schools is a platform that offers tutorials, references, and courses covering all aspects of web development.", - url: "https://www.w3schools.com", - category: "resources", - subcategory: "blogs" - }, - { - id: "61", - name: "LogRocket", - description: "It is a frontend monitoring tool that helps with debugging by providing insights into user behavior.", - url: "https://logrocket.com", - category: "resources", - subcategory: "blogs" - }, - { - id: "62", - name: "Tutorialspoint", - description: "Tutorials Point is an Ed Tech platform that offers the best learning material for technical and non-technical subjects.", - url: "https://tutorialspoint.com", - category: "resources", - subcategory: "blogs" - }, - { - id: "63", - name: "Dev.to", - description: "A constructive and inclusive social network for software developers where they share and discover great ideas.", - url: "https://dev.to/", - category: "resources", - subcategory: "blogs" - }, - { - id: "64", - name: "FreeCodeCamp", - description: "A platform that has thousands of videos, articles, and coding lessons for helping people learn to code for free.", - url: "https://freecodecamp.com", - category: "resources", - subcategory: "blogs" - }, - { - id: "65", - name: "Hashnode", - description: "A free blogging platform where people in tech, developers, and engineers share their ideas.", - url: "https://hashnode.com", - category: "resources", - subcategory: "blogs" - }, - { - id: "66", - name: "GitHub Pages", - description: "A free hosting service provided by GitHub for hosting static websites from a GitHub repository. Simple to use but limited in customization options.", - url: "https://pages.github.com/", - category: "resources", - subcategory: "hosting", - }, - { - id: "67", - name: "Vercel", - description: "A cloud platform for building and deploying web projects, including static websites. Known for its fast CDN and Git integration. Offers custom domains, environment variables, and free hosting.", - url: "https://vercel.com/", - category: "resources", - subcategory: "hosting", - }, - { - id: "68", - name: "Netlify", - description: "A popular platform for deploying and managing web projects, including static websites. Offers easy setup and integration with popular front-end frameworks, as well as features such as continuous deployment, custom domains, SSL certificates, and free hosting.", - url: "https://www.netlify.com/", - category: "resources", - subcategory: "hosting", - }, - { - id: "69", - name: "Heroku", - description: "Heroku is a cloud platform for deploying static as well dynamic websites, supporting multiple programming languages. It offers convenient management and scaling options, but with a cost based on usage", - url: "https://www.heroku.com/", - category: "resources", - subcategory: "hosting", - }, - { - id: "70", - name: "PythonAnywhere", - description: "A platform for hosting Python based web apps with a cloud-based development environment. Offers free hosting with limited options and paid plans for additional features.", - url: "https://www.pythonanywhere.com/", - category: "resources", - subcategory: "hosting", - }, - { - id: "71", - name: "Render", - description: "Render is a comprehensive solution for hosting web applications, both static and dynamic, with a simple and streamlined deployment process. It offers a range of plans, including a free option with limited resources, and paid plans with increased storage, bandwidth, and processing power.", - url: "https://www.render.com/", - category: "resources", - subcategory: "hosting", - }, - { - id: "72", - name: "Fly", - description: "Fly is a serverless hosting platform that charges only for actual usage and provides automatic scaling and high availability for web applications. It offers a free plan with limited resources and paid plans with more processing power, storage, and bandwidth.", - url: "https://www.fly.io/", - category: "resources", - subcategory: "hosting", - }, - -]; +import { IData, ISidebar } from "../types"; export const sidebarData: ISidebar[] = [ { - category: 'frontend', + category: "frontend", subcategory: [ - { name: 'images', url: '/images' }, - { name: 'fonts', url: '/fonts' }, - { name: 'colors', url: '/colors' }, - { name: 'illustrations', url: '/illustrations' }, - { name: 'animations', url: '/animations' }, - { name: 'icons', url: '/icons' }, - { name: 'design inspiration', url: '/design-inspiration' }, - { name: 'themes & templates', url: '/themes-templates' }, - { name: 'UI Generators', url: '/ui-generator' }, - { name: 'online code editors', url: '/online-code-editors' }, + { name: "images", url: "/images" }, + { name: "fonts", url: "/fonts" }, + { name: "colors", url: "/colors" }, + { name: "illustrations", url: "/illustrations" }, + { name: "animations", url: "/animations" }, + { name: "icons", url: "/icons" }, + { name: "design inspiration", url: "/design-inspiration" }, + { name: "themes & templates", url: "/themes-templates" }, + { name: "UI Generators", url: "/ui-generator" }, + { name: "online code editors", url: "/online-code-editors" }, ], }, { - category: 'backend', + category: "backend", subcategory: [ - { name: 'validation', url: '/validation' }, - { name: 'security', url: '/security' }, - { name: 'authentication', url: '/authentication' }, - { name: 'caching', url: '/caching' }, - { name: 'testing', url: '/testing' }, + { name: "validation", url: "/validation" }, + { name: "security", url: "/security" }, + { name: "authentication", url: "/authentication" }, + { name: "caching", url: "/caching" }, + { name: "testing", url: "/testing" }, ], }, { - category: 'youtube', + category: "youtube", subcategory: [ - { name: 'web development', url: '/web-development' }, - { name: 'machine learning', url: '/machine-learning' }, - { name: 'data structures', url: '/dsa' }, - { name: 'Android', url: '/android' }, + { name: "web development", url: "/web-development" }, + { name: "machine learning", url: "/machine-learning" }, + { name: "data structures", url: "/dsa" }, + { name: "Android", url: "/android" }, ], }, { - category: 'resources', + category: "resources", subcategory: [ - { name: 'blogs', url: '/blogs' }, - { name: 'hosting', url: '/hosting' }, + { name: "blogs", url: "/blogs" }, + { name: "hosting", url: "/hosting" }, ], }, ]; diff --git a/database/frontend/animations.json b/database/frontend/animations.json new file mode 100644 index 000000000..e92993ac3 --- /dev/null +++ b/database/frontend/animations.json @@ -0,0 +1,34 @@ +[ + { + "id": "23", + "name": "Lottie files", + "description": "LottieFiles takes away the complexity from Motion Design. It lets you Create, Edit, Test, Collaborate and Ship a Lottie in the easiest way possible.", + "url": "https://lottiefiles.com/", + "category": "frontend", + "subcategory": "animations" + }, + { + "id": "27", + "name": "Cubic Bezier", + "description": "A tool for visualisation and creation of cubic-bezier curves for animation in CSS", + "url": "https://cubic-bezier.com/", + "category": "frontend", + "subcategory": "animations" + }, + { + "id": "28", + "name": "Framer Motion", + "description": "Framer Motion is a production-ready motion library for React from Framer, It's simple yet powerful, allowing you to express complex user interactions with robust, semantic markup.", + "url": "https://www.framer.com/motion/", + "category": "frontend", + "subcategory": "animations" + }, + { + "id": "40", + "name": "Proton", + "description": "A JavaScript particle based animation engine. Which provides you tones of animated elements.", + "url": "https://drawcall.github.io/Proton/", + "category": "frontend", + "subcategory": "animations" + } +] diff --git a/database/frontend/colors.json b/database/frontend/colors.json new file mode 100644 index 000000000..b2ff92371 --- /dev/null +++ b/database/frontend/colors.json @@ -0,0 +1,66 @@ +[ + { + "id": "4", + "name": "Open Color", + "description": "An open-source color scheme, optimized for UI. My go-to resource to choose colors from scratch. ", + "url": "https://yeun.github.io/open-color/", + "category": "frontend", + "subcategory": "colors" + }, + { + "id": "5", + "name": "UI Gradients", + "description": "Collection of beautiful color gradients for you to choose from and export to your project. ", + "url": "https://uigradients.com/#MoonlitAsteroid", + "category": "frontend", + "subcategory": "colors" + }, + { + "id": "6", + "name": "Tailwind Colors", + "description": "This an excellent and popular set of color pallettes by TailwindCSS. Get beautiful colors of all shades ", + "url": "https://tailwindcss.com/docs/customizing-colors", + "category": "frontend", + "subcategory": "colors" + }, + { + "id": "7", + "name": "Color Contract Checker", + "description": "This an excellent site to check whether contrast of two colors is good or not ", + "url": "https://coolors.co/contrast-checker", + "category": "frontend", + "subcategory": "colors" + }, + { + "id": "8", + "name": "0to255", + "description": "0to255 is a color tool that makes it easy to find lighter and darker colors, or tints and shades, based on any color. ", + "url": "https://0to255.com/", + "category": "frontend", + "subcategory": "colors" + }, + { + "id": "22", + "name": "Coolors", + "description": "Coolors is the essential tool for creating color palettes. It generates perfect matching colors in seconds.", + "url": "https://coolors.co/", + "category": "frontend", + "subcategory": "colors" + }, + { + "id": "30", + "name": "HTML Color Picker", + "description": "This is a color picker by w3schools which provides different shades of colors based on your requirements. It also gives Hex and RGB value of color.", + "url": "https://w3schools.com/colors/colors_picker.asp", + "category": "frontend", + "subcategory": "colors" + }, + { + "id": "49", + "name": "UI Color Picker", + "description": "A color picker that contains different shades of solid colors & gradients. Which can be used in any kind of projects.", + "url": "https://uicolorpicker.com/", + "category": "frontend", + "subcategory": "colors" + } +] diff --git a/database/frontend/design-inspirations.json b/database/frontend/design-inspirations.json new file mode 100644 index 000000000..7679d8d60 --- /dev/null +++ b/database/frontend/design-inspirations.json @@ -0,0 +1,18 @@ +[ + { + "id": "25", + "name": "Dribbble", + "description": "Explore the world’s leading design portfolios.", + "url": "https://dribbble.com", + "category": "frontend", + "subcategory": "design-inspiration" + }, + { + "id": "26", + "name": "Godly Website", + "description": "A curated collection of good web design from all over the web", + "url": "https://godly.website", + "category": "frontend", + "subcategory": "design-inspiration" + } +] diff --git a/database/frontend/fonts.json b/database/frontend/fonts.json new file mode 100644 index 000000000..9348508ac --- /dev/null +++ b/database/frontend/fonts.json @@ -0,0 +1,42 @@ +[ + { + "id": "9", + "name": "Google Fonts", + "description": "The No. 1 resource for free and easy-to-use webfonts by Google. It has a huge library of fonts. ", + "url": "https://fonts.google.com/", + "category": "frontend", + "subcategory": "fonts" + }, + { + "id": "10", + "name": "Fonts Quirrel", + "description": "Fonts Quirrel is platform to get free commercial fonts for your project. It's another huge library for fonts ", + "url": "https://fontsquirrel.com/", + "category": "frontend", + "subcategory": "fonts" + }, + { + "id": "21", + "name": "1001 fonts", + "description": "1001 fonts is a platform that offers 42933 free fonts in 24214 families · Free licenses for commercial use·", + "url": "https://www.1001fonts.com/", + "category": "frontend", + "subcategory": "fonts" + }, + { + "id": "18", + "name": "Font Joy", + "description": "Font Joy is a website that generates font pairings for designers and developers to use in their projects. ", + "url": "https://fontjoy.com/", + "category": "frontend", + "subcategory": "fonts" + }, + { + "id": "24", + "name": "Type Scale", + "description": "A tool to create visual type scales - sets of font sizes that follow good-looking proportions.", + "url": "https://type-scale.com", + "category": "frontend", + "subcategory": "fonts" + } +] diff --git a/database/frontend/icons.json b/database/frontend/icons.json new file mode 100644 index 000000000..cbdf5c641 --- /dev/null +++ b/database/frontend/icons.json @@ -0,0 +1,51 @@ +[ + { + "id": "14", + "name": "Font Awesome", + "description": "A highly popular icon font, consisting of 1000+ icons spread across countless categories.", + "url": "https://fontawesome.com/", + "category": "frontend", + "subcategory": "icons" + }, + { + "id": "15", + "name": "Phosphor Icons", + "description": "Another beautiful, more boxy SVG collection of free icons. Customizable thickness and color.", + "url": "https://phosphoricons.com/", + "category": "frontend", + "subcategory": "icons" + }, + { + "id": "16", + "name": "Flat Icon", + "description": "It is a collection of fully customisable PSD icons, in two styles, available to use on your next project.", + "url": "https://flaticon.com/", + "category": "frontend", + "subcategory": "icons" + }, + { + "id": "17", + "name": "Line Awesome", + "description": "It is a collection of fully customisable PSD icons, in two styles, available to use on your next project.", + "url": "https://icons8.com/line-awesome", + "category": "frontend", + "subcategory": "icons" + }, + + { + "id": "19", + "name": "Icon Sets", + "description": "Icon-sets is a website that provides a collection of icons for designers and developers to use in their projects.", + "url": "https://icon-sets.iconify.design/", + "category": "frontend", + "subcategory": "icons" + }, + { + "id": "56", + "name": "Devicon", + "description": "Set of icons representing programming languages, designing & development tools, all in one single font.", + "url": "https://devicon.dev", + "category": "frontend", + "subcategory": "icons" + } +] diff --git a/database/frontend/illustrations.json b/database/frontend/illustrations.json new file mode 100644 index 000000000..4cbac187c --- /dev/null +++ b/database/frontend/illustrations.json @@ -0,0 +1,26 @@ +[ + { + "id": "11", + "name": "Glaze", + "description": "All in one resource to get free illustrations images for characters, backgrounds, avatar and more", + "url": "https://glazestock.com/", + "category": "frontend", + "subcategory": "illustrations" + }, + { + "id": "12", + "name": "unDraw", + "description": "unDraw os another exccelent platform to get free illustration images with No color restrictions", + "url": "https://undraw.co/illustrations", + "category": "frontend", + "subcategory": "illustrations" + }, + { + "id": "13", + "name": "DrawKit", + "description": "It is a collection of fully customisable PSD illustrations, in two styles, available to use on your next project.", + "url": "https://drawkit.com/", + "category": "frontend", + "subcategory": "illustrations" + } +] diff --git a/database/frontend/images.json b/database/frontend/images.json new file mode 100644 index 000000000..822a330ee --- /dev/null +++ b/database/frontend/images.json @@ -0,0 +1,34 @@ +[ + { + "id": "1", + "name": "Unsplash", + "description": "Unsplash is a site to get free images, you can download all kind of HD images in here for free.", + "url": "https://unsplash.com", + "category": "frontend", + "subcategory": "images" + }, + { + "id": "2", + "name": "Pixabay", + "description": "Pixabay have Over 2M free stock photos, vectors and art illustrations you can use anywhere.", + "url": "https://pixabay.com/", + "category": "frontend", + "subcategory": "images" + }, + { + "id": "3", + "name": "Pexels", + "description": "A great resource for free stock photos and videos, created by photographers around the world.", + "url": "https://pexels.com/", + "category": "frontend", + "subcategory": "images" + }, + { + "id": "20", + "name": "Kaboompics", + "description": "it allows to search pictures by color, and it provides a complementary palette of colors in the photo.", + "url": "https://kaboompics.com/", + "category": "frontend", + "subcategory": "images" + } +] diff --git a/database/frontend/online-code-editors.json b/database/frontend/online-code-editors.json new file mode 100644 index 000000000..29790a39b --- /dev/null +++ b/database/frontend/online-code-editors.json @@ -0,0 +1,42 @@ +[ + { + "id": "41", + "name": "Codepen", + "description": "An amazing online community for testing and showcasing HTML, CSS, JavaScript code snippets.", + "url": "https://codepen.io", + "category": "frontend", + "subcategory": "online-code-editors" + }, + { + "id": "42", + "name": "Tryit", + "description": "Another online platform for testing codes written in HTML, CSS and JavaScript.", + "url": "https://w3schools.com/html/tryit.asp?filename=tryhtml_basic", + "category": "frontend", + "subcategory": "online-code-editors" + }, + { + "id": "43", + "name": "OnlineGDB", + "description": "Another online platform for testing codes written in HTML, CSS and JavaScript.", + "url": "https://w3schools.com/html/tryit.asp?filename=tryhtml_basic", + "category": "frontend", + "subcategory": "online-code-editors" + }, + { + "id": "44", + "name": "Sololearn", + "description": "It's multi-language online code editor test and share your code snippets.", + "url": "https://sololearn.com/compiler-playground/cVRUy2BwauK8", + "category": "frontend", + "subcategory": "online-code-editors" + }, + { + "id": "45", + "name": "CodeChef", + "description": "An online IDE to practice you competitive programming skills. It allows you to code in multiple languages.", + "url": "https://www.codechef.com/ide", + "category": "frontend", + "subcategory": "online-code-editors" + } +] diff --git a/database/frontend/themes-templates.json b/database/frontend/themes-templates.json new file mode 100644 index 000000000..fe51488c7 --- /dev/null +++ b/database/frontend/themes-templates.json @@ -0,0 +1 @@ +[] diff --git a/database/frontend/ui-generators.json b/database/frontend/ui-generators.json new file mode 100644 index 000000000..9acb4ae1f --- /dev/null +++ b/database/frontend/ui-generators.json @@ -0,0 +1,74 @@ +[ + { + "id": "31", + "name": "Neumorphism.io", + "description": "It's a platform where you can generate Soft-UI CSS elements for your webiste or app.", + "url": "https://neumorphism.io/#e0e0e0", + "category": "frontend", + "subcategory": "ui-generators" + }, + { + "id": "32", + "name": "Hype4 Academy", + "description": "Another cool and excellent site to generate Glassmorphism CSS for your project.", + "url": "https://hype4.academy/tools/glassmorphism-generator", + "category": "frontend", + "subcategory": "ui-generators" + }, + { + "id": "33", + "name": "Universe.io", + "description": "It provides tones of cool UI elements made with HTML & CSS.", + "url": "https://uiverse.io/all", + "category": "frontend", + "subcategory": "ui-generators" + }, + { + "id": "34", + "name": "CSS Portal", + "description": "A bundle of amazing and UI CSS elements for you to use in your project.", + "url": "https://www.cssportal.com/ui-generators.php", + "category": "frontend", + "subcategory": "ui-generators" + }, + { + "id": "35", + "name": "EnjoyCSS", + "description": "A platform to implement amazing CSS elements of your choice for your porject.", + "url": "https://enjoycss.com/", + "category": "frontend", + "subcategory": "ui-generators" + }, + { + "id": "36", + "name": "CSS Generator", + "description": "A CSS generator that helps you demonstrate and quickly generate CSS declarations for your website.", + "url": "https://cssgenerator.org/", + "category": "frontend", + "subcategory": "ui-generators" + }, + { + "id": "37", + "name": "Code Magic", + "description": "An amazing open source platform for generating ready to use CSS elements for your project. ", + "url": "https://code-magic.vercel.app/", + "category": "frontend", + "subcategory": "ui-generators" + }, + { + "id": "38", + "name": "daisyUI", + "description": "A platform where you can generate UI components based on TailwindCSS. ", + "url": "https://daisyui.com/", + "category": "frontend", + "subcategory": "ui-generators" + }, + { + "id": "39", + "name": "TailBlocks", + "description": "Another great platform where you can generate UI components based on TailwindCSS. ", + "url": "https://tailblocks.cc/", + "category": "frontend", + "subcategory": "ui-generators" + } +] diff --git a/database/index.ts b/database/index.ts new file mode 100644 index 000000000..62cb2cddc --- /dev/null +++ b/database/index.ts @@ -0,0 +1,25 @@ +// frontend +export { default as animations } from "./frontend/animations.json"; +export { default as colors } from "./frontend/colors.json"; +export { default as designInspirations } from "./frontend/design-inspirations.json"; +export { default as fonts } from "./frontend/fonts.json"; +export { default as icons } from "./frontend/icons.json"; +export { default as illustrations } from "./frontend/illustrations.json"; +export { default as images } from "./frontend/images.json"; +export { default as onlineCodeEditors } from "./frontend/online-code-editors.json"; +export { default as themesTemplates } from "./frontend/themes-templates.json"; +export { default as uiGenerators } from "./frontend/ui-generators.json"; +// backend +export { default as authentication } from "./backend/authentication.json"; +export { default as caching } from "./backend/caching.json"; +export { default as security } from "./backend/security.json"; +export { default as testing } from "./backend/testing.json"; +export { default as validation } from "./backend/validation.json"; +// resources +export { default as blogs } from "./resources/blogs.json"; +export { default as hosting } from "./resources/hosting.json"; +// youtube +export { default as android } from "./youtube/android.json"; +export { default as dataStructures } from "./youtube/data-structures.json"; +export { default as machineLearning } from "./youtube/machine-learning.json"; +export { default as webDevelopment } from "./youtube/web-development.json"; diff --git a/database/resources/blogs.json b/database/resources/blogs.json new file mode 100644 index 000000000..49747959f --- /dev/null +++ b/database/resources/blogs.json @@ -0,0 +1,74 @@ +[ + { + "id": "57", + "name": "Medium", + "description": "Medium is a website that allows people to publish and share articles, stories, and ideas with a community of readers.", + "url": "https://medium.com", + "category": "resources", + "subcategory": "blogs" + }, + { + "id": "58", + "name": "GeeksforGeeks", + "description": "GeeksforGeeks is a computer science portal for geeks offering coding and algorithm tutorials, interview questions and more.", + "url": "https://geeksforgeeks.org", + "category": "resources", + "subcategory": "blogs" + }, + { + "id": "59", + "name": "Javatpoint", + "description": "A platform that provides free tutorials and interview questions about technologies related to computer science.", + "url": "https://www.javatpoint.com/", + "category": "resources", + "subcategory": "blogs" + }, + { + "id": "60", + "name": "W3Schools", + "description": "W3Schools is a platform that offers tutorials, references, and courses covering all aspects of web development.", + "url": "https://www.w3schools.com", + "category": "resources", + "subcategory": "blogs" + }, + { + "id": "61", + "name": "LogRocket", + "description": "It is a frontend monitoring tool that helps with debugging by providing insights into user behavior.", + "url": "https://logrocket.com", + "category": "resources", + "subcategory": "blogs" + }, + { + "id": "62", + "name": "Tutorialspoint", + "description": "Tutorials Point is an Ed Tech platform that offers the best learning material for technical and non-technical subjects.", + "url": "https://tutorialspoint.com", + "category": "resources", + "subcategory": "blogs" + }, + { + "id": "63", + "name": "Dev.to", + "description": "A constructive and inclusive social network for software developers where they share and discover great ideas.", + "url": "https://dev.to/", + "category": "resources", + "subcategory": "blogs" + }, + { + "id": "64", + "name": "FreeCodeCamp", + "description": "A platform that has thousands of videos, articles, and coding lessons for helping people learn to code for free.", + "url": "https://freecodecamp.com", + "category": "resources", + "subcategory": "blogs" + }, + { + "id": "65", + "name": "Hashnode", + "description": "A free blogging platform where people in tech, developers, and engineers share their ideas.", + "url": "https://hashnode.com", + "category": "resources", + "subcategory": "blogs" + } +] diff --git a/database/resources/hosting.json b/database/resources/hosting.json new file mode 100644 index 000000000..a67e2ae4f --- /dev/null +++ b/database/resources/hosting.json @@ -0,0 +1,58 @@ +[ + { + "id": "66", + "name": "GitHub Pages", + "description": "A free hosting service provided by GitHub for hosting static websites from a GitHub repository. Simple to use but limited in customization options.", + "url": "https://pages.github.com/", + "category": "resources", + "subcategory": "hosting" + }, + { + "id": "67", + "name": "Vercel", + "description": "A cloud platform for building and deploying web projects, including static websites. Known for its fast CDN and Git integration. Offers custom domains, environment variables, and free hosting.", + "url": "https://vercel.com/", + "category": "resources", + "subcategory": "hosting" + }, + { + "id": "68", + "name": "Netlify", + "description": "A popular platform for deploying and managing web projects, including static websites. Offers easy setup and integration with popular front-end frameworks, as well as features such as continuous deployment, custom domains, SSL certificates, and free hosting.", + "url": "https://www.netlify.com/", + "category": "resources", + "subcategory": "hosting" + }, + { + "id": "69", + "name": "Heroku", + "description": "Heroku is a cloud platform for deploying static as well dynamic websites, supporting multiple programming languages. It offers convenient management and scaling options, but with a cost based on usage", + "url": "https://www.heroku.com/", + "category": "resources", + "subcategory": "hosting" + }, + { + "id": "70", + "name": "PythonAnywhere", + "description": "A platform for hosting Python based web apps with a cloud-based development environment. Offers free hosting with limited options and paid plans for additional features.", + "url": "https://www.pythonanywhere.com/", + "category": "resources", + "subcategory": "hosting" + }, + { + "id": "71", + "name": "Render", + "description": "Render is a comprehensive solution for hosting web applications, both static and dynamic, with a simple and streamlined deployment process. It offers a range of plans, including a free option with limited resources, and paid plans with increased storage, bandwidth, and processing power.", + "url": "https://www.render.com/", + "category": "resources", + "subcategory": "hosting" + }, + { + "id": "72", + "name": "Fly", + "description": "Fly is a serverless hosting platform that charges only for actual usage and provides automatic scaling and high availability for web applications. It offers a free plan with limited resources and paid plans with more processing power, storage, and bandwidth.", + "url": "https://www.fly.io/", + "category": "resources", + "subcategory": "hosting" + } +] diff --git a/database/youtube/android.json b/database/youtube/android.json new file mode 100644 index 000000000..2f0e31d36 --- /dev/null +++ b/database/youtube/android.json @@ -0,0 +1,10 @@ +[ + { + "id": "46", + "name": "FreeCodeCamp", + "description": "This channel provides free multi programming language courses for Web-dev, android and more.", + "url": "https://www.youtube.com/watch?v=fis26HvvDII", + "category": "youtube", + "subcategory": "android" + } +] diff --git a/database/youtube/data-structures.json b/database/youtube/data-structures.json new file mode 100644 index 000000000..9f969852a --- /dev/null +++ b/database/youtube/data-structures.json @@ -0,0 +1,10 @@ +[ + { + "id": "54", + "name": "Jennys Lectures CSIT", + "description": "This channel provides free courses for DSA, C, C++, Python etc.", + "url": "https://www.youtube.com/@JennyslecturesCSIT", + "category": "youtube", + "subcategory": "dsa" + } +] diff --git a/database/youtube/machine-learning.json b/database/youtube/machine-learning.json new file mode 100644 index 000000000..5a1b7ca8e --- /dev/null +++ b/database/youtube/machine-learning.json @@ -0,0 +1,10 @@ +[ + { + "id": "48", + "name": "3Blue1Brown", + "description": "3Blue1Brown, by Grant Sanderson, is some combination of math and entertainment, depending on your disposition. The goal is for explanations to be driven by animations and for difficult problems to be made simple with changes in perspective.", + "url": "https://www.youtube.com/@3blue1brown", + "category": "youtube", + "subcategory": "machine-learning" + } +] diff --git a/database/youtube/web-development.json b/database/youtube/web-development.json new file mode 100644 index 000000000..9812ba236 --- /dev/null +++ b/database/youtube/web-development.json @@ -0,0 +1,50 @@ +[ + { + "id": "47", + "name": "The Net Ninja", + "description": "The Net Ninja is a YouTube channel that teaches web development, including HTML, CSS, JavaScript, PHP, Python, C#, and more.", + "url": "https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg", + "category": "youtube", + "subcategory": "web-development" + }, + { + "id": "50", + "name": "Traversy Media", + "description": "This channel is for all level of developers who want to start or continue their journey in tech.", + "url": "https://www.youtube.com/@TraversyMedia", + "category": "youtube", + "subcategory": "web-development" + }, + { + "id": "51", + "name": "FreeCodeCamp", + "description": "This channel provide free courses related to web-dev, app-dev, projects and many more.", + "url": "https://www.youtube.com/@freecodecamp", + "category": "youtube", + "subcategory": "web-development" + }, + { + "id": "52", + "name": "Fireship", + "description": "Fireship is a channel which provides short introuction videos and quick learning guides.", + "url": "https://www.youtube.com/@Fireship", + "category": "youtube", + "subcategory": "web-development" + }, + { + "id": "53", + "name": "Programming with Mosh", + "description": "It's another great channel for starting you web development journey.", + "url": "https://www.youtube.com/@programmingwithmosh", + "category": "youtube", + "subcategory": "web-development" + }, + { + "id": "55", + "name": "Academind", + "description": "It's a great channel for web development. It's more focused on JavaScript and it's frameworks.", + "url": "https://www.youtube.com/@academind", + "category": "youtube", + "subcategory": "web-development" + } +] diff --git a/hooks/useLoader.ts b/hooks/useLoader.ts new file mode 100644 index 000000000..3b81beda8 --- /dev/null +++ b/hooks/useLoader.ts @@ -0,0 +1,15 @@ +import React, { useEffect, useState } from "react"; + +const useLoader = () => { + const [loader, setLoader] = useState(true); + + useEffect(() => { + setTimeout(() => { + setLoader(false); + }, 2000); + }); + + return { loader }; +}; + +export default useLoader; diff --git a/layouts/GeneralLayout.tsx b/layouts/GeneralLayout.tsx index b7d809d14..fecf3a66c 100644 --- a/layouts/GeneralLayout.tsx +++ b/layouts/GeneralLayout.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from "react"; -import { Footer } from "../components/Footer/Footer"; -import { SideNavbar } from "../components/SideNavbar"; +import { Footer } from "components/Footer/Footer"; +import { SideNavbar } from "components/SideNavbar"; const GeneralLayout = ({ children }: { children: ReactNode }) => { return ( diff --git a/pages/[subcategory].tsx b/pages/[subcategory].tsx index 81a5b2ffa..d991452bf 100644 --- a/pages/[subcategory].tsx +++ b/pages/[subcategory].tsx @@ -1,12 +1,14 @@ import React from "react"; -import Cards from "../components/cards"; -import { TopBar } from "../components/TopBar/TopBar"; +import Cards from "components/cards"; +import { TopBar } from "components/TopBar/TopBar"; import { useRouter } from "next/router"; import Head from "next/head"; const SubCategory = () => { const router = useRouter(); - const title :any = `LinksHub - ${router.asPath.charAt(1).toUpperCase()}${router.asPath.slice(2)}`; + const title: string = `LinksHub - ${router.asPath + .charAt(1) + .toUpperCase()}${router.asPath.slice(2)}`; return (
diff --git a/pages/_app.tsx b/pages/_app.tsx index f08aab2c9..655c275be 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,33 +1,18 @@ -import "../styles/globals.css"; +import "styles/globals.css"; import type { AppProps } from "next/app"; -import GeneralLayout from "../layouts/GeneralLayout"; -import { GlobalProvider } from "../context/GlobalContext"; -import { useEffect, useState } from "react"; -import { Preloader } from "../components/Loader/Preloader"; +import GeneralLayout from "layouts/GeneralLayout"; +import { GlobalProvider } from "context/GlobalContext"; +import { Preloader } from "components/Loader/Preloader"; import { ThemeProvider } from "next-themes"; export default function App({ Component, pageProps }: AppProps) { - const [loader, setLoader] = useState(true); - - useEffect(() => { - setTimeout(() => { - setLoader(false); - }, 2000); - }); - return ( - {!loader ? ( + - ) : ( - - )} + ); diff --git a/pages/index.tsx b/pages/index.tsx index 33996c008..7404bf68e 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import Head from "next/head"; -import Logo from "../components/logo"; -import { TopBar } from "../components/TopBar/TopBar"; +import Logo from "components/logo"; +import { TopBar } from "components/TopBar/TopBar"; export default function Home() { return ( diff --git a/tsconfig.json b/tsconfig.json index 99710e857..cdde52e43 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,7 +13,8 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "baseUrl": "." }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] diff --git a/types/index.ts b/types/index.ts index 11d682add..19d75abac 100644 --- a/types/index.ts +++ b/types/index.ts @@ -19,7 +19,32 @@ export interface IData { export type Category = "frontend" | "backend" | "youtube" | "resources"; -export type SubCategory = "images" | "icons" | "illustrations" | "colors" | "fonts" | "animations" | "testing" | "themes-templates" | "design-inspiration" | "validation" | "security" | "authentication" | "caching" | "ui-generators" | "validation" | "security" | "authentication" | "caching" | "online-code-editors" | "web-development" | "machine-learning" | "dsa" | "android" | "blogs" | "hosting"; +export type SubCategory = + | "images" + | "icons" + | "illustrations" + | "colors" + | "fonts" + | "animations" + | "testing" + | "themes-templates" + | "design-inspiration" + | "validation" + | "security" + | "authentication" + | "caching" + | "ui-generators" + | "validation" + | "security" + | "authentication" + | "caching" + | "online-code-editors" + | "web-development" + | "machine-learning" + | "dsa" + | "android" + | "blogs" + | "hosting"; export type SubCategories = { name: string; url: string; @@ -30,9 +55,13 @@ export interface ISidebar { subcategory: SubCategories[]; } +export interface SearchbarProps { + setSearch: (search: string) => void; +} + export interface IContext { sidebar: boolean; - openNav?:()=>void; - closeNav?:()=>void; - toggleNav?:()=>void + openNav?: () => void; + closeNav?: () => void; + toggleNav?: () => void; }