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 app is a simple music player that allows users to upload and play audio files directly from their device. It features a user-friendly interface that includes a play/pause button and a file upload option. The app is built using TypeScript and React, leveraging modern web technologies to create a responsive and interactive experience.

To use the app, users can click the play/pause button to either start or stop playback of the selected audio file. If no file has been uploaded, clicking the button will prompt the user to select an audio file from their device. Once a file is selected, the app will load the audio and allow playback. The status of the player is indicated through a status text that updates based on whether a file is uploaded and whether the audio is currently playing.

Key features of the app include:
- File upload functionality that supports audio files.
- Play and pause controls for audio playback.
- Visual feedback through icons that change based on the player's state (upload, play, pause).
- Responsive design that adapts to different screen sizes.
- Clean and modern user interface with hover effects and transitions.

The app utilizes React's state management to handle the playback state and file selection, and it employs the HTML audio element for audio playback. The use of TypeScript ensures type safety and improved developer experience. Overall, this app provides a straightforward solution for users looking to play audio files in a web environment.

Simple music player

This application is designed to facilitate the upload and management of game thumbnails, specifically allowing users to upload both vertical and horizontal images. It supports various image formats, including JPG, PNG, GIF, and WebP, and provides functionality for handling both static and animated images.

To use the app, users can navigate to the edit page for a specific game, where they will find a form that includes options for uploading thumbnails. Users can select files using a file input interface, which validates the file type and size (with a maximum limit of 5MB). Once a file is selected, a preview is displayed, and if the file is an animated GIF or WebP, users can play or pause the animation directly within the interface.

The app is built using React and TypeScript, leveraging various UI components for a consistent user experience. Key technologies include React for the frontend, along with utility functions for image transformation using Cloudflare's image processing capabilities. The application also utilizes state management to handle file uploads and form submissions effectively.

Key features of the app include:
- File upload functionality with validation for accepted formats and size limits.
- Preview of uploaded images, including support for animated GIFs and WebP formats.
- Play and pause controls for animated images.
- A form that allows users to specify whether a game should always appear in the "Top" or "New" sections.
- Integration with Cloudflare for image transformation, ensuring that uploaded images are optimized for display.

Overall, this application provides a user-friendly interface for managing game thumbnails, ensuring that images are properly handled and displayed according to user preferences.

Animated thumbnail support

The application is a comprehensive platform designed to assist users in optimizing their resumes and managing job applications. It provides features for generating tailored prompts and call scripts, facilitating live calls with speech recognition, and maintaining a contact list for effective communication.

Users can create an account and log in to access their personalized dashboard. The dashboard allows them to manage their resumes, view job applications, and track call history. The application integrates with Supabase for backend services, including user authentication, data storage, and real-time updates.

Key features of the app include:

1. **Resume Optimization**: Users can upload their resumes, select target job roles, and receive an ATS-optimized version tailored to specific job descriptions.

2. **Job Listings**: The app provides a searchable database of job listings, allowing users to filter by job type, location, and other criteria.

3. **Call Management**: Users can initiate and manage calls, with features for recording conversations and taking notes. The app also generates call scripts based on user-defined parameters.

4. **Speech Recognition**: The application includes a speech recognition feature that transcribes conversations in real-time, enhancing the user experience during calls.

5. **Contact Management**: Users can add, edit, and delete contacts, as well as maintain a history of interactions with each contact.

6. **Data Export**: Users can export their contacts and call history for offline access or backup.

7. **User-Friendly Interface**: The app features a clean and intuitive UI built with React and Tailwind CSS, ensuring a smooth user experience.

The application is built using Next.js for server-side rendering and routing, TypeScript for type safety, and Supabase for database management. It leverages various UI components from Radix UI and custom components for a cohesive design. The app is responsive and optimized for both desktop and mobile devices, ensuring accessibility for all users.

This application is an e-commerce platform called TideTreasures, designed to offer a variety of ocean-inspired jewelry products. It provides users with functionalities to browse products, manage their accounts, and complete purchases, while also allowing administrators to manage product listings and orders.

Users can create accounts, log in, and view their order history. The application features a shopping cart where users can add items, adjust quantities, and proceed to checkout. The checkout process includes validation of order data and simulates order placement, with a focus on user experience through loading states and error handling.

The admin interface allows for the management of products imported from AliExpress, including the ability to toggle product visibility, delete products, and import new items. The application also includes a dashboard for viewing analytics related to product performance and order statistics.

The technologies involved in the development of this application include TypeScript, React, Next.js for server-side rendering, and Supabase for backend services, including authentication and database management. The UI components are built using a custom design system with Tailwind CSS for styling.

Key features of the application include:
- User authentication and account management.
- Product browsing with filtering and sorting options.
- Shopping cart functionality with item quantity adjustments.
- Checkout process with order validation and confirmation.
- Admin dashboard for product and order management.
- Integration with AliExpress for product imports.
- Responsive design for optimal viewing on various devices.

Overall, TideTreasures aims to provide a seamless shopping experience for users while offering robust management tools for administrators.

Email Change

This app is a user interface component designed to display a tabbed navigation system with a dark mode toggle feature. It allows users to switch between different tabs labeled "Overview," "Integrations," "Activity," "Domains," "Usage," and "Monitoring." The primary function of the app is to provide a visually appealing and interactive way for users to navigate through various sections of content.

To use the app, users can hover over the tab options to see a highlight effect, which indicates the currently hovered tab. Clicking on a tab will activate it, changing the visual style to indicate the active selection. Additionally, users can toggle between light and dark modes by clicking a button located in the top right corner of the interface, which changes the overall theme of the app.

The app is built using TypeScript and React, leveraging hooks such as useState and useEffect for managing state and side effects. It utilizes a card component for layout and styling, and it incorporates icons from the Lucide React library for the dark mode toggle button. The design is responsive and includes smooth transitions for hover and active states, enhancing the user experience.

