Giter Site home page Giter Site logo

blip-lens's Introduction

๐Ÿ›ซ Web3 Hackathon Starter

The Web3 Hackathon Starter Kit, or w3-starter, is a web3 dApp template designed to simplify the process of building hackathon projects. By eliminating unnecessary boilerplate code, this opinionated template allows you to focus on the core functionality of your project. This is my go to template for hackathons and I hope you find it useful as well.


๐Ÿงฐ Tech Stack

  1. Create T3 App: The Web3 Hackathon Starter Kit is bootstrapped with Create T3 App, which ensures type safety throughout the project. It also includes additional packages like @t3-oss/env-nextjs for easy management of environment variables.
  2. Tailwind CSS: This template uses Tailwind CSS as a lightweight CSS framework, for efficient styling.
  3. thirdweb: This Starter Kit uses thirdweb as a web3 infrastructure for seamless interaction with smart contracts and the blockchain.
  4. next-themes: To enable theme switching between dark and light themes, the template uses next-themes as a theme provider.
  5. zod: For form validation, a lightweight library that provides type validation for forms.
  6. zustand: To manage the application's state, this template uses zustand, a minimalistic state management library for React.
  7. Ant Design: The Web3 Hackathon Starter Kit integrates ant design, a comprehensive UI component library, to facilitate the development of a visually appealing user interface.
  8. react-icons: This template includes react-icons, a popular library that provides a wide range of icons for use in your project.
  9. react-hot-toast: For displaying toast notification messages, this Starter Kit uses react-hot-toast, a lightweight and customizable toast library.
  10. next-seo: To optimize your project for search engines, this template utilizes next-seo as an SEO provider.

๐Ÿš€ Getting Started

To get started with the Web3 Hackathon Starter Kit, follow these simple steps:

  1. Clone the Repository: Begin by cloning the w3-starter repository to your local machine using the following command:

    git clone https://github.com/Envoy-VC/web3-hackathon-starter.git

    or click on the use as template button to create a new repository from this template.

  2. Install Dependencies: Navigate to the cloned repository and install the required dependencies by running the following command:

    npm install
  3. Create a .env.local file: Create a .env file in the root directory of your project and add the following environment variables:

    NEXT_PUBLIC_TW_CLIENT_ID='YOUR_CLIENT_ID'
    NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID='YOUR_PROJECT_ID'

    You can obtain your API key from thirdweb. To obtain your project ID, you will need to create a project on Wallet Connect.

  4. Run the Project: Once you have installed the dependencies and added the required environment variables, you are ready to run the project. To start the development server, run the following command:

     npm run dev

Customize Your Project: Open the project in your preferred code editor and customize it according to your hackathon project requirements. Feel free to modify the existing files or add new ones as needed.


Contributing ๐Ÿค

Contributions are welcomed. If you encounter any issues or have suggestions for improvements, please submit them via GitHub issues. Additionally, feel free to fork the repository and submit pull requests with your enhancements.


License

The Web3 Hackathon Starter Kit is open source software licensed under the MIT License. Please see the LICENSE


blip-lens's People

Contributors

envoy-vc avatar

Watchers

 avatar  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.