Community

Sign In Sign Up

Community

Discover the best apps, components and starters from the community.

Search

By messaging v0, you agree to our Terms and AI Policy.

Pricing Enterprise FAQ

Privacy Vercel Community Vercel

...

...

This application is a video streaming platform designed to mimic the functionality of YouTube. It allows users to watch videos, view video information, engage with comments, and explore recommended content. The app is built using TypeScript and React, leveraging Next.js for server-side rendering and Tailwind CSS for styling.

To use the app, users can navigate to the homepage where they will find a video player prominently displayed. Below the player, detailed information about the video is provided, including the title, channel name, subscriber count, and options to like, share, save, or subscribe to the channel. Users can also read and post comments, with the ability to like or dislike existing comments.

The app features a responsive layout that adjusts to different screen sizes, ensuring a seamless experience on both desktop and mobile devices. The comments section allows users to interact by adding their own comments and viewing others' feedback. Additionally, a sidebar displays recommended videos based on the current content, encouraging further exploration.

Key technologies involved in the development of this app include React for building user interfaces, Next.js for routing and server-side rendering, and Tailwind CSS for utility-first styling. The app also utilizes Lucide icons for visual elements and a theme toggle feature that allows users to switch between light and dark modes.

Overall, the app provides a comprehensive video viewing experience, combining video playback, user interaction, and content discovery in a modern web application.

Youtube clone website

This app is a customizable link management tool designed for users to create a visually appealing and interactive grid of links. It allows users to drag and drop link blocks to rearrange them on a grid layout, making it easy to organize and access various online resources.

To use the app, users can click and drag the link blocks to reposition them within the grid. Each link block contains a title and subtitle, along with a URL that opens in a new tab when clicked. Users can also randomize the positions of the link blocks using a dedicated button. The app is responsive, adapting its layout for mobile and desktop views, ensuring an optimal user experience across devices.

The app is built using TypeScript and React, leveraging the Tailwind CSS framework for styling. It utilizes React hooks for state management and effects, allowing for dynamic updates and responsive design. The grid layout is calculated based on the viewport size, and the app saves the positions of the link blocks in local storage, enabling persistence across sessions.

Key features of the app include:
- Draggable link blocks that can be rearranged on a grid.
- Responsive design that adjusts for mobile and desktop views.
- Randomization of link block positions.
- Persistent storage of link block positions using local storage.
- A visually appealing interface with customizable colors and fonts.

Overall, this app provides a user-friendly way to manage and display links, making it suitable for personal portfolios, social media links, or any collection of online resources.

A simple email-only login page.

Signup page - Dark Modern

Signup page - Dark Modern

A file tree similar to the file tree in next js documentation

NextJS doc like file tree

Card Profile Edition

This app is a dashboard application designed to provide users with an overview of key metrics and activities related to their projects and business performance. It features a responsive layout that includes a sidebar for navigation and a main content area for displaying various statistics and charts.

To use the app, users can navigate through the sidebar, which includes options such as Home, Analytics, Projects, Calendar, Payments, and Settings. The sidebar can be toggled between an expanded and collapsed state for better usability. The main content area displays an overview of the dashboard, including statistics like Total Revenue, Subscriptions, Active Users, and Conversion Rate, presented in card format. Users can also view charts that illustrate revenue over time and traffic sources.

The app is built using TypeScript and React, leveraging various UI components from a library that includes cards, buttons, avatars, inputs, and dropdown menus. It utilizes state management with React's useState hook to control the sidebar's visibility. The app also incorporates icons from the Lucide React library for visual representation of different features.

Key features of the app include:
- A collapsible sidebar for easy navigation.
- A search input for quick access to specific information.
- Dynamic cards displaying important metrics with visual indicators of performance changes.
- Tabs for viewing data over different time frames (day, week, month).
- Charts for visualizing revenue trends and traffic sources.
- A recent activity section that lists the latest actions taken by team members, enhancing collaboration and awareness.

Overall, this dashboard app serves as a comprehensive tool for users to monitor their business activities and make informed decisions based on real-time data.

Simple dashboard

Community Crowdfunding

Community Crowdfunding

A simple, minimalistic typing test that pulls from a list of quotes.

Next.js Typing Game

This application is a comprehensive restaurant management system designed to facilitate various operational aspects of a restaurant, including inventory management, order processing, and staff management. It is built using TypeScript and React, leveraging a modular architecture with reusable components for a consistent user interface.

Users can navigate through different sections of the application using a sidebar that provides access to various functionalities such as managing incoming and outgoing stock, viewing and processing daily orders, managing the menu, and overseeing cash registers. The application also includes user authentication to ensure that only authorized personnel can access specific features based on their roles, such as administrator, manager, cashier, waiter, or chef.