Key features of the app include:
- Tabbed navigation for easy access to different sections.
- Hover effects that provide visual feedback on user interactions.
- Active tab indication to show the currently selected section.
- Dark mode toggle for user preference in visual themes.
- Responsive design that adapts to various screen sizes.

Overall, this app serves as a functional and aesthetic component for applications requiring tabbed navigation and theme customization.

The Universal File Manager is a comprehensive application designed for efficient file management across various storage drives, including local, network, cloud, and USB drives. It provides users with a seamless interface to upload, download, delete, move, and share files while maintaining a clear overview of their storage space and file organization.

To use the app, users can navigate through a user-friendly interface that allows them to view files in either grid or list mode. They can easily drag and drop files for upload, search for specific files, and sort them based on different criteria such as name, size, or date. The app also supports multi-file selection for batch operations, enhancing productivity.

The application is built using modern web technologies, including React for the frontend, TypeScript for type safety, and Next.js for server-side rendering and API routes. It utilizes Radix UI components for accessible and customizable UI elements, Tailwind CSS for styling, and Zustand for state management. The app also integrates with various libraries such as Framer Motion for animations and Lucide React for icons.

Key features of the Universal File Manager include:

1. **File Operations**: Users can upload, download, delete, move, and copy files with ease. The app provides real-time feedback on upload progress and handles errors gracefully.

2. **Drive Management**: The app supports multiple drive types, allowing users to manage files across different storage solutions. Users can view drive health, total space, and available space.

3. **User Preferences**: Users can customize their experience by setting preferences for themes, language, and default view modes.

4. **Error Handling**: The app includes robust error handling mechanisms that log errors and provide users with actionable feedback.

5. **Update Management**: The app periodically checks for updates and notifies users when new versions are available, ensuring they have access to the latest features and improvements.

6. **Responsive Design**: The application is designed to be responsive, providing a consistent experience across various devices and screen sizes.

Overall, the Universal File Manager aims to simplify file management tasks while providing users with powerful tools to organize and access their files efficiently.

Nexora sim design

The app is a comprehensive online furniture and fabric store designed to provide users with a seamless shopping experience. It allows customers to browse, filter, and purchase a wide range of furniture items, including sofas and beds, as well as various fabric options for upholstery.

To use the app, users can navigate through different sections, including a catalog of products, fabric categories, and detailed product pages. They can add items to their cart, manage their favorites, and proceed to checkout. The app also features a responsive design, ensuring usability across various devices.

The app is built using modern web technologies, including React for the frontend, Next.js for server-side rendering and routing, and TypeScript for type safety. It utilizes CSS for styling, with a focus on responsive design and user-friendly interfaces. The app also integrates with local storage to maintain cart and favorites state across sessions.

Key features of the app include:
- A dynamic product catalog with filtering options based on categories, price ranges, and product types.
- Detailed product pages that showcase images, descriptions, and pricing, along with options for size and additional features like lifting mechanisms for beds.
- A shopping cart that allows users to view, update, and remove items, as well as apply promo codes for discounts.
- A favorites section where users can save products for later.
- A responsive design that adapts to different screen sizes, ensuring a consistent experience on mobile and desktop devices.
- Integration with local storage to persist user preferences and cart items.

Overall, the app aims to provide a user-friendly platform for purchasing furniture and fabrics, with a focus on quality, variety, and customer satisfaction.

E commerce platform

The Custom Rule Builder app is designed to facilitate the creation and management of custom rules for automating tasks related to expense management and accounting. Users can define specific conditions under which certain actions should be taken, allowing for tailored automation that meets their unique business needs.

To use the app, users can navigate through a user-friendly interface that includes a sidebar for easy access to different sections, such as home, wallet, tasks, and trips. The main content area allows users to create new rules or edit existing ones. Users can add conditions by selecting fields, operators, and values, and can specify actions to be taken when those conditions are met. The app supports multi-select options for values and provides special handling for specific fields like "Memo" and "Receipts."

The app is built using modern web technologies, including TypeScript and React for the frontend, along with libraries such as Lucide React for icons and Framer Motion for animations. This combination allows for a responsive and interactive user experience.

Key features of the Custom Rule Builder app include:
- A sidebar navigation for quick access to various sections.
- A rule creation panel that allows users to define "if" and "then" conditions.
- Support for multi-select values and special handling for specific fields.
- Validation to ensure that rules are complete before saving.
- The ability to edit existing rules and view a list of saved rules with timestamps for last updates.
- A search functionality to quickly find specific rules.

Overall, the Custom Rule Builder app streamlines the process of creating and managing automation rules, enhancing efficiency in expense management and accounting tasks.

Automation rule setup

The She Shield app is a comprehensive safety initiative designed specifically for female students at SRM University. Its primary goal is to create a secure environment where women can thrive academically and personally. The app provides various features aimed at enhancing safety awareness, offering emergency assistance, and educating users about their rights.

To use the app, users can navigate through its intuitive interface to access emergency features, safety resources, and legal information. Key functionalities include an SOS button for immediate assistance, location sharing capabilities, and a directory of emergency contacts. Users can also explore safety laws and campus policies, as well as access educational materials and community support resources.

The app is built using modern web technologies, including TypeScript and React, with a focus on responsive design to ensure usability across devices. It employs Tailwind CSS for styling, providing a clean and user-friendly interface. The app also integrates toast notifications for user feedback and alerts.

Key features of the She Shield app include:
- A dedicated safety alert system for immediate assistance on campus.
- Access to a comprehensive directory of emergency contacts, including campus security and local helplines.
- Educational resources detailing safety laws and rights for women.
- Community support features, allowing users to connect with peers and mentors.
- Emergency response protocols and personal safety strategies.
- Downloadable resources, including safety guides and training materials.

Overall, the She Shield app serves as a vital tool for empowering women at SRM University, ensuring they have the knowledge and resources necessary to navigate their campus safely.

Women safety website

