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

...

...

time zones

50 shades of time

This application is a web-based platform designed to facilitate the creation and management of custom extensions for various functionalities, such as translation, mapping, and document management. Users can browse recommended extensions or add their own custom extensions through an intuitive interface.

To use the app, users can navigate through different sections to view available extensions, add new ones, and manage existing extensions. The app features a modal for adding custom extensions, where users can input configuration details in a code editor. Additionally, users can view a list of enabled extensions and remove them if necessary.

The application is built using TypeScript and React, leveraging various UI components for a responsive and user-friendly experience. Key technologies include React for component-based architecture, TypeScript for type safety, and Lucide for icons. The UI is styled using Tailwind CSS, ensuring a modern and clean design.

Key features of the app include:
- A tabbed interface to switch between recommended and custom extensions.
- A modal for adding custom extensions with a code editor for configuration.
- A dropdown to manage enabled extensions, allowing users to add or remove them easily.
- A responsive design that adapts to different screen sizes.
- Integration of icons and buttons for enhanced user interaction.

Overall, this application streamlines the process of managing extensions, making it easier for users to customize their experience and enhance functionality.

with部署申请新域名

Ai-Teams-Up

Next.js Community Starter

This application is a web-based word-guessing game inspired by Wordle, where players attempt to guess a five-letter target word within six attempts. The game provides visual feedback on the player's guesses, indicating whether letters are correct, present in the word but in the wrong position, or absent altogether.

To use the app, players simply type their guesses using a virtual keyboard or their physical keyboard. Each guess is evaluated, and the game provides immediate feedback through color-coded tiles: green for correct letters in the correct position, yellow for correct letters in the wrong position, and gray for letters that are not in the word. Players can also toggle sound effects on or off, enhancing the interactive experience.

The app is built using TypeScript and React, leveraging various libraries and technologies such as Framer Motion for animations, Tailwind CSS for styling, and canvas-confetti for celebratory effects when a player wins. The game state is managed through custom hooks, which handle the logic for tracking guesses, evaluating the game status, and managing user input.

Key features of the app include:
- A grid layout for displaying guesses and their statuses.
- A virtual keyboard for input, with visual feedback for key presses.
- Sound effects for various game actions, such as key presses and game outcomes.
- Confetti animations to celebrate winning the game.
- Alerts to inform players of game status, including success and failure messages.
- A share functionality that allows players to copy their results to the clipboard or share them via the Web Share API.

Overall, this app provides an engaging and interactive way for users to enjoy a word-guessing game while incorporating modern web technologies for a smooth user experience.

A sidebar with a collapsible file tree.

File Tree Sidebar

MR HOOD GENERAL

This application is a comprehensive AI Agent Dashboard designed to facilitate user interaction with an intelligent voice assistant. The app provides a user-friendly interface for managing various functionalities, including conversation history, knowledge base management, and plugin management.

To use the app, users must first log in through a dedicated login page. Upon successful authentication, users are directed to the main dashboard, where they can navigate through different sections using a sidebar. The sidebar includes links to the dashboard, conversation history, knowledge base, and plugin manager, allowing users to switch between these functionalities seamlessly.

The app is built using TypeScript and React, leveraging modern web technologies to create a responsive and interactive user experience. It utilizes a combination of UI components for layout and design, including cards, buttons, and forms, all styled with Tailwind CSS for a consistent and visually appealing interface.

Key features of the app include:

1. **User Authentication**: A secure login page that allows users to access their personalized dashboard.
2. **Dashboard**: A central hub displaying key metrics, recent activities, and quick action buttons for common tasks.
3. **Conversation History**: A section where users can review past interactions with the AI agent, complete with search and filter capabilities to find specific conversations.
4. **Knowledge Base**: A management system for storing and retrieving information that the AI agent can reference, including the ability to add new entries and categorize them.
5. **Plugin Manager**: A feature that allows users to manage installed plugins, view available plugins, and configure their settings, enhancing the AI agent's capabilities.
6. **Responsive Design**: The app is designed to be fully responsive, ensuring usability across various devices and screen sizes.

Overall, this application serves as a powerful tool for users looking to harness the capabilities of an AI assistant, providing a structured and efficient way to manage tasks and information.

Futuristic dashboard design

A Very simple coffee themed Landing Page