Key features of the application include:

1. **Inventory Management**: Users can track incoming and outgoing stock, view product details, and manage inventory levels. The system provides alerts for low stock items and allows users to add new products to the inventory.

2. **Order Management**: The application allows users to create, view, and manage daily orders. Waiters can see their assigned orders, while managers and administrators can oversee all orders. The system calculates total revenue and provides insights into order statuses.

3. **Menu Management**: Users can manage the restaurant's menu, including adding new dishes, updating prices, and marking items as available or unavailable. The menu can be filtered by categories, and users can view detailed descriptions and pricing for each item.

4. **Staff Management**: The application includes features for managing waiters and other staff members, allowing for tracking of their performance, shifts, and daily service amounts. Administrators can add new staff members and update their details.

5. **Cash Register Management**: Users can monitor cash register activities, including total income, expenses, and transaction history. The system provides insights into the performance of each register and allows for the addition of new registers.

6. **User Authentication**: The application includes a secure authentication system that restricts access to certain features based on user roles. Users can log in, log out, and switch roles as needed.

The application is designed to be user-friendly, with a responsive layout that adapts to different screen sizes. It utilizes modern web technologies and best practices to ensure a smooth and efficient user experience.

Keeping FOOD POS

This application is a Point of Sale (POS) system designed for managing sales transactions, product inventory, and order history. It provides a user-friendly interface for staff to efficiently handle customer purchases, track inventory levels, and generate sales reports.

To use the app, users must first log in with their credentials. Once logged in, they can navigate through various sections, including the POS interface for processing sales, product management for adding or editing products, and order history for reviewing past transactions. The app also features a settings page for system diagnostics and user management.

The application is built using modern web technologies, including TypeScript, React, and Supabase for backend services. Supabase is utilized for database management, user authentication, and real-time data handling. The frontend is developed with a focus on responsive design, ensuring usability across different devices.

Key features of the app include:
- User authentication to secure access to the system.
- A POS interface that allows users to search for products, add them to a cart, and complete transactions with various payment methods.
- Product management capabilities, enabling users to add, edit, and delete products while tracking stock levels.
- Order history functionality that displays recent orders, including details such as order status, payment method, and total amount.
- Inventory management features that alert users to low stock levels and allow for automatic reorder suggestions.
- Sales reporting tools that provide insights into sales performance over specified date ranges.

Overall, this POS system aims to streamline retail operations, enhance customer service, and provide valuable insights into business performance.

Simple POS system

This application is a web-based platform designed for an architectural firm named Risala Design. It showcases the firm's portfolio, services, and insights into architecture, while providing a user-friendly interface for potential clients to explore their work and get in touch.

The app features a visually appealing homepage with a hero section that introduces the firm and its philosophy. Users can navigate through various sections, including About, Process, Work, Team, Blog, and Contact, using a responsive navigation menu. Each section is designed to provide detailed information about the firm's approach, team members, and projects.

Key functionalities include:

1. **Portfolio Showcase**: Users can view a gallery of completed projects, categorized by type (e.g., residential, commercial, interior, exterior, sustainable). Each project includes images, descriptions, and testimonials from clients.

2. **Testimonials Carousel**: A dynamic carousel displays client testimonials, enhancing credibility and showcasing the firm's impact on clients' projects.

3. **Blog Section**: The app features a blog where users can read articles related to architecture, design theory, and case studies, providing insights into the firm's expertise and thought leadership.

4. **Search Functionality**: Users can search for specific projects or blog posts, making it easier to find relevant content.

5. **Theme Toggle**: The app supports light and dark themes, allowing users to switch between them based on their preference.

6. **VR Viewer**: For select projects, users can experience virtual reality tours, providing an immersive way to explore the designs.

7. **Contact Options**: Users can easily reach out via email or connect on LinkedIn, facilitating communication for inquiries or project discussions.

The application is built using modern web technologies, including TypeScript, React, and Tailwind CSS for styling. It leverages libraries such as Framer Motion for animations and transitions, enhancing the user experience with smooth interactions. The app is designed to be responsive, ensuring accessibility across various devices.

Overall, this application serves as a comprehensive platform for Risala Design, effectively showcasing their work and engaging with potential clients.

LogiTrack is a comprehensive logistics and transportation management system designed to streamline logistics operations, including delivery tracking, inventory management, and order processing. The application is built using TypeScript and React, leveraging the Next.js framework for server-side rendering and routing. It utilizes Tailwind CSS for styling, ensuring a responsive and modern user interface.

To use LogiTrack, users can navigate through various roles, including admin, driver, warehouse staff, and customers. Each role has tailored functionalities and access to specific features. For instance, admins can manage orders, drivers can update delivery statuses, and warehouse staff can scan packages for dispatch. Users can log in to their respective dashboards, where they can view relevant information and perform necessary actions.

