Knight's Den - HackNight Resources Hub

The Ultimate Hub
for Developers

Discover top-tier resources, UI kits, and tools to elevate your development journey at Hacknight'25.

✔ NEXT.JS DETECTED. ENGAGING HACKER MODE 🦇.
✔ Tailwind? CHECK. Your CSS is now legally OP.
✔ Import alias secured. No more spaghetti code.
✔ Writing components.json... Your components are cooking 🍳🔥.
✔ Checking registry... HACKER DETECTED. Wait, that's you 👀.
✔ config.ts upgraded. Your UI is now 300% more drippy 💧.
✔ app/globals.css updated. Theme looking illegal 🔥.
✔ Dependencies installed. Your project just leveled up ⚡.
✔ Your project just leveled up ⚡.
ℹ Updated 1 file:- lib/utils.ts (new skill unlocked 🧠💥).

Getting Started with Hackathon - Beginner's Guide

Kickstart your hackathon journey with beginner-friendly resources that will help you in

Frontend Development.

At Hacknight'25, we believe in your potential to create something amazing. These resources will help you build a strong foundation and boost your confidence for your first hackathon.

W3Schools

Beginner-friendly tutorials and interactive examples for learning web development concepts.

W3Schools

HTML CSS Crash Course

A video tutorial that will help you get started with HTML and CSS for building web pages.

HTML CSS Crash Course

HTML CSS Crash Course

JavaScript Crash Course

A video tutorial that will help you get started with HTML and CSS for building web pages.

JavaScript Crash Course

JavaScript Crash Course

TailwindCSS Crash Course

A video tutorial that will help you get started with TailwindCSS, a utility-first CSS framework.

TailwindCSS Crash Course

TailwindCSS Crash Course

ReactJS Crash Course

A video tutorial that will help you get started with ReactJS for building user interfaces.

ReactJS Crash Course

ReactJS Crash Course

NextJS Crash Course

A video tutorial that will help you get started with NextJS, a React framework for building full-stack web applications.

NextJS Crash Course

NextJS Crash Course

Flask Crash Course

A video tutorial that will help you get started with Flask, a popular Python web framework.

Flask Crash Course

Flask Crash Course

Django Crash Course

A video tutorial that will help you get started with Django, a high-level Python web framework.

Django Crash Course

Blogs on Flask and Django

A collection of blogs and articles on Flask and Django for beginners to learn web development.

Blogs on Flask and Django

Blogs on Flask and Django

SmolJames

Full Stack Roadmap

A visual roadmap with video resources that outlines the key concepts and technologies to learn for Full Stack development.

SmolJames

Full Stack Open

Full Stack Course

The University of Helsinki offers a comprehensive course on modern JavaScript-based web development, covering React, Redux, Node.js, MongoDB, GraphQL, and TypeScript.

Full Stack Open

Full Stack Open

NodeJS Crash Course

A video tutorial that will help you get started with NodeJS for building server-side applications.

NodeJS Crash Course

NodeJS Crash Course

API Crash Course

A video tutorial that will help you get started with APIs for building web and mobile applications.

API Crash Course

API Crash Course

Postman Crash Course

A video tutorial that will help you get started with Postman, a popular API development tool.

Postman Crash Course

Postman Crash Course

MongoDB Crash Course

A video tutorial that will help you get started with MongoDB, a popular NoSQL database for web and mobile applications.

MongoDB Crash Course

MongoDB Crash Course

PostgreSQL Crash Course

A video tutorial that will help you get started with PostgreSQL, a popular SQL database for web and mobile applications.

PostgreSQL Crash Course

PostgreSQL Crash Course

Clerk Crash Course

A video tutorial that will help you get started with Clerk, a popular authentication service for web and mobile applications.

Clerk Crash Course

Clerk Crash Course

Appwrite Crash Course

A video tutorial that will help you get started with Appwrite, an open-source backend server for web and mobile developers.

Appwrite Crash Course

Supabase Crash Course

A video tutorial that will help you get started with Supabase, an open-source Firebase alternative.

Supabase Crash Course

Firebase Crash Course

A video tutorial that will help you get started with Firebase, a popular backend service for web and mobile applications.

Firebase Crash Course

Firebase Crash Course

UI Crash Course

A video tutorial that will help you get started with UI/UX design for creating user-friendly interfaces.

UI Crash Course

UI Crash Course

UX Crash Course

A video tutorial that will help you get started with UI/UX design for creating user-friendly interfaces.

UX Crash Course

UX Crash Course

Figma Crash Course

A video tutorial that will help you get started with Figma, a popular design tool for creating user interfaces(UI).

Figma Crash Course

Figma Crash Course

Wireframing Course

A video tutorial that will help you get started with wireframing for designing user interfaces(UI).