Coffee Landing Page

The Email Category Selector app is a user interface component designed to help users categorize their emails into distinct groups. It allows users to easily switch between different email categories, enhancing their email management experience. The app features five categories: Important, All Mail, Personal, Updates, and Promotions, each represented by an icon and a color for easy identification.

To use the app, users simply click on one of the category buttons to select it. The selected category will expand visually, while the others will shrink, providing a clear indication of the active category. The app employs animations to create a smooth and engaging user experience, with transitions that respond to user interactions.

The app is built using React, a popular JavaScript library for building user interfaces, and utilizes TypeScript for type safety. It also incorporates the Framer Motion library for animations, allowing for dynamic visual effects. The icons are sourced from the Lucide React icon library, providing a modern and clean aesthetic.

Key features of the Email Category Selector app include:
- A responsive design that adapts to different screen sizes.
- Smooth animations for category selection, enhancing user engagement.
- Clear visual differentiation between categories through color coding and icons.
- A straightforward user interface that simplifies email categorization.

Overall, the Email Category Selector app is a practical tool for users looking to organize their email efficiently while enjoying a visually appealing interface.

Email Filter Buttons

Three In A Row

Wave effect editor tool

Wave effect editor tool

$Liquid Glass Tabs based on https://github.com/shuding/liquid-glass with speed, refraction and easing curve controls.$

Liquid glass tabs

BiBo Messenger clone

The E-Mobility Strategy app is designed to facilitate strategic workshops focused on the negotiation and planning of large-scale electric vehicle orders. The app provides a comprehensive landing page that outlines the workshop's details, including the agenda, expected outcomes, and registration options.

Users can navigate through the app using a sticky header that includes links to various sections such as Overview, Agenda, Outcomes, and Registration. The main content area features a visually appealing layout with sections dedicated to the workshop's purpose, timeline, and deliverables. Key features include a timeline component that outlines the workshop agenda in detail, highlighting specific topics and time allocations for each segment.

The app 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 design. The app also incorporates Lucide icons for visual elements and custom UI components for buttons and cards.

To use the app, users can simply visit the landing page, review the workshop details, and register by filling out a form that collects their first name, last name, email, and department. The registration process is straightforward, with a clear call-to-action button to secure a spot in the workshop.

Overall, the E-Mobility Strategy app serves as a centralized platform for organizing and managing strategic workshops, providing users with essential information and tools to facilitate effective collaboration and decision-making.

This app is a user interface component library designed to showcase a set of animated buttons with a modern neumorphic design. It allows developers to easily integrate visually appealing buttons into their applications, enhancing user interaction through animations and responsive design.

To use the app, developers can import the button components into their React applications. The buttons are built using React and TypeScript, and they leverage the Framer Motion library for animations. The app is styled using Tailwind CSS, which provides utility-first CSS classes for rapid UI development. The layout is structured with a responsive design that adapts to different screen sizes.

Key features of the app include:
- A variety of button types, including primary action buttons, icon-only buttons, and floating action buttons, each with unique animations and hover effects.
- Support for state management, allowing buttons to reflect user interactions such as liking, bookmarking, and playing/pausing actions.
- A neumorphic design aesthetic that provides a modern look and feel, with subtle shadows and glowing effects to enhance the visual experience.
- Customizable button styles and animations, enabling developers to tailor the components to fit their application's branding and user experience needs.

Overall, this app serves as a comprehensive toolkit for developers looking to implement stylish and interactive buttons in their web applications.

Framer Design Concept

tooltip smootly moves to item being hovered

Eato app design

A webapp to support women working out with their menstrual cycle in mind.

Designed during CTRL ALT PLAY.

Menstrual Cycle Workout Program

This app is an interactive 3D simulation of the Earth-Moon system, designed to visualize and manipulate the orbital dynamics between the Earth and its Moon. Users can adjust parameters such as orbital speed and gravitational pull to see how these factors influence the Moon's orbit around the Earth.

Earth-Moon System

A basic blockchain explorer (v0) with minimal features, displaying blocks, transactions, and wallet data. It has a simple UI, basic search, and a static table for recent activity. No real-time updates or advanced analytics yet. Designed for beginners, it’s functional but lacks polish, animations, and deep blockchain insights.

Blockchain Explorer

