⚡ Builder's League: Edition 1 ⚡

Reconciliation Road Challenge

Features · Clone and run locally · Documentation · Feedback and issues

Features

• ⚡️ Next.js 14 (App Router)
• 💚 Supabase w/ supabase-ssr - Works across the entire Next.js stack (App Router, Pages Router, Client, Server, Middleware, It just works!)
• ⚛️ React 18
• ⛑ TypeScript
• 📦 npm - package manager
• 🎨 Tailwind
• 🔌 shadcn/ui - Beautifully designed components that you can copy and paste into your apps.
• 🧪 Jest w/SWC + React Testing Library - Unit tests for all of your code.
• 🎛️ MSWv2 - Intercept requests inside your tests (set up for testing only)
• 🪝TanStackQueryv5 - The best way to fetch data on the client
• 📏 ESLint — To find and fix problems in your code
• 💖 Prettier — Code Formatter for consistent style
• 🐶 Husky — For running scripts before committing
• 🚫 lint-staged — Run ESLint and Prettier against staged Git files
• 👷 Github Actions — Run Type Checks, Tests, and Linters on Pull Requests
• 🗂 Path Mapping — Import components or images using the @ prefix
• ⚪⚫ Dark mode - Toggle theme modes with next-themes
• ✨ Next Top Loader - Render a pleasent top loader on navigation with nextjs-toploader
• 🔋 Lots Extras - Next Bundle Analyzer, Vercel Analytics, Vercel Geist Font

Clone and run locally

1. You'll first need a Supabase project which can be made via the Supabase dashboard

2. Rename .env.local.example to .env.local and update the following:

   NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
   NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
   

   Both NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY can be found in your Supabase project's API settings

3. You can now run the Next.js local development server:

   npm run dev

   The starter kit should now be running on localhost:3000.

Check out the docs for Local Development to also run Supabase locally.

Documentation

Requirements

• Node.js >= 18.17.0

Scripts

• npm run dev — Starts the application in development mode at http://localhost:3000.
• npm run build — Creates an optimized production build of your application.
• npm run start — Starts the application in production mode.
• npm run type-check — Validate code using TypeScript compiler.
• npm run lint — Runs ESLint for all files in the src directory.
• npm run format-check — Runs Prettier and checks if any files have formatting issues.
• npm run format — Runs Prettier and formats files.
• npm run test — Runs all the jest tests in the project.
• npm run test:ci — Runs all the jest tests in the project, Jest will assume it is running in a CI environment.
• npm run analyze — Builds the project and opens the bundle analyzer.

Paths

TypeScript is pre-configured with custom path mappings. To import components or files, use the @ prefix.

import { Button } from '@/components/ui/Button'

// To import images or other files from the public folder
import avatar from '@/public/avatar.png'

License

This project is licensed under the MIT License - see the LICENSE.md file for more information.

Feedback and issues

Please file feedback and issues here.