Key features of LogiTrack include:

1. **Role-Based Access**: Different user roles (admin, driver, warehouse, customer) have customized dashboards and functionalities.
2. **Order Tracking**: Users can track their orders in real-time by entering tracking IDs, with detailed status updates and timelines.
3. **Inventory Management**: Warehouse staff can manage inventory levels, scan packages, and handle issues related to inventory.
4. **Delivery Management**: Drivers can view their assignments, update delivery statuses, and capture proof of delivery through photos or signatures.
5. **Admin Dashboard**: Admins have access to a comprehensive dashboard that provides insights into total orders, active deliveries, pending issues, and on-time delivery rates.
6. **Responsive Design**: The application is designed to be mobile-friendly, ensuring usability across various devices.
7. **User-Friendly Interface**: The use of Tailwind CSS provides a clean and intuitive interface, enhancing user experience.

Overall, LogiTrack aims to optimize logistics operations, improve communication between stakeholders, and enhance the efficiency of delivery management processes.

Logistic web app design

The app is a roadside assistance platform called "АБ Автопомощь" designed to connect drivers in need of help with nearby helpers. Users can create requests for assistance through a Telegram bot by specifying their problem and location. The app facilitates a seamless process for users to receive timely support, similar to calling a taxi.

To use the app, users start by selecting the type of problem they are facing, such as a dead battery or a flat tire. They can then choose a specific subtype of the problem, followed by providing their location either by entering it manually or using their current geolocation. Once the request is submitted, the app connects the user with available helpers nearby, allowing them to communicate directly through the Telegram bot.

The app is built using modern web technologies, including TypeScript, React, and Next.js for the frontend, along with Tailwind CSS for styling. It utilizes various libraries such as Framer Motion for animations, Lucide React for icons, and Yandex Maps API for geolocation services.

Key features of the app include:
- A user-friendly interface for submitting assistance requests.
- Integration with Telegram for real-time communication with helpers.
- A step-by-step process guiding users through problem selection, subtype selection, and location input.
- Testimonials and FAQs to provide users with additional information and build trust.
- A responsive design that works well on both desktop and mobile devices.

Overall, the app aims to create a supportive community for drivers, making roadside assistance more accessible and efficient.

This application is a LaTeX editor designed for users who need to create and edit LaTeX documents efficiently. It provides a user-friendly interface that allows users to write LaTeX code, view a live preview of the rendered output, and utilize various templates for common mathematical expressions.

To use the app, users can start by entering their LaTeX code in the provided text area. The application supports syntax highlighting to enhance the writing experience, making it easier to identify commands and structures within the code. Users can switch between different views, including a full editor view, a preview view, or a split view that displays both the code and the rendered output simultaneously. The app also includes quick insert buttons for commonly used LaTeX templates, such as equations, matrices, and integrals, which can be easily added to the document.

The app is built using React and TypeScript, leveraging modern web technologies to provide a responsive and interactive user experience. It utilizes various UI components for layout and functionality, including buttons, text areas, and cards for displaying content. The LaTeX rendering is simulated through custom functions that convert LaTeX syntax into HTML for display purposes.

Key features of the app include:
- Syntax highlighting for LaTeX code to improve readability.
- Live preview of the rendered LaTeX output.
- Multiple view options: editor, preview, and split view.
- Quick insert templates for common LaTeX structures.
- Word and character count tracking.
- Copy to clipboard and download functionality for the LaTeX document.
- Help dialog with LaTeX syntax reference and tips for users.

Overall, this LaTeX editor aims to streamline the process of writing and rendering LaTeX documents, making it accessible for both beginners and experienced users.

This app is a visual simulation of the iconic "Matrix rain" effect, where characters fall from the top of the screen to the bottom, reminiscent of the digital rain seen in the Matrix movie franchise. The application is built using React and TypeScript, leveraging the Tailwind CSS framework for styling and animations.

To use the app, simply load it in a web browser. The Matrix rain effect will automatically adjust to the width of the viewport, creating a dynamic and immersive experience. The app calculates the number of columns based on the container's width and generates random characters for each column, which can include both Latin and katakana characters. The characters fall at varying speeds and change randomly, enhancing the visual complexity of the effect.

Key features of the app include:
- Responsive design that adapts to different screen sizes.
- A mix of Latin and katakana characters, with a customizable ratio for character types.
- Randomized speed categories for falling characters, creating a more organic look.
- Dynamic character changes during the fall, with adjustable frequency and glow effects.
- Smooth animations using CSS keyframes, providing a visually appealing experience.

