Launchpad

---

Welcome to Launchpad, a turbocharged monorepo equipped with a Next.js 14 application, a comprehensive Storybook-hosted component library, and essential configuration packages for ESLint, Tailwind CSS, and TypeScript. Designed to streamline the development of scalable and secure web applications, Launchpad offers a robust suite of tools and a customizable UI component library to enhance your development workflow.

• 🚀 Getting Started
  • Installation
  • Useful Commands
• 📦 Apps & Packages
• 🛠 Tools Powering This Repository
• 🧑‍💻 Setting Up Supabase Locally
  • Prerequisites
  • Installation
  • Configuration
  • Useful Commands
• 🧱 Components
• 📚 Storybook Integration
  • Instant Bundling with Vite
  • Automatic Story Detection
  • Module Path Aliases
  • MDX Support for Documentation
• 🔄 Versioning & Publishing Packages
  • Generating Changesets
  • Triggering a Release
  • Important Notes
• 📚 Further Documentation and Resources

🚀 Getting Started

To get started ensure you have the necessary tools installed -PNPM & Node (v21+)-, and then clone this repository:

Installation

# Clone repo locally
git clone https://github.com/JadRizk/miniature-launchpad.git
cd miniature-launchpad

# Install dependencies
pnpm install

Environment Setup

Before you start the application, you must configure the environment variables for Supabase authentication. Create a .env.local file at the root of your project and include the following:

SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key

For more information on setting up Supabase, visit the Supabase Documentation.

Useful Commands