The Dunkin' Ducks 3x3 Basketball Tournament app is designed to facilitate the organization and participation of a community-led basketball tournament in Bangalore. The app provides a comprehensive platform for players to register, view schedules, check team information, and understand tournament rules and prizes.

Users can navigate through various sections of the app, including tournament details, schedules, teams, rules, prizes, and FAQs. The app features a user-friendly interface built with React and Next.js, utilizing TypeScript for type safety. It employs Tailwind CSS for styling, ensuring a responsive design that adapts to different screen sizes.

Key features of the app include:

1. **User Registration and Authentication**: Users can create accounts, log in, and manage their profiles. The app integrates with Supabase for authentication and data management.

2. **Tournament Information**: Users can access detailed information about the tournament, including dates, location, and format.

3. **Schedule and Game Management**: The app displays a schedule of games, allowing users to view match timings, locations, and participating teams. Admins can manage game schedules, including adding new games and updating existing ones.

4. **Team Information**: Users can view details about participating teams, including team members and their respective skill levels.

5. **Rules and Regulations**: The app provides a clear outline of tournament rules, scoring systems, and conduct expectations to ensure a fair and enjoyable experience for all participants.

6. **Prizes and Awards**: Information about prizes for winners and participants is readily available, encouraging engagement and competition.

7. **Community Engagement**: The app fosters community interaction by allowing users to join WhatsApp groups based on their location and skill level, promoting regular games and socialization among players.

8. **Admin Dashboard**: An admin panel is available for tournament organizers to manage users, games, and analytics, ensuring smooth operation of the tournament.

Technologies involved in the development of the app include:
- React and Next.js for building the user interface and handling routing.
- TypeScript for type safety and improved developer experience.
- Tailwind CSS for styling and responsive design.
- Supabase for backend services, including authentication and database management.

Overall, the Dunkin' Ducks 3x3 Basketball Tournament app aims to create an inclusive and engaging environment for basketball enthusiasts of all skill levels, promoting community and sportsmanship.

This application is a Game Card Generator that allows users to create and customize their own game card assets. It provides a user-friendly interface for designing cards by adjusting various settings and content elements.

To use the app, users can start by selecting text elements to edit, such as the title, subtitle, and bottom text. Each text element can be customized in terms of font size, font family, font weight, color, and alignment. Users can also upload images to be included on the card, adjusting their scale and position as needed. The card's overall appearance can be modified by changing the outer and inner border colors, border radius, and body color. Additional effects like shadows and gradients can also be applied to enhance the card's design.

The app is built using React and TypeScript, leveraging various UI components for a responsive and interactive experience. It utilizes Tailwind CSS for styling, ensuring a modern and clean design. Key features include a color picker for selecting colors, sliders for adjusting sizes and positions, and a dialog for editing text elements. Users can export their final designs as PNG images for easy sharing or printing.

Overall, the Game Card Generator provides a comprehensive set of tools for creating personalized game cards, making it suitable for game developers, designers, and hobbyists alike.

Custom Game Card Maker

Card Grid

A charging widget template - light & dark mode.

Charging Widget

This application is a personal portfolio website designed to showcase the skills, projects, and experiences of an AI engineer and web developer. The app is built using Next.js, a React framework, and utilizes TypeScript for type safety. It incorporates Tailwind CSS for styling, allowing for a responsive and modern design, and leverages Framer Motion for smooth animations and transitions.

Users can navigate through various sections of the portfolio, including an introduction (Hero), About Me, Experience, Skills, Education, Certifications, Projects, Languages, and Contact. Each section is designed to provide detailed information about the user's professional background, technical skills, and personal projects.

Key features of the app include:

1. **Smooth Scrolling**: The app implements smooth scrolling functionality, allowing users to navigate between sections seamlessly.

2. **Responsive Design**: The layout adapts to different screen sizes, ensuring a consistent experience across devices.

3. **Animated Elements**: Various components utilize animations for visual appeal, including typing effects, hover animations, and background particle effects.

4. **Project Showcase**: The Projects section categorizes different works, allowing users to filter by type (AI, Web Apps, Tools) and view detailed descriptions, technologies used, and links to live demos or GitHub repositories.

5. **Contact Information**: A dedicated section provides users with contact details, including email and phone, facilitating easy communication.

6. **Three.js Integration**: The app features a 3D scene created with Three.js, adding an interactive visual element to the portfolio.

To use the app, users can navigate through the sections using the fixed navigation bar or scroll down the page. Each section is designed to be informative and visually engaging, providing a comprehensive overview of the user's capabilities and projects. The application is structured to be easily maintainable and extendable, allowing for future updates and enhancements.

This app is a comprehensive token analytics platform designed for users to track, analyze, and manage cryptocurrency tokens, particularly those created on the pump.fun platform. It provides real-time insights into token performance, market trends, and trading activities, allowing users to make informed decisions.

To use the app, users can navigate through a user-friendly interface that includes features such as sorting and filtering tokens based on various metrics like market cap, volume, and unique traders. Users can also set alerts for specific tokens to be notified of significant price changes. The app supports both light and dark themes, enhancing user experience based on personal preferences.

The app is built using modern web technologies, including React for the frontend, TypeScript for type safety, and Tailwind CSS for styling. It utilizes various libraries such as Radix UI for accessible components, Zustand for state management, and Dexie.js for local database management. The app also integrates with WebSocket for real-time data updates and employs AI capabilities for enhanced user interaction through a chatbot feature.

Key features of the app include:
- Real-time token tracking and analytics.
- Customizable alerts for price changes and trading activities.
- A favorites system to easily access preferred tokens.
- Advanced filtering and sorting options to find tokens based on user-defined criteria.
- An onboarding guide to help new users navigate the app.
- A donation button for users to support the developers.
- A roadmap and changelog to keep users informed about upcoming features and updates.

Overall, this app aims to provide a powerful and intuitive platform for cryptocurrency enthusiasts to engage with token data effectively.

Pump.Investments

The Device Mockup Generator is a web application designed to create professional mockups of various devices, including smartphones, tablets, and laptops. Users can upload screenshots, customize device types and styles, and download or share the generated mockups.

