/app-template-remix-vite

Remix with Vite.

Primary LanguageTypeScript

Intuition App Template - Remix-Vite

Welcome to the Intuition App Template for Remix with a Vite development environment, designed to streamline your development process for building innovative, decentralized applications. This template provides out-of-the-box authentication, on-chain interactions, and efficient styling.

The integration of Vite with Remix in the Intuition App Template enhances the development experience by offering rapid hot module replacement (HMR), a streamlined plugin system for easy extensibility, and improved support for modern web technologies. This combination significantly accelerates development cycles, simplifies the integration of tools like Tailwind CSS, and optimizes the overall developer experience with faster feedback loops and build processes. Remix currently supports Vite as an alternative compiler. In the future, Vite will become the default compiler for Remix.

Learn more about our starter templates in the Intuition Documentation. Learn more about Remix-Vite in the Remix Documentation.

Getting Started

Prerequisites:

Node.js: Before anything else, Remix.run requires that you have either a Active or Maintenance version of Node.js installed. Remix Documentation

Optimism Sepolia: Intuition is currently deployed on Optimism Sepolia Testnet. To interact with the Intuition API, you'll need to connect to the Optimism Sepolia Testnet.

Network Configuration:

Parameter Value
Network Name OP Sepolia
RPC URL https://sepolia.optimism.io
Chain ID 11155420
Currency Symbol ETH
Block Explorer URL (Optional) https://sepolia-optimistic.etherscan.io

Setup Steps

  1. Clone the Repository:

    git clone git@github.com:0xIntuition/app-template-remix.git

  2. Install Dependencies:

    npm install
# or
yarn install
# or
pnpm install

  3. Environment Setup:

    Copy .env.example to .env and configure as follows:

    • ALCHEMY_API_KEY: Alchemy Optimism Sepolia Testnet API key. Tutorial.
    • ALCHEMY_RPC_URL: Alchemy RPC URL for the Optimism Sepolia Testnet.
    • WALLETCONNECT_PROJECT_ID: For wallet connections via WalletConnect. Tutorial.
    • SESSION_SECRET: Required for remix-auth. Generate with openssl rand -base64 32.
    • API_URL: Intuition alpha API url.
    • API_KEY: Intuition Beta API key. Tutorial.

  4. Run the Development Server:

npm run dev
# or
yarn dev
# or
pnpm dev

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

You can start editing the page by modifying app+/_index.tsx. The page auto-updates as you edit the file.

Shadcn

Shadcn provides beautifully designed components that you can copy and paste into your apps and enables you to bootstrap them via cli (Shadcn Documentation). It 5x's your productivity and allows you to focus on what matters most, your business logic + features. Even better, we have set up the config for you so you can use it out of the box 🤝.

Example Usage:

npx shadcn-ui@latest add form

Learn More

Helpful References