The app utilizes React hooks for state management and lifecycle methods, ensuring efficient rendering and updates. Tailwind CSS is employed for styling, allowing for rapid design adjustments and responsive layouts. Overall, this app serves as an engaging demonstration of animation and character rendering in a web environment.

Matrix rain effect

This app is a celebratory birthday experience designed to deliver a fun and interactive way to send birthday wishes. Upon launching the app, users are greeted with a prominent "Happy Birthday!" message that appears with a smooth animation. The app features a surprise button that, when clicked, triggers a delightful display of animated balloons and plays a cheerful birthday song.

To use the app, users simply click the "Click for a Surprise 🎁" button. This action initiates the balloon animation and attempts to play a birthday song. If the audio fails to play, the app gracefully handles the error by displaying a notification while still allowing the balloon animation to proceed.

The app is built using React with TypeScript, leveraging the Next.js framework for server-side rendering and routing. It utilizes Tailwind CSS for styling, providing a responsive and visually appealing design. The balloons are animated using CSS keyframes, creating a floating effect that enhances the celebratory atmosphere.

Key features of the app include:
- A dynamic birthday message that animates into view.
- A surprise button that triggers the balloon animation and audio playback.
- Randomized balloon colors, sizes, and positions for a lively visual effect.
- Error handling for audio playback, ensuring a smooth user experience even if the audio fails.
- A responsive design that adapts to different screen sizes.

Overall, this app combines engaging visuals with interactive elements to create a memorable birthday greeting experience.

Animated birthday website

The Tide AI Workshop app is designed to assist developers in learning how to build AI-powered applications using Spring Boot and modern large language model (LLM) technologies. The app provides a comprehensive platform that includes various sections such as an introduction, features, prerequisites, installation instructions, and a call-to-action for users to get started.

To use the app, users can navigate through different sections using a responsive header that includes links to each section. The app is built using TypeScript and React, leveraging the Next.js framework for server-side rendering and routing. It also utilizes Tailwind CSS for styling, ensuring a modern and responsive design. The app incorporates Zustand for state management, particularly for theme preferences, and Vercel Analytics for tracking user interactions and page views.

Key features of the Tide AI Workshop app include:
- A responsive layout that adapts to both desktop and mobile devices, with a mobile navigation menu for easy access.
- An informative hero section that introduces the workshop and provides links to get started and learn more.
- Detailed sections outlining the features of the application, prerequisites for getting started, and step-by-step installation instructions.
- A footer that includes additional resources and links to the GitHub repository, allowing users to access the source code and contribute.
- A theme toggle feature that allows users to switch between light and dark modes for a personalized experience.

Overall, the Tide AI Workshop app serves as a valuable resource for developers looking to enhance their skills in AI application development, providing a structured and engaging learning environment.

Tide AI workshop page

This app is a dashboard interface designed for managing various aspects of a system or application. It features a sidebar navigation component that allows users to access different sections such as Overview, Dashboard, Settings, and Team management, which includes sub-sections for Members, Permissions, and Invitations.

To use the app, users can interact with the sidebar to navigate between different sections. The sidebar includes a search form at the top, enabling users to quickly find specific items or features within the dashboard. Each navigation item is represented with an icon and title, and collapsible sections are provided for items that contain sub-items, enhancing the organization of the navigation.

The app is built using TypeScript and React, leveraging various components from a UI library for consistent styling and functionality. Key technologies involved include React for component-based architecture, TypeScript for type safety, and Lucide for iconography.

Key features of the app include:
- A collapsible sidebar for easy navigation between different sections.
- A search form integrated into the sidebar for quick access to features.
- Responsive design that adapts to different screen sizes, ensuring usability on various devices.
- A structured layout for the main content area, allowing for the display of multiple dashboard elements in a grid format.

Overall, this app provides a user-friendly interface for managing and navigating through different functionalities, making it suitable for applications that require a comprehensive dashboard experience.

Collapsible sidebar

This application is a hospital management system specifically designed for Intensive Care Units (ICUs). It provides a comprehensive platform for managing patient data, monitoring bed availability, and generating reports on patient outcomes and device usage.

The app features a user authentication system that allows users to log in with their credentials. Once authenticated, users can access various functionalities, including a dashboard that displays key statistics about the ICU, such as bed occupancy rates, average length of stay, and the number of patients on mechanical ventilation or receiving noradrenaline.

Users can manage patient records, including personal information, medical history, and current treatment details. The application allows for the addition and editing of patient data through a user-friendly form interface. It also includes features for tracking medical devices used by patients, daily goals for patient care, and the ability to import patient data from external files such as Excel or PDF.

The technology stack includes TypeScript and React for the frontend, leveraging the Next.js framework for server-side rendering and routing. The application utilizes context API for state management, particularly for user authentication, and employs various UI components for a consistent user experience.