Wireframing Course

Wireframing Course

UI UX Case Study

A Figma file that contains a sample UI/UX case study template for designers to use and customize.

UI UX Case Study

UI UX Case Study

Solidity Crash Course

A video tutorial that will help you get started with Solidity, the programming language for Ethereum smart contracts.

Solidity Crash Course

Solidity Crash Course

Hardhat Crash Course

A video tutorial that will help you get started with Hardhat, a popular Ethereum development environment.

Hardhat Crash Course

Hardhat Crash Course

Solidity Smart Contract Development

This course will give you a full introduction of blockchain, smart contracts, Solidity and more. ~Patrick Collins

Solidity Smart Contract Development

Solidity Smart Contract Development

Solana Smart Contract Development

This bootcamp is a full introduction to blockchain, smart contracts, and full stack web3 development on Solana.

Solana Smart Contract Development

Solana Smart Contract Development

IPFS Crash Course

A video tutorial that will help you get started with IPFS, a peer-to-peer hypermedia protocol.

IPFS Crash Course

IPFS Crash Course

UI UX Design Essentials

Design plays a crucial role in creating intuitive, visually appealing user interfaces. Explore resources to enhance your design skills, including UI/UX principles, tools for prototyping, wireframing, and libraries that help implement clean, responsive designs. These resources will guide you in crafting user-centric experiences for your web projects.

Godly

A web design inspiration site that's focused on sites that just look good and have a good UI & UX instead of collecting the most out there canvas animation.

Godly

Landbook

A gallery featuring the best landing page design inspiration, freebies, and resources.

Landbook

Rebrand

An online platform that curates and showcases a collection of high-quality rebranding projects from different companies, essentially providing a space for designers and creatives.

Rebrand

Landingfolio

Landingfolio features the best landing page designs, templates, component and more on the web.

Landingfolio

Figma

A collaborative interface design tool for creating wireframes, prototypes, and UI designs.

Figma

Spline

A 3D design tool for creating 3D web experiences without code.

Spline

Framer

A powerful design and prototyping tool for creating interactive, animated UI experiences.

Framer

Webflow

A powerful design and prototyping tool for creating interactive, animated UI experiences.

Webflow

TailSpark

TailSpark is a collection of Tailwind CSS components and templates that help you build beautiful websites faster.

TailSpark

PageDone

Lightning fast modern designs for your next project

PageDone

Typography

A resource for high-quality fonts and typography best practices.

Typography

Colors UI

A collection of beautiful color palettes for UI design inspiration.

Colors UI

Coolors

A fast and easy color scheme generator for designers.

Coolors

Khroma

An AI-powered tool that helps designers discover personalized color combinations.

Khroma

Realtime Colors

A tool to experiment with real-time color combinations and accessibility checks.

Realtime Colors

Realtime Colors

Laws of UX

A collection of psychological principles that help designers create better user experiences.

Laws of UX

Mockups by Previwed

A collection of free mockups for showcasing your designs in realistic settings.

Mockups by Previwed

Mockups by Previwed

Manifest

Manifest is a grid-based pinboard for note taking.

Manifest

Web3/Blockchain Essentials

Dive into the world of decentralized web development with Web3 resources. Explore tools and frameworks for building decentralized applications (dApps), working with blockchain technologies, smart contracts, and integrating cryptocurrency functionalities. These resources will help you create secure, scalable, and innovative Web3 solutions.

Solidity

A statically typed programming language for writing smart contracts on the Ethereum blockchain.

Solidity

Hardhat

A popular Ethereum development framework to help you compile, deploy, test, and debug your Ethereum software.

Hardhat

Remix

An open-source Ethereum IDE for writing, testing, and deploying smart contracts directly from the browser.

Remix

Ethereum

The foundational platform for building decentralized applications using blockchain technology and smart contracts.

Ethereum

Polygon

A Layer-2 scaling solution for Ethereum, enabling faster and cheaper transactions for decentralized applications.

Polygon

Aptos

A highly scalable and secure blockchain network designed for building decentralized applications.

Aptos

Faucets

Free testnet faucets you can trust. The definitive crypto faucet list for builders.

Faucets

Moralis

Moralis provides Web3 APIs and RPC nodes, giving you all the crypto data you need in one place.

Moralis

NFT.Storage

Free decentralized storage and bandwidth for NFTs on IPFS and Filecoin

NFT.Storage

IPFS

IPFS is an open system to manage data without a central server

IPFS

Chainlink

Chainlink is a decentralized oracle network that enables smart contracts to securely interact with real-world data.

Chainlink

Huddle01

Huddle01 is a decentralized Audio Video Connectivity Platform

Huddle01

WebDev Frameworks