The app is a real estate landing page called "RumahNyaman," designed to help users find comfortable homes for families in Indonesia. It showcases various properties, including houses and apartments, with detailed descriptions, images, and pricing information. Users can navigate through different sections of the app, including a hero section, property showcase, amenities, testimonials, and contact information.

To use the app, users can scroll through the landing page to explore available properties, view their features, and read testimonials from satisfied customers. They can also contact the company directly or schedule a visit to the properties of interest through prominent call-to-action buttons.

The app is built using modern web technologies, including TypeScript and React for the frontend, and utilizes Tailwind CSS for styling. The configuration file for Tailwind CSS indicates support for dark mode and includes custom color themes, responsive design settings, and animations for UI components.

Key features of the app include a responsive layout that adapts to different screen sizes, a visually appealing design with high-quality images, a user-friendly navigation menu, and sections dedicated to showcasing properties, amenities, and customer testimonials. The app also incorporates interactive elements such as buttons for contacting the company and scheduling visits, enhancing user engagement. Overall, "RumahNyaman" aims to provide a seamless experience for users looking to find their ideal home.

Silverbacks.cash is an innovative application designed to revolutionize the way users interact with cash by bridging the gap between traditional physical banknotes and decentralized digital stablecoins. The app utilizes NFC technology to enable users to seamlessly convert physical cash into digital assets, providing a bankless and privacy-preserving financial experience.

To use the app, users can purchase Silverbacks bills at participating retail locations. Each bill is embedded with an NFC chip that contains an encrypted EVM keypair. Users can activate their bills at the point of sale, scan the NFC chip with a companion mobile application, and redeem the value of the bill in stablecoins by following a simple process that includes scratching off a panel to reveal a decryption code. This process allows users to sign a transaction that burns the NFT representing the bill, releasing the equivalent stablecoin value to their digital wallet.

The app is built using modern web technologies, including TypeScript and React, and is powered by the Next.js framework. It features a responsive design that adapts to various devices, ensuring a smooth user experience. Key components of the app include a header and footer for navigation, sections detailing how the system works, its advantages, use cases, and a roadmap for future developments. Additionally, an AI chat widget is integrated to assist users with inquiries about the Silverbacks system.

Key features of Silverbacks.cash include:
- Zero KYC friction, allowing for instant retail purchases without complex verification processes.
- Enhanced privacy, as no personal data is collected during transactions.
- Programmable value through smart contracts, enabling features like time-locks and conditional payments.
- Full auditability, with all transactions recorded transparently on the blockchain.
- Global accessibility, allowing users to transact anywhere with NFC-capable devices and internet access.

The app aims to empower users, particularly those who are unbanked or underbanked, by providing a straightforward and secure method to access the digital economy without the need for traditional banking infrastructure.

Silverbacks.cash

This app is a digital audio mixer designed for professional use, featuring a user-friendly interface that allows users to control various audio parameters for up to 12 channels. Each channel strip includes controls for gain, equalization (EQ), effects sends, pan, and volume, enabling detailed audio manipulation.

To use the app, users can interact with sliders to adjust gain, low, mid, and high frequencies, as well as effects levels and pan settings. The app also includes buttons for muting and soloing channels, as well as a record function. The volume can be adjusted using a vertical slider, and a visual signal indicator shows whether audio is being received.

The app is built using TypeScript and React, leveraging components for UI elements such as buttons, sliders, and cards. It employs state management to handle user interactions and updates in real-time. The design incorporates a gradient background and responsive layouts to enhance usability.

Key features of the app include:
- Adjustable gain, EQ, and effects for each channel.
- Mute and solo buttons for individual channel control.
- A record button to start and stop audio recording.
- A vertical volume slider with a visual signal indicator.
- Fullscreen mode for an immersive mixing experience.
- Responsive design that adapts to different screen sizes.

Overall, this app provides a comprehensive solution for audio mixing, suitable for both live performances and studio recordings.

React component issue

The VoidLoom app is an advanced AI-powered platform designed for cryptocurrency trading, specifically focusing on the Solana blockchain. It provides users with real-time trading signals and market analysis, leveraging sophisticated algorithms to enhance trading accuracy and efficiency.