To use the app, users start by uploading an image file, which can be in PNG, JPG, or WEBP format. They can then select the type of device they want to use for the mockup, choose a frame color, and adjust the scale and rotation of the mockup. The app also allows users to customize the background with solid colors, gradients, or images, and to add watermarks if desired. Additionally, users can apply animations to the mockup, such as floating or rotating effects.

The application is built using TypeScript and React, leveraging libraries such as html-to-image for image generation and Lucide for icons. It employs a responsive design to ensure usability across different devices, and it includes a theme toggle feature for light and dark modes.

Key features of the Device Mockup Generator include:
- Uploading and previewing screenshots.
- Selection of device types (iPhone, iPad, MacBook) and models.
- Customization options for frame color, scale, rotation, and perspective.
- Background customization with color, gradient, or image options.
- Watermark addition with adjustable opacity and position.
- Animation effects for dynamic mockups.
- Download functionality for generated mockups in various formats (PNG, JPG).
- Social media sharing options for generated mockups.

Overall, the Device Mockup Generator provides a comprehensive tool for designers and developers to create visually appealing device mockups for presentations, portfolios, or marketing materials.

Device mockup generator

The Circuit System app is an interactive visualization tool designed for creating and managing event driven systems. Users can add components, connect them, and visualize the relationships between different elements in a circuit. The app provides a user-friendly interface that allows for easy manipulation of components and connections, making it suitable for both educational and professional use.

To use the app, users can click anywhere on the canvas to add a new component, select from different types such as commands, events, or views. Components can be dragged to reposition them, and connections can be created by clicking on the connection points of different components. Users can also edit component names, delete components or connections, and export the circuit diagram as a PNG image or copy the diagram's Mermaid syntax to the clipboard.

The app is built using modern web technologies, including React for the user interface, TypeScript for type safety, and Tailwind CSS for styling. It leverages the html2canvas library for exporting diagrams as images and includes animations for a more engaging user experience. The app also features a toast notification system to provide feedback on user actions, such as successful exports or copy actions.

Key features of the Circuit System app include:
- Interactive canvas for adding and managing components.
- Support for multiple component types with customizable properties.
- Drag-and-drop functionality for repositioning components and panning the canvas.
- Connection management to visualize relationships between components.
- Export options to save diagrams as PNG images or copy Mermaid syntax.
- Responsive design with a clean and modern user interface.

Overall, the Circuit System app serves as a powerful tool for visualizing and managing circuit diagrams, making it accessible for users with varying levels of expertise.

Circuit board image

card-multi-styles

card-multi-styles

This application is designed to assist users in generating personalized content for their prospects using artificial intelligence. It provides a user-friendly interface for creating AI-generated columns that can enrich prospect data with tailored messages, insights, and other relevant information.

To use the app, users can navigate through various components, including a sidebar for managing AI column creation, a prospects table for viewing and selecting data, and a prompt assistant for generating specific prompts. Users can choose from pre-defined templates or create custom prompts to guide the AI in generating content. The app also allows users to enrich existing columns by filling in missing data or cleaning existing values.

The application is built using React and TypeScript, leveraging various libraries such as Radix UI for UI components, Lucide for icons, and Class Variance Authority for managing class variants. Key features include:

1. **AI Column Creation**: Users can create AI-generated columns by selecting templates or defining custom prompts.
2. **Enrichment Options**: The app allows users to enrich existing columns by filling in missing data or cleaning existing values based on AI-generated insights.
3. **Prompt Assistant**: A dedicated assistant helps users craft effective prompts for AI generation, ensuring the output meets their specific needs.
4. **Dynamic UI Components**: The app utilizes various UI components such as dialogs, toasts, and tables to provide a seamless user experience.
5. **Real-time Feedback**: Users receive immediate feedback on their selections and inputs, including warnings for potential data overwrites and credit usage.

Overall, this application streamlines the process of generating personalized content and enriching prospect data, making it a valuable tool for sales and marketing professionals.

AI Columns Design

Motopagina

The app is an e-commerce platform called GB COMET, designed to provide users with a seamless online shopping experience. It allows users to browse products, manage their accounts, and complete purchases through various payment methods. The app is built using Next.js and Supabase, leveraging TypeScript for type safety and React for a dynamic user interface.

To use the app, users can navigate through different sections such as products, categories, and their account. They can add items to their cart, proceed to checkout, and select their preferred payment method, including mobile money, bank transfers, and credit/debit cards. The app also includes an admin dashboard for managing products, orders, and user accounts.

Key technologies involved in the development of the app include:
- Next.js for server-side rendering and routing.
- Supabase as the backend service for database management and authentication.
- TypeScript for type safety and improved developer experience.
- Tailwind CSS for styling and responsive design.
- Playwright for end-to-end testing.

Key features of the app include:
- User authentication and account management, allowing users to create accounts, log in, and manage their profiles.
- A product catalog with categories, search functionality, and product details.
- A shopping cart that enables users to add, remove, and update product quantities.
- A checkout process that collects shipping information and processes payments.
- An admin dashboard for managing products, orders, and user roles.
- Email notifications for order confirmations and updates.
- Responsive design for optimal viewing on both desktop and mobile devices.

Overall, GB COMET aims to deliver a comprehensive e-commerce solution that is user-friendly and efficient, catering to a wide range of shopping needs.

This application is an interactive 3D periodic table and laboratory simulation designed to help users explore chemical elements and conduct virtual experiments. The app allows users to visualize elements in a three-dimensional space, providing an engaging way to learn about their properties and interactions.

To use the app, users can navigate between two main tabs: the Periodic Table and the Experiment Workspace. In the Periodic Table tab, users can filter elements by category, state, period, and group, and select elements to view detailed information. The Experiment Workspace allows users to combine selected elements and simulate chemical reactions, visualizing the results in real-time.

The application is built using modern web technologies, including TypeScript and React for the frontend, along with Three.js for 3D rendering through the React Three Fiber library. The app also utilizes various components from the @react-three/drei library to enhance the 3D experience, such as lighting, camera controls, and environment settings.

Key features of the app include:
- A fully interactive 3D periodic table where users can hover over elements to see their details and click to select them.
- Filtering options to narrow down elements based on specific criteria.
- A workspace for combining elements and running simulated chemical reactions, complete with visual feedback on the reaction process.
- Detailed information panels for each element, including atomic number, symbol, atomic weight, and descriptions of their properties and uses.
- Visual representations of chemical reactions, including molecular structures and energy displays.

Overall, this app serves as an educational tool for students, educators, and anyone interested in chemistry, providing a unique and immersive way to learn about the elements and their interactions.

Periodic table project

My car maintain

This application is an interactive platform designed to showcase the beauty and intricacies of Arabic letters through a collection of decorated texts. It serves as both an aesthetic and literary reference, highlighting the rhythm and phonetic harmony of the Arabic language. Users can explore various Arabic letters, each accompanied by a unique poem and a decorative phrase that emphasizes its cultural significance.

To use the app, users can navigate through a homepage that introduces the concept of Arabic letters and provides links to explore individual letters. Each letter has its own dedicated page featuring its symbol, a decorative phrase, a six-line poem, and a description that elaborates on its meaning and significance. Users can also switch between languages, including Arabic, English, and Chinese, to enhance accessibility.

The app is built using modern web technologies, including TypeScript and React for the frontend, and utilizes a context API for managing language preferences. It employs Tailwind CSS for styling, ensuring a responsive and visually appealing user interface. The application also incorporates a language switcher component, allowing users to easily change the displayed language.

Key features of the app include:
- A comprehensive list of Arabic letters, each with detailed descriptions and artistic representations.
- Interactive elements that allow users to explore the cultural and aesthetic aspects of each letter.
- Multilingual support, enabling users to view content in Arabic, English, and Chinese.
- A user-friendly interface that emphasizes the beauty of Arabic script through visual design and layout.

Overall, this application aims to celebrate the Arabic language and its letters, providing users with an engaging and educational experience.

Arabic Letters Project

This application is a personal portfolio website designed to showcase the skills, experience, and projects of a full-stack developer named Ilias Boutaleb. The app is built using Next.js, a React framework, and utilizes various modern web technologies including TypeScript, Tailwind CSS for styling, and Framer Motion for animations.

Users can navigate through different sections of the portfolio, including Home, About, Experience, Skills, Projects, and Contact. The Home section features a dynamic hero background that can be configured to display images from Unsplash, enhancing the visual appeal of the site. The About section provides a personal summary and background information, while the Experience section outlines professional roles and responsibilities. The Skills section highlights technical and professional competencies, and the Projects section showcases various projects with descriptions and technologies used.

The Contact section includes a form for users to send messages directly to Ilias, with validation and error handling implemented to ensure a smooth user experience. The application also tracks user sessions and page views using Upstash, a serverless database, allowing for analytics on user engagement.

Key features of the app include:
- Responsive design that adapts to different screen sizes.
- Smooth scrolling and animated transitions between sections.
- A visitor counter that updates in real-time to show the number of active users.
- A session tracker that displays the duration of the user's session and the number of active users.
- Integration with Unsplash for dynamic background images.
- A contact form with validation and submission handling.

To use the app, users can simply navigate through the sections using the header menu or scroll down the page. The app is deployed on Vercel, ensuring fast load times and efficient performance. Developers can contribute to the project by modifying the code in the GitHub repository, with changes automatically synced to the deployed version.

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 diagnostics, data center management, network monitoring, security settings, and more. The main dashboard displays key performance indicators in visually appealing cards, along with a live performance chart that updates periodically. Users can toggle between light and dark themes, and the interface includes interactive elements such as buttons, sliders, and tooltips for enhanced usability.

Key features of the app include:
- Real-time monitoring of system metrics with dynamic updates.
- A visually engaging performance chart that displays CPU, memory, and network usage.
- A sidebar navigation menu for easy access to different sections of the dashboard.
- Notifications and alerts for system events, such as security scans and bandwidth spikes.
- User-friendly components like badges, avatars, and action buttons for quick interactions.
- Customizable themes to suit user preferences.

The app utilizes various technologies, including React for component-based architecture, TypeScript for type safety, and Tailwind CSS for responsive design and styling. The use of hooks like useEffect and useState allows for efficient state management and side effects handling, ensuring a smooth user experience.

Futuristic Dashboard

This app is a Tip Calculator designed to help users easily calculate tips based on their bill amounts and selected service categories. It features a user-friendly interface that allows users to input their bill amount, select a service type, and choose a tip percentage, either from predefined options or by customizing their own percentage.

To use the app, users can start by entering the bill amount in a designated input field. They can then select a service category from a dropdown menu, which provides suggested tip percentages based on common dining experiences. If users prefer, they can opt for a custom percentage using a slider. The app dynamically calculates the tip amount and total cost, displaying the results in a clear format. Users can also choose to round the total up or down, with the app providing the corresponding tip amounts for each option.

The app is built using React and TypeScript, leveraging hooks for state management and debouncing input values to optimize performance. Key features include a responsive design that adapts to different screen sizes, a retro-themed visual style with animated backgrounds, and real-time calculations that update as users interact with the input fields and sliders.

Additional functionalities include error handling for invalid bill amounts, a clear button to reset the input, and a visually appealing layout that enhances user experience. The app also incorporates a canvas element to create animated money bills and a retro grid background, adding a unique aesthetic to the overall design.

The Dither Labs app is a GPU-accelerated platform designed for applying dithering effects to images and videos. It allows users to upload media files, select from a variety of dithering algorithms, and customize settings to achieve desired visual effects. The app supports over 20 dithering algorithms, including Floyd-Steinberg, Atkinson, and Bayer, each with unique characteristics.