Key features of the app include:
- User authentication with login and logout functionality.
- A dashboard displaying real-time statistics and patient information.
- Patient management capabilities, including adding, editing, and viewing patient records.
- Monitoring of bed availability and patient status.
- Daily goals tracking for patient care.
- Import functionality for bulk patient data entry from files.
- Automatic updates for system data and patient statuses.

Overall, this application aims to streamline the management of ICU operations, enhance patient care, and provide valuable insights through data analysis and reporting.

An org chart in a Figma-like draggable canvas with zoom controls

React Org Chart

This application is a web-based platform designed to showcase Chiloane Holdings, a South African youth-led holding company focused on empowering the digital, financial, and creative economy of Africa. The app features a visually engaging interface that highlights the company's various divisions, performance metrics, and overall mission.

Users can navigate through different sections, including an introduction to the company, detailed descriptions of its divisions, performance projections, and contact information. The app employs a modern design aesthetic with animations and transitions to enhance user experience.

Key features of the app include:

1. **Particle Background Animation**: A dynamic particle background that adjusts to the user's screen size, providing an engaging visual experience.

2. **Animated Counter**: A component that visually counts up to specific values, showcasing statistics related to the company's divisions and projects.

3. **Division Icons**: Custom SVG icons representing different business divisions, each with unique animations to enhance visual appeal.

4. **Performance Charts**: Interactive charts that display revenue projections and division growth, allowing users to visualize the company's performance over time.

5. **Info Slider**: A slider that presents the company's story, mission, approach, and future plans, with smooth transitions between slides.

6. **Responsive Design**: The app is optimized for both desktop and mobile devices, ensuring a seamless experience across different screen sizes.

7. **Contact Form**: A user-friendly contact form that allows potential clients and partners to reach out directly to the company.

The application is built using modern web technologies, including TypeScript, React, and Tailwind CSS for styling. It leverages the Framer Motion library for animations and transitions, enhancing the overall interactivity of the user interface. The app is structured to be responsive, ensuring accessibility and usability on various devices.

Chiloane Holdings

Payment Modal

Duck Blackjack

This app is a web-based implementation of the classic Battleship game, allowing users to engage in strategic naval combat against a computer opponent. The primary objective is to position a fleet of ships on a grid and then take turns attacking the opponent's grid to sink their ships before they sink yours.

To use the app, players start by placing their ships on their own grid. The game features a user-friendly interface where players can select ships, choose their orientation (horizontal or vertical), and place them on the board. Once all ships are placed, players can initiate the battle phase, where they take turns attacking the opponent's grid by selecting coordinates. The game provides feedback on hits and misses, and animations enhance the visual experience of the game.

The app is built using modern web technologies, including TypeScript and React, which provide a robust framework for building interactive user interfaces. The game logic is encapsulated in utility functions that manage the game state, including ship placement validation and turn management. The user interface is styled using Tailwind CSS, allowing for responsive design and theming capabilities.

Key features of the app include:
- A grid-based interface for ship placement and attacks.
- Random ship placement for the computer opponent.
- Visual feedback for hits, misses, and sunk ships through animations.
- A toggle for switching between light and dark themes.
- Responsive design that adapts to different screen sizes.
- Clear game status messages to guide players through their turns and game phases.

Overall, this Battleship app combines classic gameplay with modern web development practices, providing an engaging experience for users.

Next.js Battleship Game

AI Input made by kokonut/ui

The Cyberpunk Buttons is a web application designed to display a collection of animated button components inspired by a cyberpunk aesthetic. Users can interact with various buttons, each representing a unique action or function, while also being able to view and download the corresponding code for each button.

To use the app, users can navigate through a visually appealing interface that features a grid of buttons. Each button is accompanied by an icon and a title, and users can filter the buttons by typing in a search box. When a button is clicked, it triggers an animation and displays the button's code in a modal window, where users can also download the code for their own use.

The application is built using modern web technologies, including React for the user interface, TypeScript for type safety, and Tailwind CSS for styling. The app leverages various React hooks, such as useState and useMemo, to manage state and optimize performance. The buttons are designed with intricate animations and effects, enhancing the user experience.

Key features of the Cyberpunk Buttons include:
- A collection of over 30 unique animated button components, each with distinct styles and animations.
- A filter input that allows users to search for buttons by name or title.
- A modal viewer that displays the code for each button, enabling users to copy or download the code easily.
- A visually engaging background with animated particles and effects that contribute to the cyberpunk theme.
- Responsive design that adapts to different screen sizes, ensuring usability across devices.

Overall, the Cyberpunk Buttons serves as both a creative resource for developers looking for inspiration and a practical tool for implementing animated buttons in their projects.

