How I built my portfolio using NextJS, Typescript, and Chakra UI

This page summarizes the projects mentioned and recommended in the original post on

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Scout APM - Less time debugging, more time building
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • vocalizer

    A simple javascript plugin to show people how to say your name correctly.

    For this sound i just used Vocalizer and downloaded my name's sound. Added it to webpack config to identify the file extension and location next.config.js

  • countapi-js

    Wrapper for CountAPI using promises.

    To achieve this, I use Google Analytics and countapi-js.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • gray-matter

    Smarter YAML front matter parser, used by metalsmith, Gatsby, Netlify, Assemble, mapbox-gl, phenomic, vuejs vitepress, TinaCMS, Shopify Polaris, Ant Design, Astro, hashicorp, garden, slidev, saber, sourcegraph, and many others. Simple to use, and battle tested. Parses YAML by default but can also parse JSON Front Matter, Coffee Front Matter, TOML Front Matter, and has support for custom parsers. Please follow gray-matter's author:

    gray-matter: Converts a string with front-matter to object.

  • react-markdown

    Markdown component for React

    react-markdown: Markdown component for React using remark.

  • TypeScript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    If you're building your projects with javascript, then you have to try typescript, Typescript will definitely help you documenting your code as you go, Also it forces you to use the right type so this will decrease the bugs and speed up your productivity while you're coding.

  • react-syntax-highlighter

    syntax highlighting component for react with prismjs or highlightjs ast using inline styles

    react-syntax-highlighter: Syntax highlighting component for React.

  • Next.js

    The React Framework

    NextJS is one of the strongest framework to build a production project. I've used some features like SSG or pre-render pages at build time, API routes, file-system routing, fast refresh, configuration and deployments are super easy.

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • react-hook-form

    📋 React Hooks for form state management and validation (Web + React Native)

    I used react-hook-form to create the form, Also created an api to handle the request


    ✨ My portfolio built with Next.js, Tailwind, Prisma, and Vercel.

  • chakra-ui

    ⚡️ Simple, Modular & Accessible UI Components for your React Applications

    Here's the styling part, I use chakra-ui for creating reactjs components and styles without writing css. Also Chakra ui is handling the app color mode, and much more in the styling part. You can customize the theme, declaring the default values for the app you can check this folder for further information about this styles/theme.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts