timtbdev / sign-dictionary

Sign language dictionary app build with Next.js 13 and Supabase. https://signapp.net

Mongolian Sign Language Dictionary

Start learning today - Demo

Introduction

An open source sign language dictionary app build with Next.js 13 and Supabase, TailwindCSS, Shadcn-UI.

Demo

demo.mp4

Google Lighthouse performance statistics

Tech Stack

Frameworks

• Next.js – React framework for building performant apps with the best developer experience
• Supabase Auth – User Management system that works without any additional tools

Platforms

• Vercel – Easily preview & deploy changes with git
• Supabase Database – Dedicated PostgreSQL database

UI

• Tailwind CSS – Utility-first CSS framework for rapid UI development
• Tailwind UI – Beautifully designed, expertly crafted components
• Shadcn UI – Beautifully designed components
• Headless UI - Completely unstyled, fully accessible UI components
• Framer Motion – Motion library for React to animate components with ease
• Lucide – Beautifully simple, pixel-perfect icons
• Heroicons - Beautiful hand-crafted SVG icons
• react-hot-toast - React Notifications
• Middleware - Run code before a request is completed
• Dynamic Routes - Create routes from dynamic data
• MetaData - Improved SEO and web shareability
• generateMetadata - Dynamic metadata
• Image Optimization - Automatically serve correctly sized images for each device
• next/font – Optimize custom fonts and remove external network requests for improved performance
• ImageResponse – Generate dynamic Open Graph images at the edge
• react-wrap-balancer – Simple React component that makes titles more readable

Utilities

• React Hook Form –  Performant, flexible and extensible forms with easy-to-use validation.
• Zod - TypeScript-first schema validation with static type inference

Code Quality

• TypeScript – Static type checker for end-to-end typesafety
• Prettier – Opinionated code formatter for consistent code style
• ESLint – Pluggable linter for Next.js and TypeScript

Miscellaneous

• Vercel Analytics – Track unique visitors, pageviews, and more in a privacy-friendly way

Credits

• Shadcn Taxonomy – An open source application built using everything new in Next.js 13
• Shadcn UI - Accessible and customizable components
• Precedent - Building blocks for Next.js project
• Supabase Auth - Blog post: Authentication in Next.js with Supabase and Next 13

Running Locally

1. Install dependencies using pnpm:

pnpm install

2. Copy .env.example to .env.local and update the variables.

cp .env.example .env.local

3. Start the development server:

pnpm dev

Author

• Tim (@timtbdev)