To use the app, users can navigate to the landing page where they will find an animated introduction to the platform. The app features a dashboard that displays live trading charts, AI-generated trading signals, and various statistics related to market performance. Users can explore the platform by clicking the "Explore Platform" button, which directs them to the dashboard where they can view detailed trading data and insights.

The app is built using modern web technologies, including TypeScript, React, and Next.js for the frontend, along with Framer Motion for animations. The user interface is styled with Tailwind CSS, ensuring a responsive and visually appealing design. The app also utilizes Lucide React icons for enhanced visual representation of features and data.

Key features of the VoidLoom app include:
- Real-time trading signals generated by AI, providing users with actionable insights for their trading strategies.
- An interactive trading chart that visualizes price movements and signals, allowing users to analyze market trends effectively.
- A user-friendly dashboard that aggregates trading data, including current prices, signal confidence levels, and historical performance.
- Animated elements that enhance user engagement and provide a dynamic experience.
- Options for early access and whitepaper requests, allowing users to stay informed about the platform's developments.

Overall, VoidLoom aims to empower traders with cutting-edge technology and insights, making it a valuable tool for anyone looking to navigate the cryptocurrency market effectively.

Crypto Trading Website

This application is a web-based project template designed to help developers quickly set up and customize their own applications. Built using Next.js, a popular React framework, the app leverages modern web technologies to provide a responsive and performant user experience.

To use the app, users can navigate through various sections including a dashboard, documentation, and an about page. The main interface welcomes users with a brief introduction and offers buttons to start using the dashboard or access the documentation. The dashboard provides an overview of user statistics, recent activities, and notifications, while the documentation section serves as a guide for getting started with the project.

Key technologies involved in the development of this application include TypeScript for type safety, React for building user interfaces, and Tailwind CSS for styling. The app also utilizes Lucide icons for visual elements and includes a theme provider for managing light and dark modes.

Key features of the application include:
- A responsive design that adapts to various screen sizes, ensuring usability on both desktop and mobile devices.
- A modern layout that follows best practices in web development, making it easy to extend and customize.
- A user-friendly navigation bar that allows quick access to different sections of the app.
- A dashboard that summarizes user activities and provides important notifications.
- Comprehensive documentation to assist users in understanding the project structure and next steps for development.

Overall, this application serves as a solid foundation for developers looking to create their own web applications efficiently.

Join Waitlist

Este aplicativo é um sistema de gestão completo, desenvolvido para produtores rurais, especialmente desenvolvido para otimizar suas operações, aumentar as vendas e melhorar a produtividade geral. O aplicativo oferece funcionalidades para gerenciar produtores, planos de assinatura, pagamentos de café e movimentação de estoque, garantindo a conformidade com as normas brasileiras de faturamento e relatórios financeiros.

Os usuários podem navegar por diversas seções, incluindo um painel de administração para administradores e uma interface do produtor para usuários individuais. O aplicativo possui um sistema de login que permite aos usuários acessar suas contas com segurança. Uma vez logados, os produtores podem gerenciar seus produtos, visualizar o histórico de vendas e atualizar seus perfis e informações bancárias.

Os principais recursos do aplicativo incluem:

1. **Campos de Entrada Validados**: O aplicativo inclui validação de dados específicos do Brasil, como CPF, números de telefone e endereços de e-mail, garantindo que todos os dados do usuário sejam formatados e validados corretamente.

2. **Gerenciamento de Assinaturas**: Os usuários podem escolher entre diferentes planos de assinatura adaptados às suas necessidades, com opções de faturamento mensal ou anual. O aplicativo também suporta pagamentos em café, permitindo que os produtores paguem por suas assinaturas com seus produtos.

3. **Registro de Auditoria**: O aplicativo mantém um registro detalhado das ações do usuário, proporcionando transparência e responsabilidade. Esse recurso é crucial para rastrear alterações e garantir a conformidade com as regulamentações financeiras.

4. **Funcionalidade de Importação em Massa**: Os produtores podem importar vários registros de uma só vez usando arquivos CSV, simplificando o processo de integração de novos usuários.

5. **Rastreamento do Histórico do Produtor**: O aplicativo rastreia o histórico de ações realizadas pelos produtores, permitindo que eles visualizem as alterações feitas em seus perfis, informações bancárias e movimentações de estoque.

6. **Design Responsivo**: O aplicativo foi projetado para ser compatível com dispositivos móveis, permitindo que os usuários gerenciem suas operações de qualquer dispositivo.