Cyberpunk Buttons

Drag-n-drop kanban board brought to you by DeDevs Club.

Stay focused on your Top 5 P0 tasks from Linear

p0: Minimalist Linear Task List

A nebulous golden ratio loading screen.

Golden Ratio Loading Screen

This application is a comprehensive web platform designed to provide a range of services, including web development, mobile app development, mechanical engineering, and digital solutions. It aims to facilitate business growth and innovation through advanced technology and strategic design.

Users can navigate through various sections of the app, including a homepage featuring a dynamic hero section with a video background, a services overview, a portfolio showcase, and a detailed consultation process. The app utilizes modern web technologies such as React, TypeScript, and Next.js, ensuring a responsive and interactive user experience.

Key features of the app include:

1. **Dynamic Content**: The app features animated sections, including a typing hero effect and a spinning earth background, enhancing user engagement.

2. **Service Showcase**: Users can explore different services offered, each with detailed descriptions, key features, and associated technologies. The services are presented in a visually appealing grid layout.

3. **Consultation Process**: The app includes a structured consultation process that guides users through various steps, allowing them to provide information about their business needs and project requirements.

4. **AI-Powered Support**: An AI assistant is integrated into the platform to provide instant support and answer user queries, enhancing the overall user experience.

5. **Portfolio and Projects**: Users can view a showcase of completed projects, including descriptions, technologies used, and key achievements, helping potential clients understand the capabilities of the service provider.

6. **User Interaction**: The app allows users to like or dislike projects, providing feedback on the showcased work.

7. **Language Support**: The application supports multiple languages, allowing users to switch between languages seamlessly.

8. **Responsive Design**: The app is designed to be fully responsive, ensuring a consistent experience across devices, from desktops to mobile phones.

Technologies involved in the development of this application include React for the frontend, Next.js for server-side rendering, TypeScript for type safety, and various libraries such as Framer Motion for animations and Lucide for icons. The application also employs Tailwind CSS for styling, ensuring a modern and clean design.

Overall, this application serves as a powerful tool for businesses looking to leverage technology for growth, providing a user-friendly interface and a wealth of resources to support their journey.

The Liquid Camera app is an interactive application that allows users to play with interactive liquid blob effects using their webcam feed. The app utilizes advanced WebGL rendering techniques to produce visually appealing liquid-like animations that respond to user interactions.

To use the app, users simply need to access it through a web browser. Upon launching, they will be prompted to start their camera, which will then be used as the background for the liquid blob effect. Users can interact with the blobs by moving their pointer, and they have the option to capture images of the current scene, which can be downloaded directly to their device.

The app is built using modern web technologies, including React for the user interface, Next.js for server-side rendering and routing, and Three.js for 3D graphics rendering. It also employs Tailwind CSS for styling and Radix UI for accessible component design. The app is optimized for both desktop and mobile devices, ensuring a smooth experience across different platforms.

Key features of the Liquid Camera app include:
- Webcam integration to provide a live background for the liquid effect.
- Interactive liquid blob animations that respond to user movements.
- Image capture functionality that allows users to save their creations.
- Responsive design that adapts to both mobile and desktop environments.
- Customizable visual effects through shader programming, enhancing the overall aesthetic of the liquid blobs.

Liquid animation effect

The app is a dashboard interface designed for monitoring and managing system performance and status. It provides users with real-time insights into various system metrics, including CPU usage, memory allocation, network status, and security levels. The dashboard is built using React and TypeScript, leveraging the Tailwind CSS framework for styling and layout.

To use the app, users can navigate through a sidebar menu that includes options for different system functionalities such as diagnostics, data center management, network monitoring, and security settings. The main dashboard displays key performance indicators in a visually appealing format, including metric cards, progress bars, and charts. Users can toggle between light and dark themes, and the interface includes interactive elements like buttons, sliders, and tooltips for enhanced usability.

Key features of the app include:
- Real-time monitoring of system metrics with simulated data updates.
- A responsive layout that adapts to different screen sizes.
- A particle effect background that adds visual interest to the dashboard.
- Notifications and alerts for system events, such as security scans and bandwidth spikes.
- A communications log for tracking messages from system administrators and modules.
- Quick action buttons for performing common tasks like security scans and data synchronization.
- Detailed views for processes and storage management, allowing users to see resource allocation and usage.

The app utilizes various technologies, including React for component-based architecture, TypeScript for type safety, and Tailwind CSS for utility-first styling. The use of hooks like useEffect and useState enables dynamic updates and state management within the application. Overall, the app serves as a comprehensive tool for system administrators and users looking to maintain optimal system performance and security.

Futuristic Dashboard