To use the app, users can upload an image or video file through a user-friendly interface. Once the media is loaded, they can select a dithering algorithm and adjust various parameters such as threshold, diffusion factor, color reduction, and matrix size. The app provides real-time previews of the effects, allowing users to compare the original and dithered versions side by side. Users can also save their settings as presets for future use, making it easy to apply consistent effects across different projects.

The app is built using modern web technologies, including React and Next.js for the frontend, and utilizes WebGL for efficient rendering of dithering effects. Key features include:

1. **Media Upload**: Users can upload images (JPG, PNG, WebP) or videos (MP4, WebM) for processing.
2. **Dithering Algorithms**: A selection of over 20 dithering algorithms to choose from, each providing different visual styles.
3. **Customizable Settings**: Users can fine-tune dithering effects with adjustable parameters, including brightness, contrast, saturation, and gamma.
4. **Real-Time Preview**: Instant feedback on changes made to settings, with the ability to compare original and processed media.
5. **Preset Management**: Users can save, load, and delete presets, allowing for easy reuse of settings.
6. **History Controls**: Undo and redo functionality to manage changes made during the editing process.
7. **Download Options**: Users can download their processed images or videos in various formats.

The app is designed to be intuitive and responsive, providing a seamless experience for both casual users and professionals looking to enhance their digital media with dithering effects.

Customizable Dithering Platform

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

This application is a comprehensive customer support and billing management system designed to facilitate interactions between users and service providers. It integrates with Discord for real-time support messaging and utilizes Stripe for payment processing and subscription management.

Users can create accounts, log in, and manage their subscriptions through a user-friendly dashboard. The application features a customer portal where users can view their subscription details, billing history, and manage their account settings. Additionally, users can send support requests directly through a form that posts messages to a designated Discord channel.

Key features of the application include:

1. **User Authentication**: Users can register, log in, and manage their accounts securely. The application uses JWT for session management and password hashing for security.

2. **Subscription Management**: Users can view their active subscriptions, cancel or reactivate them, and manage billing information through a dedicated customer portal.

3. **Discord Integration**: The application allows users to send support messages directly to a Discord channel, enabling real-time communication with support staff.

4. **Analytics Dashboard**: Administrators can access an analytics dashboard to track sales performance, revenue trends, and customer metrics.

5. **Usage-Based Billing**: The application supports metered billing, allowing users to track their usage of services and associated costs.

6. **Notifications**: Users can manage their notification preferences for various events, such as subscription updates and payment notifications.

7. **Admin Features**: The application includes an admin panel for managing user accounts, viewing authentication logs, and configuring system settings.

Technologies involved in the development of this application include:

- **Frontend**: Built with React and TypeScript, utilizing libraries such as Radix UI for accessible components and Lucide for icons.
- **Backend**: Node.js with Express for server-side logic, integrated with Stripe for payment processing and Discord for messaging.
- **Database**: A mock user database is used for demonstration purposes, but in a production environment, a real database would be implemented.
- **State Management**: React's built-in state management along with hooks for managing user sessions and form submissions.

To use the application, users can navigate to the login or registration page to create an account. Once logged in, they can access their dashboard to manage subscriptions, view analytics, and send support requests. Administrators can access additional features for managing users and viewing logs. The application is designed to be intuitive and responsive, ensuring a seamless user experience across devices.

Discord Support Integration

The app is a presentation tool designed to showcase the features and benefits of a data tool called Swapt, which utilizes one-time use QR codes to enhance customer engagement, capture valuable data, and increase product reviews. Users can navigate through various sections of the presentation, each highlighting different aspects of the Swapt service, including its functionality, case studies, and user testimonials.

To use the app, users can interact with the presentation by clicking through sections using navigation buttons or keyboard shortcuts. The app supports fullscreen mode for an immersive experience. Each section features animated transitions and visual effects, enhancing the overall presentation quality.

The app is built using modern web technologies, including TypeScript, React, and Tailwind CSS for styling. It also leverages libraries such as Framer Motion for animations and Three.js for 3D visual effects, creating an engaging and interactive user experience.

Key features of the app include:
- A dynamic presentation format that allows users to explore different sections at their own pace.
- Interactive particle animations that respond to user input, creating a visually appealing backdrop.
- Detailed case studies demonstrating the effectiveness of Swapt in real-world applications.
- A responsive design that adapts to different screen sizes, ensuring usability on both desktop and mobile devices.
- The ability to toggle fullscreen mode for a more focused viewing experience.

Overall, the app serves as an effective platform for presenting the Swapt service, combining informative content with engaging visuals to capture the audience's attention.

Logo particles (v0 + aws)

The Cagayan de Oro BPO Labor Market Analytics app is designed to provide comprehensive insights into the labor market trends within the Business Process Outsourcing (BPO) sector in Cagayan de Oro City. The app serves as an analytics dashboard that aggregates various data points related to employment, salary ranges, retention and turnover rates, and demographic analytics, specifically tailored for the BPO industry.

Users can navigate through the app to access different sections, including a summary of trends, detailed analytics on salary ranges, retention and turnover statistics, and comparisons of major BPO companies in the region. The app also features an AI-generated insights report that offers predictive analytics and strategic recommendations based on current market data.

The app is built using modern web technologies, including TypeScript and React for the frontend, with a focus on responsive design using Tailwind CSS for styling. It utilizes Recharts for data visualization, allowing users to interact with various charts and graphs that represent the data effectively. The app also incorporates a PDF export functionality, enabling users to generate reports based on the displayed analytics.

Key features of the app include:
- A dashboard header that provides context and updates on the data being presented.
- A trends summary section that highlights key statistics such as average BPO salaries, employment figures, and retention rates.
- Detailed analytics components that break down salary ranges by position level and analyze retention and turnover trends.
- A comparison table that allows users to evaluate different BPO companies based on various metrics.
- An AI analytics report that provides insights into the labor market, including growth projections and skill demand forecasts.
- The ability to export reports in PDF format for offline access and sharing.