7. **Interface Amigável**: O aplicativo apresenta uma interface limpa e intuitiva, facilitando a navegação dos usuários por diferentes funcionalidades sem necessidade de treinamento extensivo.

As tecnologias envolvidas no desenvolvimento deste aplicativo incluem TypeScript e React para o frontend, garantindo uma experiência de usuário moderna e eficiente. O aplicativo também utiliza diversas funções utilitárias para validação e formatação de dados, aprimorando a funcionalidade geral e a confiabilidade do sistema.

Para usar o aplicativo, os usuários precisam criar uma conta ou efetuar login, caso já possuam uma. Uma vez logados, eles podem acessar diferentes seções com base em suas funções (administrador ou produtor) e utilizar os diversos recursos para gerenciar suas operações de forma eficaz. O aplicativo visa capacitar os produtores rurais, fornecendo-lhes as ferramentas necessárias para ter sucesso em um mercado competitivo.

Urban Wear Success

Urban Wear Success

An Escape Room. You need to solve the puzzle to escape

Fitness appointment app

Fitness appointment app

The Earth Exploration App is a web-based application designed to analyze subsurface geological layers using artificial intelligence and satellite technology. It allows users to select specific locations on a simulated map and initiate scans to gather data about the geological composition beneath the surface.

To use the app, users can interact with a map interface to select a location by clicking on it. The app provides three main functionalities through tabs: a map view for location selection, an analysis view that displays scan results, and a visualization view that presents a graphical representation of the subsurface layers. Once a location is selected, users can start the analysis by clicking a button, which simulates a scanning process that takes a few seconds to complete. After the scan, users can view detailed results about the geological layers, including their composition, density, and any anomalies detected.

The app is built using TypeScript and React, leveraging various libraries and components for UI elements, such as buttons, cards, and alerts. It utilizes a simulated map interface that allows users to drag and click to select locations, and it incorporates a canvas for visualizing subsurface data. The application also employs state management to handle user interactions and display dynamic content based on the scanning process.

Key features of the Earth Exploration App include:
- Interactive map for selecting locations.
- AI-driven analysis of geological layers.
- Detailed scan results with information on depth, composition, density, and anomalies.
- Visual representation of subsurface layers using a canvas.
- User-friendly interface with responsive design elements.

Overall, the Earth Exploration App serves as a powerful tool for educational and research purposes, enabling users to explore and understand the geological characteristics of various locations.

الذكاء الاصطناعي الخارق

Mobile grocery scanner

ibyh

The Cash Flow Companion app is designed to help freelancers manage their invoicing and payment processes more efficiently. The app allows users to upload invoices, receive payments quickly, and track their financial health, all while providing a user-friendly interface.

To use the app, freelancers can sign up for an account and go through an onboarding process that includes identity verification and linking their bank accounts. Once set up, users can upload invoices directly or connect their existing accounting platforms like QuickBooks or PayPal. The app offers two payout options: an instant advance of up to 85% of the invoice amount or a delayed payout of up to 97% within 48 hours. Users can also utilize a cash flow calculator to estimate their potential earnings based on pending invoices.

The app is built using modern web technologies, including TypeScript and React, and leverages Next.js for server-side rendering and routing. It features a responsive design that ensures a seamless experience across devices.

Key features of the Cash Flow Companion app include:

1. **Invoice Management**: Users can upload invoices in various formats and track their status.
2. **Instant Payments**: The app allows for quick access to funds, reducing the waiting time for payments.
3. **Cash Flow Calculator**: A built-in tool to help users estimate their potential earnings from pending invoices.
4. **Onboarding Process**: A structured onboarding experience that includes account creation, KYC verification, and bank linking.
5. **Dashboard**: A comprehensive dashboard that displays key statistics, including total advanced amounts, pending invoices, and average payout times.
6. **Subscription Plans**: Users can choose from various subscription plans tailored to their needs, with transparent pricing and no hidden fees.
7. **Integration with Accounting Platforms**: The app supports integration with popular accounting software, making it easier for users to manage their finances.

Overall, Cash Flow Companion aims to empower freelancers by providing them with the tools they need to get paid faster and manage their cash flow effectively.

