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

• vocalizer

  1 286 10.0 HTML

  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

  4 35 1.7 JavaScript

  Wrapper for CountAPI using promises.

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

• Appwrite

  appwrite.io

  sponsored

  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

  5 2,484 0.0 JavaScript

  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: https://github.com/jonschlinkert

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

• react-markdown

  16 8,734 7.4 JavaScript

  Markdown component for React

  

  react-markdown: Markdown component for React using remark.

• TypeScript

  545 80,653 9.9 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

  7 2,653 5.1 JavaScript

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

  

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

• Next.js

  828 86,495 10.0 JavaScript

  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

  scoutapm.com

  sponsored

  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

  67 28,144 9.7 TypeScript

  📋 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

• leerob.io

  27 3,573 8.7 TypeScript

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

• chakra-ui

  150 25,822 9.9 TypeScript

  ⚡️ 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.

Suggest a related project