Overall, the Cagayan de Oro BPO Labor Market Analytics app is a valuable tool for stakeholders in the BPO sector, including job seekers, employers, and policymakers, providing them with the necessary data to make informed decisions in a rapidly evolving labor market.

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.

Simple Dialog with animated enter/exit which is subtle but sexy!

Animated unauthorized page

The FootballAI app is a comprehensive platform designed for football enthusiasts to predict match outcomes using advanced statistical analysis and machine learning techniques. The app allows users to input team statistics, analyze recent forms, and generate predictions for upcoming matches.

To use the app, users can sign up for an account to access personalized features, including saving predictions and tracking accuracy over time. The main interface includes a prediction form where users can enter details about the home and away teams, such as goals scored, goals conceded, recent form, league position, and player availability. Users can also specify weather conditions that may impact the match.

The app is built using modern web technologies, including Next.js for server-side rendering and React for building user interfaces. It utilizes Supabase as a backend service for database management, allowing for real-time data storage and retrieval. The UI components are styled with Tailwind CSS, providing a responsive and visually appealing design.

Key features of the FootballAI app include:
- Match prediction generation based on user-inputted team statistics and historical data.
- A prediction accuracy tracker that displays overall accuracy and league-specific performance.
- A user-friendly interface with tabs for easy navigation between different sections, such as prediction input, history, and insights.
- The ability to toggle between advanced and expert modes, offering deeper analytical insights for users who want more detailed information.
- Integration with ElevenLabs for generating audio narratives of match predictions, enhancing the user experience through auditory feedback.
- A mobile-responsive design that adapts to different screen sizes, ensuring usability across devices.

Overall, the FootballAI app aims to provide an engaging and informative experience for users interested in football predictions, combining statistical rigor with user-friendly design.

Football Match Predictor

The app is a comprehensive web-based platform designed for managing various aspects of a digital portfolio, including projects, tasks, and customer relationships. It provides users with tools to create, edit, and organize their portfolio items, manage tasks, and interact with customers effectively.

To use the app, users can navigate through a dashboard that features a sidebar for easy access to different sections such as portfolio management, task management, customer management, and settings. Users can create new projects or tasks, edit existing ones, and filter or search through their items. The app also supports markdown for content creation, allowing users to format their text easily.

The app is built using Next.js, a React framework, and utilizes TypeScript for type safety. It employs various UI components from libraries like Radix UI and Lucide for icons, ensuring a modern and responsive design. The styling is managed with Tailwind CSS, providing utility-first styling capabilities.

Key features of the app include:
- Portfolio Management: Users can create and manage projects and blog posts, including features like image uploads, tagging, and status tracking.
- Task Management: Users can create, edit, and organize tasks with options for priority, due dates, and assignees.
- Customer Management: A dedicated section for managing customer relationships, including a searchable customer database and options for adding new customers.
- Theming: Users can customize the app's appearance with light and dark modes, as well as select accent colors.
- Notifications: The app includes a notification system to keep users informed about important updates and actions.
- Responsive Design: The app is designed to work seamlessly across different devices, with a mobile-friendly interface.

Overall, the app serves as a powerful tool for individuals and teams looking to manage their digital presence and workflow efficiently.

This application is a comprehensive VPN service designed to provide users with secure, fast, and reliable internet access while protecting their online privacy. It offers a user-friendly interface that allows individuals to easily connect to a global network of servers, ensuring they can access content from anywhere in the world.

To use the app, users can download it from the App Store or Google Play, or access it on various platforms including Windows and Mac. Once installed, users can create an account, select their preferred server location, and connect with a single click. The app supports multiple devices simultaneously, allowing users to protect their privacy across smartphones, tablets, and computers.

The application is built using modern web technologies, including TypeScript and React for the frontend, and utilizes Tailwind CSS for styling. It features a responsive design that adapts to different screen sizes, ensuring a seamless experience on both mobile and desktop devices.

Key features of the app include:
- Military-grade encryption to secure user data and online activities.
- High-speed connections optimized for streaming and browsing.
- A global network of servers in over 90 countries, providing users with extensive coverage.
- A strict no-logs policy, ensuring that user activities are not tracked or stored.
- Support for multiple devices, allowing users to connect up to six devices simultaneously.
- 24/7 customer support to assist users with any issues or inquiries.

The app also includes sections for user testimonials, frequently asked questions, and a transparent pricing model with various subscription plans to cater to different user needs. Overall, this VPN service aims to deliver a secure and efficient online experience for its users.

Zoom会议集成

This application is a mini e-commerce management system designed for administrators to manage product listings. It allows users to create, read, update, and delete products, as well as manage user authentication and image uploads.

To use the app, users must first sign up or log in using their email and password. Once authenticated, they can access the product management interface where they can view a list of products, add new products, edit existing ones, and delete products as needed. The application also supports image uploads for products, allowing users to provide visual representations of their items.

The app is built using several technologies, including React for the frontend, TypeScript for type safety, and Supabase as the backend service for database management and authentication. The application utilizes PostgreSQL for data storage, with Row Level Security (RLS) policies to ensure that only authenticated users can perform actions on the product data.

Key features of the app include:
- User authentication with sign-up and login functionality.
- A product management interface that allows users to view, add, edit, and delete products.
- Image upload functionality for product images, with support for manual URL input.
- Real-time notifications for user actions, such as successful product creation or errors.
- Form validation to ensure that product data meets specified criteria before submission.
- A responsive design that adapts to different screen sizes for usability on various devices.

Overall, this application provides a comprehensive solution for managing an e-commerce product catalog, with a focus on user experience and data integrity.

Supabase Mini Ecommerce

This application is a web-based proposal platform designed for Builtt, specifically tailored for a project with Tesla. The app serves as a comprehensive proposal document that outlines the project details, phases, benefits, and pricing, providing a structured and visually appealing format for presenting information to clients.