Web development frameworks provide structured tools and features to streamline the creation of dynamic and efficient applications.Explore a collection of powerful frameworks like React, Next.js, Vue, Svelte, Angular, and more, designed to simplify development, enhance performance, and maintain scalability. Whether you're exploring

JavaScript

these tools will guide you in creating efficient and visually stunning web experiences.

UI Libraries and Components

UI libraries provide pre-built components that simplify the creation of interactive and visually appealing web interfaces. Explore a collection of powerful libraries that offer ready-to-use buttons, forms, navigation bars, and more, helping you speed up development and maintain consistent design across your projects.

Tailwind CSS

A utility-first CSS framework that helps you build modern and responsive designs quickly.

Tailwind CSS

Bootstrap

A popular CSS framework that provides responsive, prebuilt components for rapid web development.

Bootstrap

Flowbite

Flowbite is an ecosystem built on top of Tailwind CSS including a component library, block sections, a Figma design system and other resources.

Flowbite

Mamba UI

A collection of beautifully designed UI components built with Tailwind CSS, perfect for beginners.

Mamba UI

Preline

Preline UI is an open-source Tailwind CSS components library for any needs. Comes with UI examples & blocks, templates, plugins, Figma design system and more.

Preline

TailSpark

TailSpark is a collection of Tailwind CSS components and templates that help you build beautiful websites faster.

TailSpark

ShadCN

A beautifully designed, accessible, and customizable UI component library for React.

ShadCN

ShadCN UI blocks

Beautifully crafted Shadcn UI blocks, ready for your next project.

ShadCN UI blocks

ShadCN UI blocks

Radix UI

An open source component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required.

Radix UI

Daisy UI

An extension for Tailwind CSS that provides customizable and elegant components.

Daisy UI

AceternityUI

A modern UI library with beautiful animations and pre-built components.

AceternityUI

HeroUI

A UI component library with a focus on accessibility and clean design.

HeroUI

IBleck UI

A collection of interactive and visually appealing UI components.

IBleck UI

Material UI

A popular React UI framework following Google’s Material Design principles.

Material UI

Chakra UI

A modern React component library with flexible theming and accessibility features.

Chakra UI

Origin UI

A powerful UI library designed for performance and seamless integration.

Origin UI

Float UI

A collection of modern and responsive UI components for React applications.

Float UI

Kokonut UI

A UI library that combines simplicity and elegance for a delightful user experience.

Kokonut UI

PageDone

Lightning fast modern designs for your next project

PageDone

Base UI

Unstyled UI components for building accessible web apps and design systems. From the creators of Radix, Floating UI, and Material UI

Base UI

Mantine

A modern React component library with rich features, accessibility, and customization.

Mantine

PlateJS

Plate is a powerful toolkit that makes it easier for you to develop with Slate, a popular framework for building text editors.

PlateJS

Tremor

A modern UI framework for building data-rich dashboards and applications with Tailwind CSS.

Tremor

SRCL

SRCL is an open-source React component and style repository that helps you build web applications, desktop applications, and static websites with terminal aesthetics.

SRCL

Animated UI Libraries and Components

Enhance your web development projects with animation libraries and animated components that bring interactive and dynamic elements to your UI. Explore component libraries designed to work seamlessly with frameworks like React, helping you create smooth transitions, animations, and engaging user experiences.

Motion

A powerful animation library for React, built on Framer Motion, offering seamless integration with Tailwind CSS.

Motion

Motion Primitive

A collection of reusable motion components designed for building smooth and interactive UIs effortlessly.

Motion Primitive

Motion Primitive

Animata

A curated set of prebuilt animations and design tools to create stunning motion experiences.

Animata

AceternityUI

A modern UI library with beautiful, animated components powered by Framer Motion.

AceternityUI

Lukacho UI

An elegant animation-focused component library, perfect for creating fluid and engaging user experiences.

Lukacho UI

ReactBits

Hand-picked animated components collection for creative developers

ReactBits

Animation by IBleck

A feature-rich animation framework for React, simplifying complex motion effects with ease.

Animation by IBleck

Animation by IBleck

Magic UI

A collection of animated components and design resources to create delightful user interfaces.

Magic UI

Blogs and Tuts by Oliver Larose

A series of tutorials and articles on creating highly complex and engaging animations and interactive UIs with NextJs and Framer with other animation tools.

Blogs and Tuts by Oliver Larose

Blogs and Tuts by Oliver Larose

Text Animation by Chris Abdo

A collection of handmade, free, and ready to use text animations & variants for your next project.

Text Animation by Chris Abdo

Text Animation by Chris Abdo

Backend Essentials

Backend development frameworks and tools provide the foundation for building scalable, secure, and efficient server-side applications. Explore a collection of powerful resources that simplify server logic, streamline database management, and enhance authentication processes. These technologies help you develop robust applications with efficient data handling, seamless security, and optimized performance.