This application is a boilerplate template built using Next.js, TypeScript, and Tailwind CSS, designed to provide a foundational structure for web development projects. It features a responsive layout with a sidebar, header, and main content area, making it suitable for various web applications.

To use the app, developers can clone the repository and run the development server using the command `npm run dev`. The application supports both light and dark themes, which can be toggled by users. Additionally, it offers multilingual support, currently available in English and French, allowing users to switch languages seamlessly.

The key technologies involved in this application include:
- Next.js for server-side rendering and routing.
- TypeScript for type safety and improved developer experience.
- Tailwind CSS for utility-first styling, enabling rapid UI development.
- Radix UI components for accessible and customizable UI elements.

Key features of the app include:
- A responsive sidebar that adapts to mobile and desktop views, providing navigation links.
- A header that includes breadcrumb navigation for better user orientation within the app.
- A user dropdown menu that allows users to change themes and languages, as well as log out.
- Custom animations and transitions for UI elements, enhancing the overall user experience.
- A language provider that manages translations and user preferences for language settings.

Overall, this boilerplate serves as a solid starting point for developers looking to create modern web applications with a clean and maintainable codebase.

Boilerplate layout

The NeuroServe app is designed to connect University of Maryland (UMD) student volunteers with individuals affected by neurodegenerative diseases and neurodevelopmental disabilities. The app serves as a platform for managing events, activities, and resources related to the organization's mission of providing compassionate service and promoting inclusion.

Users can navigate through various sections of the app, including a homepage that highlights the organization's mission, upcoming events, and opportunities for involvement. The app features a dedicated events page where users can view scheduled events, including details such as date, time, location, and category. Users can also access an activities page that outlines the different programs offered by NeuroServe, such as companion visits, memory baskets, and advocacy efforts.

To use the app, users can simply navigate through the different pages using the header links. The app is built using Next.js, a React framework, and utilizes TypeScript for type safety. The styling is managed with Tailwind CSS, allowing for a responsive and modern design. The app also incorporates various UI components for buttons, forms, and cards, enhancing the user experience.

Key features of the NeuroServe app include:
- A responsive layout that adapts to different screen sizes.
- A dynamic events management system that allows for easy viewing of upcoming events.
- An activities section that details the various programs offered by the organization.
- A contact page for users to reach out with inquiries or to express interest in volunteering.
- A user-friendly admin interface for managing events, which can be connected to a database for persistent data storage in a production environment.

Overall, the NeuroServe app aims to foster community engagement and support for individuals with neurological conditions while providing UMD students with meaningful volunteer opportunities.

Full website build

This application is a file tree component designed to mimic the functionality of a file explorer, similar to that found in code editors like Visual Studio Code. It allows users to navigate through a hierarchical structure of files and folders, providing a visual representation of their organization.

To use the app, users can click on folders to expand or collapse them, select files or folders to view their details, and create new files or folders directly within the tree structure. The app supports inline editing for creating and renaming items, with actions confirmed by pressing the Enter key or canceled with the Escape key. Users can also right-click on items to access a context menu that offers options for creating new files or folders, renaming, and deleting items.

The app is built using React and TypeScript, leveraging various UI components for buttons, inputs, context menus, and collapsible sections. It utilizes the Lucide icon library for visual elements and includes utility functions for sorting and managing the file tree structure.

Key features of the app include:
- A collapsible file tree structure that allows for easy navigation.
- Inline creation and renaming of files and folders directly within the tree.
- Context menu options for additional actions such as creating, renaming, and deleting items.
- Automatic sorting of items, ensuring folders are displayed before files and all items are sorted alphabetically.
- Visual feedback for selected items and the ability to view details of the selected file or folder.

Overall, this app provides a user-friendly interface for managing files and folders, making it a useful tool for developers and users who need to organize their projects efficiently.

VS Code like file tree component using ShadCN

This application is a personal portfolio website designed for Lotfi Elias, a student in the BTS SIO program specializing in network infrastructure and cybersecurity. The app showcases various projects, skills, and contact information, providing a comprehensive overview of Lotfi's professional journey and capabilities.

Users can navigate through different sections, including a dashboard that links to detailed pages about competencies, projects, and a contact form. The app features a terminal-style interface that simulates a command-line experience, enhancing user engagement. The terminal displays messages that guide users through the portfolio, culminating in a button that directs them to the dashboard.