SnowMate is the ultimate app for solo skiers and snowboarders looking to connect with others at the same ski resort. Select your sport, skill level, and let the app find nearby riders based on location. Once matched, chat privately or join SnowGroups to plan group rides and après-ski meetups. Features include real-time geolocation, secure messaging, event calendars, and emergency safety options. With a sleek iOS-style design, SnowMate makes every snow trip more social and fun! ❄️🔥

The Middleman Club is a web application designed to facilitate connections and opportunities among professionals. It serves as a platform for users to share and discover various opportunities, ranging from job openings to project collaborations, while also allowing them to earn commissions for successful connections.

Users can navigate through different membership tiers, each offering unique features and benefits. The tiers include Connector, Networker, Facilitator, Broker, and Partner, with varying monthly subscription fees and commission rates. Each tier provides specific tools and support, such as opportunity sharing, analytics, and priority matching, tailored to the user's level of engagement and expertise.

To use the app, users can start by creating an account through a multi-step registration process. This includes providing basic information, detailing their professional background, and selecting a membership tier that aligns with their goals. Once registered, users can access their dashboard, where they can track earnings, view recent activities, and manage their connections.

The application is built using modern web technologies, including TypeScript and React for the frontend, with animations powered by Framer Motion for a smooth user experience. The UI components are styled using Tailwind CSS, ensuring a responsive and visually appealing design.

Key features of the app include:
- Multiple membership tiers with distinct features and pricing.
- A user-friendly registration process with multiple steps.
- A dashboard for tracking earnings, connections, and recent activities.
- Tools for sharing and managing opportunities.
- Responsive design that adapts to various screen sizes.

Overall, The Middleman Club aims to empower professionals by providing them with the tools and resources needed to expand their networks and capitalize on new opportunities.

Animated Presentation Creation

MacOS Mojave

The Kosovo Travel Guide app is designed to provide users with comprehensive information about various attractions, restaurants, hotels, and shopping destinations in Kosovo. It serves as a digital companion for travelers looking to explore the rich cultural heritage and natural beauty of the region.

Users can navigate through the app to discover detailed information about specific attractions, including historical sites, natural wonders, and cultural landmarks. Each attraction page features essential details such as location, opening hours, admission fees, contact information, and user reviews. Users can also view images and highlights of each attraction, along with tips for visiting.

To use the app, users can search for attractions, restaurants, and hotels using a search bar or by applying filters based on categories and locations. The app also includes a map feature that allows users to visualize the locations of various points of interest, making it easier to plan their itineraries.

The app is built using modern web technologies, including React and Next.js, which provide a responsive and dynamic user experience. It utilizes TypeScript for type safety and Tailwind CSS for styling, ensuring a clean and user-friendly interface. The app also incorporates a language context to support multiple languages, enhancing accessibility for a diverse user base.

Key features of the Kosovo Travel Guide app include:
- A searchable database of attractions, restaurants, hotels, and shopping centers.
- Detailed pages for each attraction with descriptions, images, and visitor tips.
- An interactive map to visualize locations and get directions.
- Filters for searching by category and location.
- A user-friendly interface with responsive design for mobile and desktop devices.
- Multi-language support to cater to a wider audience.

Overall, the Kosovo Travel Guide app aims to enrich the travel experience by providing essential information and tools for planning a visit to Kosovo.

Kosova Tourism Website

NexusAI is an advanced AI bot platform designed for developers to create, manage, and deploy powerful AI bots capable of handling large files and complex tasks. The application provides a user-friendly interface for bot creation, API key management, and monitoring bot performance through a comprehensive dashboard.

To use NexusAI, users can sign up for an account and log in to access the dashboard. From there, they can create new bots, generate API keys, and view documentation. The platform features a responsive design that adapts to various screen sizes, ensuring a seamless experience on both desktop and mobile devices.

NexusAI is built using modern web technologies, including TypeScript and React, with Next.js as the framework for server-side rendering and routing. The user interface components are styled using Tailwind CSS, providing a clean and responsive layout. The application also utilizes Lucide icons for visual elements, enhancing the overall user experience.

Key features of NexusAI include:

1. Advanced Bot Creation: Users can build sophisticated AI bots with an intuitive interface, allowing for customization of bot types, capabilities, and configurations.

2. API Key Generation: The platform offers a secure system for creating and managing API keys, complete with granular permission controls and usage monitoring.

3. Enterprise Security: NexusAI implements military-grade encryption and security protocols to protect user data and AI models from unauthorized access.

4. Dashboard Analytics: Users can monitor their bots' performance and API usage through a detailed dashboard that includes charts and usage statistics.

5. Documentation and Support: Comprehensive documentation is available to assist users in navigating the platform and utilizing its features effectively.

6. Responsive Design: The application is designed to work seamlessly across various devices, ensuring accessibility for all users.

