Our great sponsors
-
framer-motion : To Add animation in project
-
react-toastify: allows you to add notifications to your app
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
next-google-docs
Next Google Docs is a web app which uses draft.js to create a document for you. It also uses Firebase to store all the documents.
/* File: content/projectData.js */ module.exports = [ { id: 15, name: "Google Docs with Next.js", coverURL: "https://imgur.com/bQkEGlb.png", description: "Next Google Docs is a web app which uses draft.js to create a document for you. It also uses Firebase to store all the user's data.", githubURL: "https://github.com/j471n/next-google-docs", previewURL: "https://google-next-docs.vercel.app/", tools: ["Next.js", "Tailwind CSS", "Firebase", "Draft.js", "Next Auth"], pinned: true, }, /* ..............Other Projects......... */ ];
-
First install next-mdx-remote and highlight.js.
-
j471n.in
This is my portfolio built with Next.js, Tailwind CSS, Sanity, Spotify API, Dev.to API, MDX, Google Analytics and Vercel.
/* Filename : layout/BlogLayout.js */ import { AvatarImage } from "../utils/utils"; // =========> not created import Image from "next/image"; import styles from "../styles/Blog.module.css"; // =========> not created import ShareOnSocialMedia from "../components/ShareOnSocialMedia"; // =========> not created import { FiPrinter } from "react-icons/fi"; import { TbEdit } from "react-icons/tb"; import Newsletter from "../components/Newsletter"; // =========> not created import Link from "next/link"; import useWindowLocation from "@hooks/useWindowLocation"; import ScrollProgressBar from "@components/ScrollProgressBar"; // =========> not created import { stringToSlug } from "@lib/toc"; // =========> not created import { useState, useEffect } from "react"; import { lockScroll, removeScrollLock } from "@utils/functions"; // =========> not created import useWindowSize from "@hooks/useWindowSize"; // =========> not created import { FadeContainer, opacityVariant } from "@content/FramerMotionVariants"; import AnimatedHeading from "@components/FramerMotion/AnimatedHeading"; import AnimatedDiv from "@components/FramerMotion/AnimatedDiv"; import useBookmarkBlogs from "@hooks/useBookmarkBlogs"; import { BsBookmark, BsBookmarkFill } from "react-icons/bs"; import useScrollPercentage from "@hooks/useScrollPercentage"; export default function BlogLayout({ post, children }) { const { currentURL } = useWindowLocation(); const [isTOCActive, setIsTOCActive] = useState(false); const [alreadyBookmarked, setAlreadyBookmarked] = useState(false); const scrollPercentage = useScrollPercentage(); const size = useWindowSize(); const { isAlreadyBookmarked, addToBookmark, removeFromBookmark } = useBookmarkBlogs("blogs", []); useEffect(() => { // In Case user exists from mobile to desktop then remove the scroll lock and TOC active to false if (size.width > 768) { removeScrollLock(); setIsTOCActive(false); } }, [size]); useEffect(() => { setAlreadyBookmarked(isAlreadyBookmarked(post.meta.slug)); }, [isAlreadyBookmarked, post.meta.slug]); return ( {/* TOC */}
95 ? "xl:-left-full" : "xl:left-0" } md:left-0 md:opacity-100 md:max-w-[35%] lg:max-w-[30%] transition-all duration-500 flex flex-col gap-1 !pb-[100px] overflow-y-scroll p-10 md:p-14 h-screen fixed w-full font-barlow bg-darkWhite dark:bg-darkPrimary text-neutral-800 dark:text-gray-200 z-50 `} > Table of Contents AnimatedHeading> {post.tableOfContents.map((content) => { return ( { if (size.width < 768) { lockScroll(); setIsTOCActive(false); } setIsTOCActive(false); removeScrollLock(); }} > {content.heading} a> Link> ); })} AnimatedDiv> div> { setIsTOCActive(!isTOCActive); lockScroll(); }} className="md:hidden w-full py-2 font-medium bg-black dark:bg-white text-white dark:text-black fixed bottom-0 outline-none z-50" > Table of Contents button> {/* Progress Bar */} {/* Blog Front Matter & Author */}{post.meta.title} h1>
{ alreadyBookmarked ? removeFromBookmark(post.meta.slug) : addToBookmark(post.meta); }} > {alreadyBookmarked ? ( ) : ( )} button> div> div> {/* Main Blog Content */} {children} AnimatedDiv> {/* NewsLetter */} {/* Share Blog on Social Media */}Share on Social Media: h3> {/* Print the Blog */}
window.print()} /> div> ShareOnSocialMedia> div> section> section> ); } -
DOMPurify
DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:
You need to install dompurify. DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML and SVG. This is the optional step.
-
First install globby and prettier.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
First install globby and prettier.
-
This step is important as we are using Vercel as a hosting platform and we need to use the Cache-Control. So vercel.json is like the following code:
-
First, we need to install swr. SWR is a strategy to first return the data from the cache (stale), then send the fetch request (revalidate), and finally, come up with up-to-date data.
-
/* File: content/utilitiesData.js */ /* .....Importing Icons..... */ import { SiVisualstudiocode, SiSublimetext, SiMicrosoftedge, SiGooglechrome, SiReact, SiNextdotjs, SiTailwindcss, SiVercel, SiPrettier, SiPnpm, SiYarn, SiFigma, SiInsomnia, SiBitwarden, SiSpotify, SiObsstudio, SiGrammarly, } from "react-icons/si"; import { BsFillPaletteFill, BsFillTerminalFill, BsWindows, BsGithub, } from "react-icons/bs"; import { FaGitAlt, FaSearch } from "react-icons/fa"; import SVG from "@components/SVG"; //==> not created yet const utilities = { title: "Utilities", description: "In case you are wondering What tech I use, Here's the list of what tech I'm currently using for coding on the daily basis. This list is always changing.", lastUpdate: "June 30, 2022", /* System */ system: { title: "System", data: [ { name: "VSCode", description: "Primary Code editor", Icon: SiVisualstudiocode, link: "https://code.visualstudio.com/download", }, { name: "Andromeda", description: "VS Code theme", Icon: BsFillPaletteFill, link: "https://marketplace.visualstudio.com/items?itemName=EliverLara.andromeda", }, /* .............Other........ */ ], }, /* Coding Tools */ tools: { title: "Coding Tools", data: [ { name: "React.js", description: "Primary Front-end library", Icon: SiReact, link: "https://reactjs.org/", }, { name: "Next.js", description: "Primary Web Development Framework", Icon: SiNextdotjs, link: "https://nextjs.org/", }, /* .............Other........ */ ], }, /* Software/Applications */ software: { title: "Software/Applications", data: [ { name: "Microsoft Todo", description: "To manage all my todos", Icon: SVG.MicrosoftToDo, link: "https://todo.microsoft.com/tasks/", }, { name: "Raindrop.io", description: "Bookmark Manager", Icon: SVG.RainDrop, link: "https://raindrop.io/", }, /* .............Other......... */ ], }, }; export default utilities;
-
react-icons: To use icons in the project
-
/* File: content/utilitiesData.js */ /* .....Importing Icons..... */ import { SiVisualstudiocode, SiSublimetext, SiMicrosoftedge, SiGooglechrome, SiReact, SiNextdotjs, SiTailwindcss, SiVercel, SiPrettier, SiPnpm, SiYarn, SiFigma, SiInsomnia, SiBitwarden, SiSpotify, SiObsstudio, SiGrammarly, } from "react-icons/si"; import { BsFillPaletteFill, BsFillTerminalFill, BsWindows, BsGithub, } from "react-icons/bs"; import { FaGitAlt, FaSearch } from "react-icons/fa"; import SVG from "@components/SVG"; //==> not created yet const utilities = { title: "Utilities", description: "In case you are wondering What tech I use, Here's the list of what tech I'm currently using for coding on the daily basis. This list is always changing.", lastUpdate: "June 30, 2022", /* System */ system: { title: "System", data: [ { name: "VSCode", description: "Primary Code editor", Icon: SiVisualstudiocode, link: "https://code.visualstudio.com/download", }, { name: "Andromeda", description: "VS Code theme", Icon: BsFillPaletteFill, link: "https://marketplace.visualstudio.com/items?itemName=EliverLara.andromeda", }, /* .............Other........ */ ], }, /* Coding Tools */ tools: { title: "Coding Tools", data: [ { name: "React.js", description: "Primary Front-end library", Icon: SiReact, link: "https://reactjs.org/", }, { name: "Next.js", description: "Primary Web Development Framework", Icon: SiNextdotjs, link: "https://nextjs.org/", }, /* .............Other........ */ ], }, /* Software/Applications */ software: { title: "Software/Applications", data: [ { name: "Microsoft Todo", description: "To manage all my todos", Icon: SVG.MicrosoftToDo, link: "https://todo.microsoft.com/tasks/", }, { name: "Raindrop.io", description: "Bookmark Manager", Icon: SVG.RainDrop, link: "https://raindrop.io/", }, /* .............Other......... */ ], }, }; export default utilities;
-
Now the blog's part. It could be a little confusing at first. But it will come together in the end. I am using MDX as the content manager. You might be wondering why I am using MDX. It's because of control and customization. It provides you to customize the blog however you want. You can make your own custom component and add them to your blog. We will be creating several custom components. This page will look like this:
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
