Tech stack used for building NoNex

Overview

NoNex uses a modern and efficient tech stack to deliver high-performing, fully responsive websites that integrate seamlessly with Notion. Below is a detailed list of all the technologies used in building NoNex.

Technologies Used

1. Frameworks and Libraries

• vercelNext.js by Vercel - The React Framework
  

  Next.js by Vercel - The React Framework

  Production grade React applications that scale. The world's leading companies use Next.js by Vercel to build static and dynamic websites and web applications.

  vercel

  Core framework for static site generation and server-side rendering. We are using the latest version, Next.js 15.

• reactjsReact
  

  React

  React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.

  reactjs

  Base library for building interactive and dynamic UI components. We are using the latest version, React 19.

• tailwindcssTailwind CSS - Rapidly build modern websites without ever leaving your HTML.
  

  Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

  Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

  tailwindcss

  Utility-first CSS framework for responsive and clean design.

2. Notion Integration

• Start building with the Notion API
  

  Start building with the Notion API

  Connect Notion pages and databases to the tools you use every day, creating powerful workflows.

  https://developers.notion.com/

  @notionhq/client Official Notion API client for fetching and managing content directly from Notion.

3. Rendering and Content Enhancements

• Prism

  Prism

  Prism is used on several websites, small and large. Some of them are:

  https://prismjs.com/

  Syntax highlighting for code blocks.

• KaTeX – The fastest math typesetting library for the web
  

  KaTeX – The fastest math typesetting library for the web

  Simple API, no dependencies – yet super fast on all major browsers.

  https://katex.org/

  Rendering mathematical equations and formulas.

• Mermaid | Diagramming and charting tool

  Mermaid | Diagramming and charting tool

  Create diagrams and visualizations using text and code.

  https://mermaid.js.org/

  Supporting diagrams and flowcharts.

4. Additional Features

• Introduction – react-tweet

  Introduction – react-tweet

  Embed tweets in your React application.

  https://react-tweet.vercel.app/

  Embedding tweets directly into the website.

• React-player

  Enabling video embedding with ease.

• React-gist

  Adding GitHub Gists to your website effortlessly.

5. Development and Performance Tools

• TurboTurbo
  

  Turbo

  Turbo is an incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust.

  Turbo

  We use Vercel's new Turbopack, replacing the old Webpack, for faster development builds and better performance.

• geteslintFind and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter
  

  Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

  A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

  geteslint

  Maintaining code quality and consistency.

• postcssPostCSS - a tool for transforming CSS with JavaScript

  PostCSS - a tool for transforming CSS with JavaScript

  Transform CSS with the power of JavaScript. Auto-prefixing, future CSS syntaxes, modules, linting and more are possible with hundreds of PostCSS plugins.

  postcss

  Extending CSS with plugins for better maintainability.

• Tailwind Merge

  Resolving utility class conflicts efficiently.

• slugify

  Converting text into URL-friendly slugs.

• sharp

  High-performance image processing for optimizing images.

• emoji-regex

  A regular expression library for detecting and working with emojis.

• next-themes

  Enabling theme switching in Next.js applications.

• Prettier

  Code formatting tool to maintain a consistent code style.

  • Prettier Organize Imports – Automatically sorts and optimizes import statements.
  • Prettier Plugin Tailwind CSS – Ensures Tailwind CSS classes are ordered correctly for better readability.

We constantly update NoNex to ensure it stays modern, efficient, and never gets outdated.