<a href="https://missio.ai">
<h1 align="center">Missio</h1>
</a>

<p align="center">
Building blocks for your Next project
</p>

*Based on github template [Precedent](https://github.com/steven-tey/precedent)*

## Introduction

Missio and is an opinionated collection of components, hooks, and utilities for your Next.js project.

## Tech Stack + Features

### Frameworks

- Framework
- [Next.js](https://nextjs.org/) – React framework for building performant apps with the best developer experience
- Auth
- [Auth.js](https://authjs.dev/) – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
or
- [Supabase](https://supabase.com/) - Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
- Database
- [Prisma](https://www.prisma.io/) – Typescript-first ORM for Node.js
or/and
- [Supabase](https://supabase.com/) - Building Backend Database

- [tRPC](https://trpc.io/) - typesafe APIs that leverages the full power of modern TypeScript.

### Platforms

*Open for other options*

- [Vercel](https://vercel.com/) – Easily preview & deploy changes with git

### UI

- [Tailwind CSS](https://tailwindcss.com/) – Utility-first CSS framework for rapid UI development
- [Radix](https://www.radix-ui.com/) – Primitives like modal, popover, etc. to build a stellar user experience
- [Chakra UI](https://chakra-ui.com/) - React UI component Library
- [Framer Motion](https://framer.com/motion) – Motion library for React to animate components with ease
- [Lucide](https://lucide.dev/) – Beautifully simple, pixel-perfect icons
- [`@next/font`](https://nextjs.org/docs/basic-features/font-optimization) – Optimize custom fonts and remove external network requests for improved performance
- [`@vercel/og`](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation) – Generate dynamic Open Graph images on the edge
- [`react-wrap-balancer`](https://github.com/shuding/react-wrap-balancer) – Simple React component that makes titles more readable
- [Typebox](https://github.com/baptisteArno/typebot.io) - Typebot allows you to create conversational apps/forms

*Not exhaustive list*

### Hooks and Utilities

*Not Neccessary*

- `useIntersectionObserver` – React hook to observe when an element enters or leaves the viewport
- `useLocalStorage` – Persist data in the browser's local storage
- `useScroll` – React hook to observe scroll position ([example](https://github.com/steven-tey/precedent/blob/main/components/layout/index.tsx#L25))
- `nFormatter` – Format numbers with suffixes like `1.2k` or `1.2M`
- `capitalize` – Capitalize the first letter of a string
- `truncate` – Truncate a string to a specified length
- [`use-debounce`](https://www.npmjs.com/package/use-debounce) – Debounce a function call / state update

### Code Quality

- [TypeScript](https://www.typescriptlang.org/) – Static type checker for end-to-end typesafety
- [Prettier](https://prettier.io/) – Opinionated code formatter for consistent code style
- [ESLint](https://eslint.org/) – Pluggable linter for Next.js and TypeScript

### Miscellaneous

- [Vercel Analytics](https://vercel.com/analytics) – Track unique visitors, pageviews, and more in a privacy-friendly way

## Features

Linear.app redirect