Users can navigate through various sections of the proposal, including an introduction to Builtt, project specifics, phases of development, benefits, cost estimates, payment terms, optional services, and terms and conditions. The app features a table of contents that allows users to quickly jump to different sections, enhancing usability.

The application is built using modern web technologies, including TypeScript and React for the frontend, with Next.js as the framework. It utilizes Tailwind CSS for styling, ensuring a responsive and visually consistent design. The app also incorporates utility functions for class name management and smooth scrolling behavior for navigation.

Key features of the app include:
- A hero section that introduces the proposal with branding elements.
- Multiple sections detailing the project, including descriptions, timelines, and benefits.
- A pricing list that dynamically calculates totals and discounts.
- A project timeline that visually represents the phases of development.
- Smooth scrolling and navigation through a sticky table of contents.
- Responsive design that adapts to various screen sizes.

Overall, this application provides a structured and interactive way to present project proposals, making it easier for clients to understand the scope, benefits, and costs associated with the project.

Vertical Nav Sections

Minimal SignUp Page Design

Minimal SignUp Page Design

Interactive React components designed to enhance user experience with password inputs and eye icons that track mouse movements. The primary components include a customizable password input field and an eye icon that can toggle between open and closed states, with the ability to follow the mouse cursor.

The components are built using TypeScript and React. It utilizes Tailwind CSS for styling, ensuring a responsive and modern design. Key features include:

Created by Juan Manuel Acebal - 2025

Eye toggle password input

Apple Rings Activity reproduction

Apple Activity Card

The MACA app is a comprehensive educational platform designed to provide users with access to a variety of educational resources, career guidance, and internship opportunities. The app aims to empower students and individuals seeking to enhance their academic and professional journeys.

Users can navigate the app through a user-friendly interface that includes a main navigation menu, which allows easy access to key sections such as Home, About Us, Programs, Announcements, News, and Contact Us. The app is built using modern web technologies, including TypeScript, React, and Next.js, ensuring a responsive and dynamic user experience.

Key features of the MACA app include:

1. **Educational Programs**: Users can explore various programs offered by MACA, including Online Learning, Career Counseling, Internship Programs, and Online Recruitment. Each program page provides detailed descriptions, benefits, and links to further information.

2. **Announcements and News**: The app keeps users updated with the latest announcements and news articles related to MACA, ensuring they are informed about important events and opportunities.

3. **User-Friendly Navigation**: The app features a responsive navigation menu that adapts to different screen sizes, providing a seamless experience on both desktop and mobile devices.

4. **Contact and Support**: Users can easily reach out for support or inquiries through a dedicated contact page, which includes a contact form and essential contact information.

5. **Team Information**: The app showcases the team behind MACA, including their roles and expertise, helping users connect with the right resources and support.

6. **Dynamic Content Management**: The app allows administrators to manage content dynamically, including adding, editing, and deleting announcements, news articles, and educational programs.

7. **Multilingual Support**: The app supports both English and Khmer languages, making it accessible to a broader audience.

The MACA app is designed to be a one-stop solution for students and professionals looking to enhance their educational and career prospects, providing them with the tools and resources they need to succeed.

Maca education website

This app is an interactive love story experience designed for couples, specifically tailored to celebrate and reminisce about their relationship. The app guides users through a series of chapters that include memories, games, and heartfelt messages, creating a personalized journey that highlights their unique bond.

To use the app, users start by entering a password to unlock the experience. Once inside, they are greeted with an opening scene that sets the tone for the journey. The app features multiple chapters, each containing different activities such as adding memories, playing games like Tic Tac Toe and a memory matching game, and writing vows or love notes. Users can navigate through the chapters, interact with various elements, and even listen to background music that enhances the emotional experience.

The app is built using modern web technologies, including TypeScript and React for the frontend, with animations powered by Framer Motion. It utilizes local storage to save user-generated memories and comments, ensuring that the experience is both interactive and persistent. The app also incorporates audio management for sound effects and background music, enhancing the overall ambiance.

Key features of the app include:
- A welcoming opening scene with animations and sound effects.
- Multiple chapters that guide users through different activities, including memory sharing, games, and writing vows.
- Interactive games like Tic Tac Toe and a memory matching game, complete with difficulty settings.
- The ability to add, filter, and delete memories, along with a timeline of shared experiences.
- A section for users to write and save their vows, along with a comments feature for sharing love notes.
- Background music and sound effects that play throughout the experience, creating an immersive atmosphere.

Overall, this app serves as a digital keepsake for couples, allowing them to celebrate their love story in a fun and engaging way.

Romantic gift website

The Consumption Deviation app is designed to track and analyze deviations in the consumption of raw materials during the production process. It provides users with insights into how actual material usage compares to standard quantities defined in the Bill of Materials (BOM), helping to identify inefficiencies and areas for improvement.

To use the app, users can navigate through a user-friendly interface that allows them to filter and search for specific consumption records based on various criteria such as product, material, production unit, and status. The app displays a comprehensive dashboard that includes statistics on total deviations, critical and warning statuses, and visual representations of data through charts and tables.

The app is built using modern web technologies, including TypeScript and React, with Next.js as the framework for server-side rendering and routing. It utilizes various UI components from a design library, ensuring a responsive and visually appealing user experience. The app also incorporates data visualization libraries like Recharts to present consumption trends and distributions effectively.

Key features of the Consumption Deviation app include:
- A dashboard that summarizes key statistics related to material consumption deviations.
- Filtering options to narrow down the displayed data based on user-selected criteria.
- Detailed tables that list consumption records, including standard and actual quantities, deviation amounts, and statuses.
- Interactive charts that visualize trends in consumption deviations over time and the distribution of deviations across different materials.
- A dialog feature that provides detailed insights into specific deviations, including potential causes and recommended actions for improvement.
- Export functionality to generate reports in various formats such as Excel, PDF, and CSV.

Overall, the Consumption Deviation app serves as a valuable tool for production managers and quality control teams to monitor material usage, enhance operational efficiency, and reduce waste in manufacturing processes.

Iranian logistics website