Key features of the app include:
- A responsive design that adapts to various screen sizes.
- A typewriter effect for terminal output, creating an interactive experience.
- Cards for displaying project details, including objectives, tasks completed, and technologies used.
- A contact section with personal information and a button to initiate email communication.
- A news section that fetches real-time articles related to cybersecurity and EDR (Endpoint Detection and Response) solutions, ensuring users stay updated on relevant topics.

The application is built using modern web technologies, including React for the frontend, Next.js for server-side rendering and routing, and Tailwind CSS for styling. It utilizes various libraries such as Lucide for icons, Class Variance Authority for managing component variants, and Radix UI for accessible components. The app also incorporates a custom API to fetch and parse RSS feeds for the latest news articles.

Overall, this portfolio app serves as a dynamic platform for Lotfi Elias to present his skills and projects while providing an engaging user experience through its unique design and interactive elements.

Lotfi elias portfolio

Floating Particles that says "Alien of Extraordinary Abilities"

Alien of Extraordinary Abilities

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

The GemX app is designed to facilitate the safe-keeping and management of jewelry and precious items by generating digital receipts. Users can input detailed information about their items, including client details, item specifications, and transaction information, which are then stored securely. The app provides a user-friendly interface for creating and managing these receipts, ensuring that all necessary information is captured accurately.

To use the app, users start by filling out a form that includes fields for client name, email, phone number, address, item type, description, carat weight, purchase date, and more. The form is validated in real-time using the Zod library to ensure that all required fields are completed correctly. Once the form is submitted, the receipt is saved locally, and users can generate a PDF version of the receipt for their records.

The app is built using modern web technologies, including TypeScript, React, and Next.js, with Tailwind CSS for styling. It utilizes local storage to simulate database operations, allowing users to save and retrieve receipts without needing a backend server. The PDF generation is simulated for demonstration purposes, but in a production environment, a proper PDF library would be used.

Key features of the GemX app include:
- A comprehensive form for entering client and item details, with real-time validation.
- The ability to generate and download a PDF receipt.
- A draft feature that allows users to preview their receipt before finalizing it.
- User notifications for successful actions or errors using a toast notification system.
- A responsive design that adapts to different screen sizes, ensuring usability on both desktop and mobile devices.

Overall, the GemX app provides a streamlined solution for managing jewelry receipts, enhancing the security and organization of valuable items.

Excel Spreadsheet with AI. Enter a prompt with the data that you want to input and see the magic happening.

NOTE: You must provide your own OpenAI API key

The app is a Procurement Management System designed to streamline the procurement process, manage contracts, and oversee supplier relationships. It provides a comprehensive dashboard that allows users to view and analyze procurement requests, spending trends, supplier performance, and contract statuses.

Users can navigate through various sections of the app, including Procurement Requests, Spend Analysis, Category Management, Sourcing & Contracts, Supplier Management, and Reporting & Analytics. Each section is equipped with features that facilitate the management of procurement activities, such as filtering and searching for specific requests or suppliers, viewing detailed reports, and generating insights through charts and graphs.

The app utilizes modern web technologies, including React for the frontend, TypeScript for type safety, and various UI components for a responsive design. It also incorporates libraries like Recharts for data visualization and Lucide for icons, enhancing the user experience.

Key features of the app include:
- A dynamic dashboard that displays key performance indicators (KPIs) related to procurement activities.
- A procurement request management system that allows users to create, view, and filter requests based on status and priority.
- Spend analysis tools that visualize spending trends and distribution across categories.
- Supplier management functionalities that track supplier performance, risk levels, and contact information.
- A category management system that organizes procurement categories and subcategories, allowing for detailed analysis and reporting.
- An AI assistant that provides insights and answers to procurement-related queries.
- A customizable widget library that enables users to add, remove, and rearrange widgets on their dashboard for personalized analytics.

To use the app, users can log in to their accounts, navigate through the sidebar to access different sections, and utilize the search and filter functionalities to find specific information. The app is designed to be intuitive, making it easy for procurement professionals to manage their tasks efficiently.

Next.js x GSAP Starter

Next.js x GSAP Starter

The Grushevo Farm app is a web-based platform designed to provide users with comprehensive information about the Grushevo dairy farm, its products, and services. The app showcases the farm's commitment to producing high-quality, natural milk sourced from cows raised in an eco-friendly environment.

