# Quickstart: App Template

The NibiJS App Template is designed to jumpstart your frontend development with NibiJS. This template is built using Next.js, React, Cosmos-kit, and Tailwind CSS, providing a robust foundation to accelerate your development process.

# Table of Contents

Usage Instructions
- Install Node Version Manager (nvm)
- Run the application locally
Dependencies
Source (src) Directory Structure
Deployments
Related Pages

# Usage Instructions

# Install Node Version Manager (`nvm`)

To install or update nvm, run the install script using the following command:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

For more information, see github.com/nvm-sh/nvm (opens new window).

# Run the application locally

Move to the repo's node version as defined by the .nvmrc:
Copy nvm use
Install yarn and download package dependencies (can take ≈3 minutes):
Copy npm install -g yarn yarn # or: npm install
Run the application with:
Copy npm run dev # defaults to http://localhost:3000 # or yarn dev # or pnpm dev # or bun dev
This will automatically open an interactive development environment with hot reloading, enabling you to edit files and see changes reflected in the running application.

Open http://localhost:3000 (opens new window) with your browser to see the result.

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

# Dependencies

# Source (src) Directory Structure

components: Contains all reusable components.
pages: A directory containing the page-level components. Each subdirectory of pages corresponds to a page in the application.
layouts: For layout-based components like sidebars, navbars, containers, page headers, and page footers.
hooks: For custom hooks.
context: Contains logic related to the global Redux store.
config: For custom types re-used in multiple places. A subdirectory or file named "types" exports local to a specific directory.
style: For utility functions that didn't fit into other categories.