Giter VIP home page Giter VIP logo

starknet-dapp-template's Introduction

Starknet Dapp Template with Next.js 14+, Tailwind CSS 3, TypeScript, DaisyUI, and Starknet-React

starknet banner

๐Ÿš€ This is a Starknet Dapp template built with Next.js, Tailwind CSS, TypeScript, and DaisyUI. Our template focuses on providing an excellent developer experience, integrating the latest technologies and tools, including crucial Starknet-related libraries (@starknet-react/chains, @starknet-react/core, starknet, get-starknet-core). It empowers developers to swiftly construct powerful Starknet Dapps.

How to use Starknet Dapp Template

Getting Started

You can directly use this template on GitHub by clicking the "Use this template" button.

Clone this template and kickstart your Starknet Dapp development:

git clone https://github.com/CerberusChaos/Starknet-Dapp-Template.git your-project-name
cd your-project-name
npm install
npm run dev

Visit http://localhost:3000 to embark on your development journey.

Features

  • ๐Ÿ”ฅ Powered by the latest Next.js for static site generation
  • ๐ŸŽจ Selective use of Tailwind CSS and DaisyUI for flexible UI design
  • ๐Ÿ’… Optimized style processing: PostCSS, integrated with styled-jsx
  • ๐Ÿš€ Enhanced development experience: Integration with Starknet-React for rapid integration of Starknet features
  • ๐ŸŽ‰ Type checking with TypeScript
  • โœ… Strict mode for TypeScript and React 18
  • โœ๏ธ Code linting and formatting: ESLint and Prettier
  • ๐ŸฆŠ Git workflow enhancements: Husky and Lint-staged
  • ๐Ÿ—‚ Comprehensive development tooling: VSCode, Netlify, PostCSS, ESLint, Prettier, TypeScript
  • โš™๏ธ Build optimization: Bundler Analyzer
  • ๐Ÿ–ฑ๏ธ Easy deployment: Supports one-click deployment to Vercel and Netlify

Core Advantages

  • โ˜• Automatic minification of HTML & CSS for improved performance
  • ๐Ÿ’จ Rapid live reload for increased development efficiency
  • โœ… Intelligent cache management for content freshness
  • ๐ŸŒ Built-in Starknet-React for simplified Dapp development

Development Philosophy

  • Minimalistic code design, focusing on Dapp business logic
  • Optimized SEO performance for increased discoverability
  • ๐Ÿš€ Production-ready environment, ensuring reliability and efficiency

Components

Our template includes the following components for your convenience:

  • WalletConnect
  • Navbar
  • Banner
  • Footer
  • Meta
  • More components available in our Components.

Requirements

  • Node.js and npm

Customization and Configuration

Easily customize based on your requirements:

  • src/styles/global.css: Your Tailwind CSS customized CSS file
  • utils/AppConfig.ts: Template configuration file
  • src/pages/index.tsx: Customize the homepage using the Base component
  • src/template/Base.tsx and src/templates/*: Component and template layers
  • src/*: Atomic components supporting component blocks

Deployment

One-click production-ready build:

npm run build
npm run start

Directory Structure

.
โ”œโ”€โ”€ README.md            # README file, contains the project description and usage guidelines.
โ”œโ”€โ”€ next.config.js       # Next.js configuration file
โ”œโ”€โ”€ public               # Public folder for static files.
โ”‚   โ””โ”€โ”€ assets
โ”‚       โ””โ”€โ”€ images       # Image files
โ”œโ”€โ”€ src
โ”‚   โ”œโ”€โ”€ connectors       # Connectors, used to connect to external services or APIs
โ”‚   โ”œโ”€โ”€ layout           # Layout component, builds the basic layout of the page
โ”‚   โ”œโ”€โ”€ utils            # Utilities folder, contains helper functions and tools
โ”‚   โ”œโ”€โ”€ styles           # PostCSS styles folder, using Tailwind CSS
โ”‚   โ”œโ”€โ”€ components       # Components folder, contains reusable UI components.
โ”‚   โ”œโ”€โ”€ templates        # Templates folder, holding page and layout templates
โ”‚   โ””โ”€โ”€ pages            # Pages folder for Next.js, holds the application's pages
โ”œโ”€โ”€ tailwind.config.js   # The Tailwind CSS configuration file
โ””โ”€โ”€ tsconfig.json        # TypeScript configuration file

Open Source Contributions

We welcome and encourage community contributions to this project. If you encounter issues or have good suggestions, feel free to open an issue.

๐ŸŒŸ Created a StarkNet project using our template? We're excited to share your work with the global StarkNet community! Simply email us your project name and GitHub link, and we'll feature your project in our README and on Discord. This is a great opportunity to increase your project's visibility and join our vibrant StarkNet community!

starknet-dapp-template's People

Contributors

nlyrthiia avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.