Users can navigate through various sections of the app, including details about the farm's milk products, the production process, quality control measures, customer testimonials, and contact information. The app features a clean and responsive design, ensuring a seamless experience across devices.

Key features of the app include:

1. **Product Information**: Users can learn about the different types of milk offered, including nutritional benefits, packaging options, and ordering details.

2. **Farm Overview**: The app provides insights into the history of the Grushevo farm, its location, and the welfare of the cows, emphasizing sustainable farming practices.

3. **Production Process**: Detailed descriptions of the milk production process are available, highlighting the steps taken to ensure quality and safety, from cow care to packaging.

4. **Quality Assurance**: The app outlines the rigorous quality control measures in place, including laboratory testing and adherence to national and international standards.

5. **Customer Testimonials**: Users can read reviews from satisfied customers, enhancing trust and credibility.

6. **Contact and Ordering**: The app includes a contact section where users can reach out for inquiries or place orders directly.

The app is built using modern web technologies, including TypeScript, React, and Next.js, ensuring a robust and efficient user experience. It utilizes Tailwind CSS for styling, providing a responsive and visually appealing interface. The app also incorporates smooth transitions and animations to enhance user engagement.

Overall, the Grushevo Farm app serves as a valuable resource for consumers interested in high-quality dairy products while promoting the farm's dedication to sustainability and animal welfare.

Grushevo Milk Website

The Yoventa app is a web-based platform designed to showcase advanced blockchain technology integrated with artificial intelligence operations. It serves as a landing page and main interface for users to explore the capabilities of Yoventa, emphasizing its innovative features and user engagement.

To use the app, users can navigate through a visually appealing interface that includes animations and interactive elements. The landing page features a prominent call-to-action button that allows users to explore the platform further. Users can also join a beta program by entering their email address, which is facilitated through a modal interface. The app provides real-time demonstrations of network operations, allowing users to interact with various functionalities such as processing transactions, AI analysis, and mining blocks.

The app is built using modern web technologies, including Next.js for server-side rendering and React for building user interfaces. It leverages Framer Motion for animations, Tailwind CSS for styling, and TypeScript for type safety. The app's architecture is designed to be responsive and visually engaging, utilizing a combination of CSS animations and canvas-based graphics to create a dynamic user experience.

Key features of the Yoventa app include:
- A visually striking landing page with animated elements and a gradient background.
- Interactive background animations that simulate a crypto-themed environment.
- A modal for early access sign-up, enhancing user engagement.
- Real-time network operation demonstrations, showcasing the app's capabilities.
- Responsive design that adapts to various screen sizes, ensuring accessibility on both desktop and mobile devices.
- Integration of various UI components, such as buttons and input fields, styled with Tailwind CSS for a modern look.

Overall, the Yoventa app aims to provide users with an immersive experience that highlights the potential of blockchain technology and AI, encouraging exploration and interaction with its features.

Falcon project requirements

This app is a Bingo game designed for users to play online. It allows players to generate a Bingo card, call numbers, and mark their cards as numbers are called. The app features a user-friendly interface that displays the Bingo card, the current number being called, and a list of previously called numbers.

To use the app, players start by launching the game, which automatically generates a new Bingo card. Players can then click the "Call Number" button to randomly select a number from the Bingo pool. As numbers are called, players can mark their cards by clicking on the corresponding cells. The game includes a center free space that is automatically marked. If a player successfully marks a complete row, column, or diagonal, a modal will appear congratulating them on their win and offering the option to start a new game.

The app is built using TypeScript and React, leveraging modern web technologies for a responsive and interactive experience. It utilizes components for modular design, including a Bingo card component, a number caller component, and a winner modal. The game logic is encapsulated within the BingoGame component, which manages the state of the game, including the Bingo card, marked cells, called numbers, and win conditions.

Key features of the app include:
- Dynamic Bingo card generation with a free space in the center.
- A number caller that randomly selects and displays called numbers.
- The ability for players to mark their cards and track called numbers.
- A modal that appears when a player wins, providing a celebratory message and the option to start a new game.
- Responsive design that adapts to different screen sizes for an optimal user experience.

Overall, this Bingo game app provides an engaging way for users to enjoy a classic game in a digital format.