• pnpm build - Build all packages, including the Storybook site
• pnpm dev - Run all packages locally and preview with Storybook
• pnpm lint - Lint all packages
• pnpm changeset - Generate a changeset
• pnpm clean - Clean up all node_modules and dist folders (runs each package's clean script)

📦 Apps & Packages

Launchpad's Turborepo structure is designed to maximize modularity and efficiency across multiple projects. Each app and package is tailored to specific aspects of development, ensuring a cohesive and scalable ecosystem:

• apps/app: Our main Next.js 14 application, serving as the face of your digital presence. It integrates Supabase for robust authentication and leverages our unified component library to ensure a seamless user experience.
• apps/docs: A dedicated Storybook-powered site for documenting and showcasing UI components. It offers an interactive platform for developers to view and test component designs in isolation.
• packages/ui: The core of our UI development, this package includes reusable React components that ensure consistency and quality across all applications and projects within the repository.
• packages/tailwind-config: Provides a centralized Tailwind CSS configuration to maintain a uniform styling framework throughout all our applications and components.
• packages/typescript-config: Manages shared TypeScript configurations, facilitating consistent coding practices and error-free compilation across the monorepo.
• packages/eslint-config: Delivers a pre-set ESLint configuration designed to enforce stringent code quality and style guidelines for all JavaScript and TypeScript codebases.

🛠 Tools Powering This Repository

Launchpad leverages a suite of top-tier development tools designed to enhance productivity and maintain high standards across the development lifecycle:

• 🏎 Turborepo — A high-performance build system tailored for efficient management of monorepos.
• 🚀 Next.js 14 — A React framework for building user-friendly and scalable web applications.
• 🔐 Supabase Authentication — Provides robust authentication solutions, enabling secure and scalable user management.
• 📖 Storybook — A sandboxed environment for developing and isolating UI components, powered by Vite for near-instant feedback.
• 🔠 TypeScript — Enhances JavaScript with static types to improve predictability and maintainability of code.
• 🌊 Tailwind CSS — A utility-first CSS framework for rapidly building custom designs.
• 🌐 Shadcn — A modern toolchain for front-end development, focusing on performance and developer experience.
• 🔍 ESLint — A linter tool to identify and fix problems in JavaScript and TypeScript code, enforcing code quality standards.
• ✨ Prettier — An opinionated code formatter that ensures consistency in code style.
• 🏷️ Changesets — Manages versioning and changelog generation, streamlining the release process.
• ⚙️ GitHub Actions — Automates workflows for continuous integration and deployment, enhancing development pipelines.

Note: Each package and app is 100% TypeScript. Workspaces enables us to "hoist" dependencies that are shared between packages to the root package.json. This means smaller node_modules folders and a better local dev experience. To install a dependency for the entire monorepo, use the -w workspaces flag with pnpm add.

🧑‍💻 Setting Up Supabase Locally

Setting up Supabase locally can significantly streamline your development workflow. Follow these steps to get started with Supabase CLI for local development:

Prerequisites

Ensure you have Docker installed on your machine, as Supabase relies on Docker containers to run the local development environment.

Installation

1. Install Supabase CLI: First, install the Supabase CLI by running the following command:

# Install Supabase CLI
npm install -g supabase

2. Start Supabase: Navigate to your project's root directory and initialize Supabase:

# Initialize Supabase in your project
supabase init

3. Start the Supabase local development environment: Run the following command to start the local Supabase environment:

# Start Supabase local environment
supabase start

This command will spin up the necessary Docker containers for Supabase, including the database, authentication, and storage services.

Configuration

1. Configure Environment Variables: Update your .env.local file to use the local Supabase instance. Replace your_supabase_url and your_supabase_anon_key with the values provided by the local Supabase environment:

NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_local_anon_key

2. Migrate Database: To apply database migrations, use the following command:

# Apply database migrations
supabase db push

This command ensures your local database schema matches your project requirements.

Useful Commands

• supabase start - Start the local Supabase development environment.
• supabase stop - Stop the local Supabase environment.
• supabase db push - Apply database migrations.
• supabase db reset - Reset the local database to its initial state.

For more detailed information on setting up and using Supabase locally, visit the Supabase CLI Local Development Guide.

🧱 Components

Each file inside of packages/src/components is a component inside our design system. For example:

import * as React from 'react';

export interface ButtonProps {
  children: React.ReactNode;
}

export function Button(props: ButtonProps) {
  return <button>{props.children}</button>;
}

Button.displayName = 'Button';

When adding a new file, ensure the component is also exported from the entry index.tsx file:

export * from './Button';

🔄 Versioning & Publishing Packages

The project uses Changesets for version management, changelog generation, and npm publishing. The workflow is designed to automate and streamline the release process, ensuring reliable and consistent package updates.

🔧 Generating Changesets

When you make changes that should be tracked in the changelog, follow these steps:

1. Start the Changeset: Run the following command in your terminal: pnpm changeset
2. Select Packages: The CLI will prompt you to select the packages affected by your changes. Ensure you create one changeset per repository to keep the changelogs separate.
3. Version Bumps: Decide on the version bump for the selected packages. It's crucial to follow semantic versioning best practices.
4. Summarize Changes: Write a clear summary of what changes have been made; this summary will be included in the changelog.
5. Review and Confirm: Confirm the details of your changeset. A Markdown file will then be created in the changeset folder, listing the packages and summarizing the changes.

📚 Further Documentation and Resources

To help you maximize your use of Launchpad, here are some valuable resources and documentation links:

• Next.js Documentation - Learn about Next.js features and API.
• Supabase Documentation - Comprehensive guides and API references for using Supabase for authentication and database services.
• Storybook Documentation - Explore Storybook to better understand how to build and test UI components in isolation.
• Tailwind CSS Documentation - Get to know how to style your applications efficiently using Tailwind CSS.
• TypeScript Handbook - Deepen your knowledge of TypeScript and how to use it effectively in your projects.
• ESLint User Guide - Configure ESLint to enforce code quality standards in your JavaScript and TypeScript code.
• Prettier Documentation - Learn how to use Prettier for automatic code formatting.
• Turborepo Guide - Understand how to use Turborepo to manage your monorepo efficiently.

These resources provide extensive information and best practices that can boost your development process and enhance your understanding of the technologies integrated into Launchpad.

---