Welcome to the Descope and NextJS App Router Template: Building Blocks Included

This is a sample consumer app built by Descope to showcase the Descope Flows functionality with NextJS. It also includes useful hooks, utilities, and components to get started.

One-click Deploy

You can deploy this template to Vercel with the button below:

Technology Stack and Capabilities

Core Frameworks

• Next.js: A React framework designed for building high-performance applications with an exceptional developer experience.
• Descope: Use no-code workflows to easily add authentication, authorization, and identity management to any customer-facing app.

Deployment Platforms

• Vercel: Provides a seamless way to preview and deploy changes directly from git repositories.

User Interface (UI)

• Tailwind CSS: A utility-first CSS framework that accelerates the process of UI development.
• Radix: Offers foundational components like modals and popovers for enhancing user interfaces.
• Lucide: Offers a collection of simple and precise icons for web projects.
• next/font: Enables custom font optimization, eliminating the need for external network requests, thereby boosting performance.
• ImageResponse: Allows for the dynamic generation of Open Graph images at the edge for improved sharing capabilities.

React Hooks and Utility Functions

• useIntersectionObserver: A React hook to detect when an element becomes visible or hidden in the viewport.
• useLocalStorage: Enables the persistent storage of data within the browser's local storage.
• useScroll: A React hook to monitor scroll events and positions within an application.
• nFormatter: Simplifies the display of numbers by adding suffixes (e.g., 1.2k for 1200).
• capitalize: A utility function to capitalize the first letter of a string for improved readability.
• truncate: Allows for the shortening of strings to a specific length, useful for creating concise text previews.
• use-debounce: Debounces function calls or state updates, helping to optimize performance and reduce unnecessary processing.

Ensuring Code Quality

• TypeScript: A static type-checking tool offering end-to-end type safety for robust development.
• Prettier: An opinionated code formatter that standardizes code style across projects.
• ESLint: A configurable linter tool tailored for Next.js and TypeScript projects, ensuring code quality and consistency.

Set up

In order to launch this app:

1. Clone the repo

git clone git@github.com:descope-sample-apps/nextjs-demo-app-router.git

2. Set up Descope environment variables in .env file

NEXT_PUBLIC_DESCOPE_PROJECT_ID="YOUR PROJECT ID" // Required for Descope authentication

You can get your project-id here.

3. Install dependencies

npm i

4. Start the app

Run this command to start the app:

npm run dev

5. Open the app

Open http://localhost:3000 with your browser to see the result.