NexusAI aims to empower developers and companies to build the next generation of AI applications, providing the tools and resources necessary for successful bot deployment and management.

Website like opn.ai

This application is a comprehensive event management platform designed specifically for hackathons. It allows users to create, manage, and track various hackathon events, providing a centralized dashboard for event organizers and participants.

To use the app, users can navigate through a user-friendly interface that includes a dashboard for quick access to event statistics, recent activities, and upcoming events. Users can create new events, view details of existing events, and manage teams and project submissions. The app also features a search function to easily find specific events and a filtering system to categorize events by their status (active, upcoming, or past).

The application is built using modern web technologies, including TypeScript and React for the frontend, with a focus on responsive design to ensure usability across devices. It utilizes libraries such as Recharts for data visualization, Lucide for icons, and Tailwind CSS for styling, allowing for a clean and visually appealing user interface.

Key features of the app include:
- A dashboard that displays active events, total participants, and project submissions.
- Event cards that provide quick insights into each event, including status, date, and participant count.
- A timeline feature that tracks the progress of events, showing key milestones and deadlines.
- A resource monitor that displays the availability of essential resources like energy, water, oxygen, and fuel for each event.
- A recent activity feed that highlights user interactions and updates related to events.
- A team and mentor management system that allows for easy assignment and tracking of participants and their projects.

Overall, this app serves as a powerful tool for managing hackathons, enhancing collaboration among participants, and streamlining the event organization process.

Hackathon project ideas

Wavey Background

Wavey Background

kadrandergi

The app, named Zentix, is an AI-powered trading platform designed specifically for cryptocurrency trading on the Solana blockchain. It leverages advanced neural networks to provide users with high-confidence trading signals and real-time market analysis, aiming to enhance trading performance and decision-making.

To use the app, users can navigate through a visually engaging interface that features animated elements and interactive components. The landing page introduces the app with a dynamic text animation and a call-to-action button that directs users to the trading dashboard. Users can access various features, including a trading chart that visualizes market data, trading signals, and performance statistics.

Zentix is built using modern web technologies, including Next.js for server-side rendering and React for building user interfaces. The app utilizes TypeScript for type safety, Framer Motion for animations, and Tailwind CSS for styling, ensuring a responsive and visually appealing design. The application also incorporates Lucide icons for enhanced visual representation and Recharts for data visualization.

Key features of the app include:
- A landing page with animated text and a visually appealing design.
- A trading dashboard that displays real-time trading charts and signals.
- Interactive elements that provide users with insights into market trends and trading opportunities.
- A demo trading chart that simulates market data and trading signals.
- User-friendly navigation and responsive design for optimal performance across devices.
- Support for early access sign-ups and access to a whitepaper for detailed information about the app's technology and tokenomics.

Overall, Zentix aims to provide a comprehensive trading experience for cryptocurrency enthusiasts, combining cutting-edge technology with user-friendly design to facilitate informed trading decisions.

Crypto Trading Website

A chatbot built with the AI SDK that includes a generative UI tool call.

Generative UI Chatbot

This application is an interactive 3D visualization tool designed to showcase key features of blockchain technology, particularly in the context of logistics and supply chain management. Users can explore various blockchain features through a visually engaging interface that utilizes 3D graphics and animations.

To use the app, users can click on any of the hexagonal feature icons displayed in a rotating 3D prism. Each hexagon represents a specific feature, such as Traceability, Security, Efficiency, Integration, Automation, and Data. When a hexagon is clicked, a modal dialog appears, providing detailed information about the selected feature, including its description and associated icon. Users can also click and drag the prism to rotate it, creating a dynamic viewing experience enhanced by cosmic trails and particle effects.

The app is built using modern web technologies, including React for the user interface, TypeScript for type safety, and Three.js for rendering 3D graphics. It leverages the React Three Fiber library to integrate Three.js with React, allowing for a seamless development experience. The user interface components are styled using Tailwind CSS, providing a responsive and visually appealing design. Additionally, Framer Motion is used for animations, enhancing the interactivity of the application.

Key features of the app include:
- Interactive 3D visualization of blockchain features.
- Clickable hexagonal icons that reveal detailed information about each feature.
- Dynamic animations and effects, including cosmic trails and pulsating lights.
- Responsive design that adapts to different screen sizes.
- Modal dialogs for displaying feature descriptions.
- Integration with existing systems through seamless connections.

Overall, this application serves as an educational tool, helping users understand the benefits and functionalities of blockchain technology in logistics and supply chain management through an engaging and interactive format.

Interactive-3D-Infographic

Built a food diary app! Snap a pic of your meals to hit your macros.
Made by Emanuel Perez.

Bento food diary app

Hepida - Onboarding