Vercel

Vercel is a cloud platform that helps developers deploy, host, and scale frontend web applications

Vercel

Netlify

Netlify is a cloud platform that helps developers deploy, host, and scale frontend web applications

Netlify

Firebase

Google Firebase is a platform that helps developers build and maintain mobile and web apps. It provides tools for authentication, hosting, storage, and more.

Firebase

Supabase

Supabase is an open source Firebase alternative. Start your project with a Postgres database, Authentication, instant APIs and more.

Supabase

Appwrite

Build your entire backend within minutes and scale effortlessly using Appwrite's open-source platform.

Appwrite

Render

Render is a cloud platform that build, deploy your backend application and scale your apps with unparalleled ease.

Render

Railway

Railway is a cloud platform that helps developer deploy full stack projects quickly without complex infrastructure setup.

Railway

Cloudinary

Cloudinary is a cloud-based image and video management service. It enables users to upload, store, manage, manipulate, and deliver images and video for websites and apps.

Cloudinary

ngrok

ngrok is the flexible API gateway for instant, secure connectivity anywhere—public or private.

ngrok

Clerk

Clerk is a complete suite of embeddable UIs, flexible APIs, and admin dashboards to authenticate and manage your users with ease

Clerk

MongoDB

The world's most popular document database.

MongoDB

PostgreSQL

The World's Most Advanced Open Source Object-Relational Database

PostgreSQL

Razorpay SDKs

Supercharge your business with Razorpay's Payment Gateway: Accept payments, manage payouts, and handle cash on delivery.

Razorpay SDKs

Docker

Docker is an open platform for developing, shipping, and running applications.

Docker

Git

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Git

GitHub

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

GitHub

AI Tools and Miscellaneous Toolkits

Miscellaneous development resources offer a diverse set of tools to enhance productivity, streamline design, and simplify development workflows. From AI-powered coding assistants and UI component libraries to design assets, fonts, and documentation frameworks, these resources help developers build, prototype, and optimize their projects efficiently. Whether you're looking for code generators, animated icons, background patterns, or web design inspirations, this collection equips you with the right tools to bring your ideas to life.

V0

V0 is your always-on pair-programmer. A generative chat interface with in-depth knowledge on modern web technologies.

Bolt

Bolt.new is an AI-powered web development agent that allows you to prompt, run, edit, and deploy full-stack applications directly from your browser—no local setup required

Bolt

Lovable

Lovable AI is an AI-powered app builder that helps users create web applications without needing to code

Screenshot to Code

Convert any screenshot or design to clean code (with support for most frameworks)

Screenshot to Code

Screenshot to Code

Roadmap.sh

Roadmap.sh is a community effort to create roadmaps, guides and other educational content to help guide developers in picking up a path and guide their learnings.

Roadmap.sh

Background by IBleck

A collection of customizable background patterns and gradients for web design.

Background by IBleck

Background by IBleck

Buttons by IBleck

A set of beautifully crafted buttons with hover effects and animations.

Buttons by IBleck

Buttons by IBleck

Google Fonts

A vast library of free, open-source fonts for web and print design.

Google Fonts

IBleck UI

A UI component library for creating stunning, interactive web experiences.

IBleck UI

LogoShaper

Craft a stunning logo in seconds, no costs, no catch - pure creativity.

LogoShaper

Animated Icons by pqoqubbw

An open-source collection of smooth animated icons for your projects.

Animated Icons by pqoqubbw

Animated Icons by pqoqubbw

SVGL

A beautiful library with SVG logos.

SVGL

Fumadocs

The framework for building documentation websites in Next.js.

UIVerse

The Largest Library of Open-Source UI Community-built library of UI elements. Copy as HTML/CSS, Tailwind, React and Figma.

UIVerse

Codepen

A web-based code editor and playground for front-end developers.

Codepen

Codrops by Tympanus

A web design and development blog that publishes articles and tutorials about the latest web trends, techniques, and new possibilities.

Codrops by Tympanus

Codrops by Tympanus

Gitmoji

An emoji guide for your commit messages.

Gitmoji

Pitch

Pitch is the complete pitching platform that enables any team to quickly create sleek presentations.

Pitch

ray.so

Turn your code into beautiful images. Choose from a range of syntax themes, adjust the image size, and download your image.

ray.so

Mechvibes

A collection of mechanical keyboard sounds to help you focus and relax.

Mechvibes

Take A Break! - Chillout Zone

Sometimes, a little break is all you need to recharge and boost your creativity. Step into the Chill Zone with fun, relaxing activities or inspiration to unwind. Whether it's a short game, a moment of mindfulness, or just a quick mental reset, this space offers a refreshing pause before you jump back into your hackathon hustle.