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

...

CST hacker profile

This application is a document management system designed to facilitate the organization, storage, and management of various types of documents and folders. Users can create, rename, delete, and manage permissions for folders and files, making it suitable for collaborative environments such as offices or community organizations.

To use the app, users can navigate through a hierarchical folder structure, where they can click on folders to view their contents or create new folders and subfolders. The interface includes an action bar for quick access to common actions like creating new folders or uploading files. Users can also manage permissions for each document or folder, ensuring that access is appropriately restricted based on user roles.

The app is built using TypeScript and React, leveraging modern web development practices. It utilizes a component-based architecture, with reusable components for modals, action bars, breadcrumbs, and folder grids. The application state is managed using React's useState hook, allowing for dynamic updates to the UI as users interact with the document library.

Key features of the app include:
- A breadcrumb navigation system to help users track their location within the folder hierarchy.
- A folder grid display that visually organizes folders and files, allowing users to easily identify and access their documents.
- Modals for creating folders, uploading files, renaming items, deleting items, and managing permissions, providing a user-friendly interface for these actions.
- The ability to create subfolders and upload various file types, enhancing the app's functionality for document management.
- Responsive design elements to ensure usability across different devices.

Overall, this app provides a comprehensive solution for managing documents and folders, with a focus on user experience and accessibility.

Modern Library Design

A hero video dialog component for landing pages

Hero Video Dialog

Vis Timeline Gantt

Vis Timeline Gantt

Build a website

Bento grid

The Earth 3D Explorer app is an interactive visualization tool that allows users to explore a detailed 3D model of Earth. It provides an immersive experience where users can rotate, zoom, and pan around the planet, gaining insights into its features and statistics.

To use the app, users can interact with the 3D model using mouse controls: left-clicking to rotate the view, scrolling to zoom in and out, and right-clicking to pan. The app includes a control panel at the bottom of the screen, featuring buttons to toggle auto-rotation, reset the view, and zoom in or out. An information panel can be displayed to provide key facts about Earth, such as its diameter, surface area, population, age, and rotation period.

The app is built using modern web technologies, including React for the user interface, TypeScript for type safety, and Three.js for rendering the 3D graphics. The React Three Fiber library is utilized to integrate Three.js with React, allowing for a declarative approach to building 3D scenes. The Drei library enhances the experience with additional components like orbit controls and stars. The app also employs CSS for styling and layout, ensuring a visually appealing interface.

Key features of the Earth 3D Explorer app include:
- Interactive 3D model of Earth with realistic textures and atmospheric effects.
- Control panel for easy navigation and interaction.
- Auto-rotation feature for a dynamic viewing experience.
- Information panel providing educational content about Earth.
- Responsive design that adapts to different screen sizes.

Overall, the Earth 3D Explorer app serves as an engaging educational tool for users interested in learning more about our planet through an interactive 3D experience.

3D Earth View Demo

Animated Background with Beams

Beams Background

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

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

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

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

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

Collapsible sidebar

This application is a QR Code Generator that allows users to create QR codes for various types of content, including text, URLs, email addresses, phone numbers, SMS messages, Wi-Fi credentials, geographic locations, and vCard information. The app provides a user-friendly interface where users can input the necessary details for each type of QR code and generate a corresponding QR code image.

To use the app, users can select the type of content they want to encode in the QR code using a tabbed interface. Each tab contains specific input fields relevant to the selected content type. For example, the "Email" tab allows users to enter the recipient's email address, subject, and body of the email. Once the required information is filled out, the QR code is generated automatically, and users can preview it on the screen. Additionally, users have the option to download the generated QR code as an image file.

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 leverages various libraries such as QRCode for generating QR codes, Radix UI for accessible UI components, and Lucide for icons.

Key features of the app include:
- Support for multiple QR code content types (text, URL, email, phone, SMS, Wi-Fi, location, vCard).
- Automatic generation of QR codes based on user input.
- Preview of the generated QR code with the option to download it.
- Responsive design that adapts to different screen sizes.
- User-friendly interface with clear labels and placeholders for input fields.

Overall, this QR Code Generator app provides a comprehensive solution for users looking to create QR codes for various purposes in a simple and efficient manner.

Minimalist Card by kokonut/ui

Minimalist Card

A template for v0.

Scroll and hover animation

This application is a digital portfolio and press kit for Hassan Hakim, also known as Mr. Moda, a multimedia artist and creative director. The app showcases Mr. Moda's artistic journey, including his artwork, fashion designs, exhibitions, and collaborations, while providing a platform for potential clients and collaborators to connect.

Users can navigate through various sections, including an "About" page that details Mr. Moda's background and artistic influences, a "Portfolio" section that displays his artwork and fashion pieces, and a "Press" section highlighting media features. The app also includes a "Contact" form for inquiries, as well as social media links for further engagement.

To use the app, users can scroll through the homepage or click on navigation links to jump to specific sections. The app is built using Next.js, a React framework, and utilizes TypeScript for type safety. It employs Tailwind CSS for styling, ensuring a responsive and visually appealing design. The application also integrates Lucide icons for visual elements and includes a smooth scrolling feature for anchor links.

Key features of the app include:
- A hero section with a prominent introduction to Mr. Moda.
- An interactive portfolio with tabs for different categories such as artwork, fashion, and events.
- A gallery showcasing images of Mr. Moda's work, with modal dialogs for detailed views.
- A contact form that allows users to send messages directly to Mr. Moda.
- Social media links for Instagram, Twitter, Facebook, and LinkedIn, enabling users to connect with Mr. Moda across platforms.
- A timeline feature that outlines Mr. Moda's exhibitions and achievements over the years.

Overall, this application serves as a comprehensive digital presence for Mr. Moda, effectively showcasing his work and facilitating communication with interested parties.

Wavey Background

Wavey Background

This application is a furniture and fabric e-commerce platform designed to provide users with a seamless shopping experience. It allows users to browse, filter, and purchase a variety of furniture items and fabrics, including sofas and beds, while also offering features for managing favorites and shopping carts.

To use the app, users can navigate through different categories of products, view detailed information about each item, and add products to their shopping cart. The app supports user interactions such as adding items to favorites, applying promo codes, and managing delivery and payment options during checkout. Users can also view their recently viewed items and access customer support through contact information provided in the footer.

The application 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 to ensure usability across various devices. The app also integrates with a backend API to fetch product data, manage user sessions, and handle cart and favorites functionality.

Key features of the app include:
- A responsive layout that adapts to different screen sizes.
- A hero section showcasing promotional content and featured products.
- A catalog of furniture and fabric categories, with filtering options based on price, type, and availability.
- Detailed product pages with images, descriptions, and options for size and mechanisms.
- A shopping cart that allows users to view, update, and remove items, as well as apply promo codes for discounts.
- User authentication and session management to save favorites and cart items.
- A footer with contact information and links to important pages like "About Us" and "Delivery Information."

Overall, this application aims to enhance the online shopping experience for customers looking for quality furniture and fabrics, providing them with the tools they need to make informed purchasing decisions.

E commerce platform

The application is a comprehensive educational platform called Deviline OS Academy, designed to empower innovation and learning through a blend of theoretical knowledge and practical experience. It offers a variety of features aimed at students, educators, and industry professionals, facilitating collaboration, project development, and community engagement.

Users can explore a wide range of courses across various domains, including technology, business, science, engineering, arts, and design. The platform provides detailed course descriptions, including information about instructors, duration, pricing, and student ratings. Users can also filter courses by category and level, and search for specific topics or instructors.

The application includes a community section where users can connect, share insights, and collaborate on projects. Users can join groups based on their interests, participate in discussions, and share posts. The community feature encourages interaction among students, instructors, and industry experts, fostering a collaborative learning environment.

Key features of the application include:
- A user-friendly interface with a responsive design, ensuring accessibility across devices.
- A dynamic course catalog with detailed information on each course, including syllabi and instructor profiles.
- Community engagement tools, including group discussions, post sharing, and notifications.
- An admin dashboard for managing users, courses, projects, and community groups, ensuring smooth operation of the platform.
- User authentication and account management, allowing users to register, log in, and manage their profiles.
- A chatbot for instant assistance, providing users with information about courses, registration, and other inquiries.
- A theme toggle feature for users to switch between light and dark modes, enhancing user experience.

The application is built using modern web technologies, including TypeScript, React, and Next.js, with a focus on performance and scalability. It utilizes various libraries for animations, state management, and UI components, ensuring a smooth and engaging user experience. The platform also incorporates a custom cursor and animated backgrounds to enhance visual appeal.

Overall, Deviline OS Academy aims to create a holistic educational experience, bridging the gap between learning and real-world application, while fostering a vibrant community of learners and innovators.

Full website revamp

The Juancho IA app is an educational assistant designed specifically for students at the IED Juan Acosta Solera in Colombia. It leverages artificial intelligence to provide personalized support in various subjects, including mathematics, science, language, and social studies. The app aims to enhance the learning experience by offering explanations, answering questions, and assisting with homework.

To use the app, users can create an account by registering with their email, name, password, and grade level. Once registered, they can log in to access the chat interface where they can interact with Juancho, the AI assistant. Users can ask questions, seek help with assignments, and receive tailored responses based on their educational needs. The app also features a chat history, allowing users to revisit previous conversations.

The app is built using modern web technologies, including TypeScript and React for the frontend, and integrates with a backend powered by a serverless database. It utilizes the AI SDK for natural language processing, enabling Juancho to understand and respond to user queries effectively. The app also incorporates a responsive design, ensuring usability across various devices.

Key features of the Juancho IA app include:
- An interactive chat interface for real-time communication with the AI assistant.
- Auto-resizing text areas for input, enhancing user experience.
- User authentication and session management to maintain personalized interactions.
- A database for storing user data, chat sessions, and messages.
- Administrative functionalities for managing announcements, user support tickets, and design settings.
- A focus on educational content tailored to the Colombian curriculum, with a friendly and approachable tone.

Overall, the Juancho IA app serves as a valuable resource for students, providing them with the tools they need to succeed academically while fostering a supportive learning environment.

OpenAI and AI SDK Chatbot

User account creation via Clerk and payment through Stripe

Account Creation & Payment Page

This application is designed to manage and display attachments associated with a blog post. It allows users to view, download, and manage various file types, including documents, images, videos, and audio files. The app is particularly useful for content creators and administrators who need to organize and present supplementary materials alongside their articles.

To use the app, users can navigate to a blog post where attachments are displayed. Each attachment is represented with its name, type, and size, along with options to preview or download the file. If the user has administrative privileges, they can also edit the attachment's label and metadata or delete the attachment entirely. The interface includes a dropdown menu for these actions, and a dialog box for editing attachment details.

The app is built using TypeScript and React, leveraging various UI components for a responsive and user-friendly experience. Key technologies involved include React for component-based architecture, TypeScript for type safety, and a custom UI library for consistent styling and functionality. The app also utilizes Lucide icons for visual representation of file types and actions.

Key features of the app include:
- Display of attachment details such as name, type, and size.
- Options to download or preview attachments.
- Administrative capabilities for editing and deleting attachments.
- Dynamic rendering of attachments with support for expanding and collapsing the view to manage space effectively.
- Visual indicators for different file types using icons and color-coded badges.

Overall, this application enhances the user experience by providing a straightforward way to manage and interact with attachments related to blog content.

Simple attachment component

The app is an AI Analytics Dashboard designed to provide insights into user engagement and AI model performance within a learning platform. It allows users to visualize key metrics such as total revenue, active users, AI accuracy, and user growth through various interactive charts and graphs.

To use the app, users can navigate through different tabs including Overview, Analytics, and AI Reports. Each tab presents relevant data in a structured format, utilizing charts and cards to display information clearly. Users can toggle between light and dark themes for a personalized experience.

The app is built using modern web technologies including React for the user interface, TypeScript for type safety, and Recharts for data visualization. It also employs Tailwind CSS for styling, ensuring a responsive and visually appealing layout. The backend is powered by Supabase, which serves as the database and authentication provider, while Prisma is used for database interactions.

Key features of the app include:
- Real-time updates on active users and recent activities.
- Interactive charts displaying revenue trends, user growth, AI usage distribution, and performance metrics.
- A user-friendly interface with tabs for easy navigation between different data views.
- The ability to view detailed reports on AI model performance and user achievements.
- Recommendations for skill development based on user progress and performance.

Overall, the app serves as a comprehensive tool for monitoring and analyzing user engagement and AI performance, making it valuable for educators and administrators in a learning environment.

Wave text from iOS notifications.

by tulioportela.com
This application is a web-based interactive tool that utilizes physics simulation to create a dynamic and visually engaging experience with tags representing various topics. The tags can be clicked and are affected by gravity and other physical forces, providing a playful interaction model.

To use the app, users can simply click on the tags displayed on the canvas. The tags are designed to float and bounce around the screen, simulating a physics environment powered by the Matter.js library. The application is responsive and adjusts to different screen sizes, ensuring a consistent experience across devices.

The app is built using React and TypeScript, leveraging Next.js for server-side rendering and routing. It incorporates various UI components styled with Tailwind CSS, ensuring a modern and clean design. The physics simulation is handled by Matter.js, which is loaded dynamically to optimize performance.

Key features of the app include:
- Interactive tags that respond to user clicks and physics forces.
- A visually appealing canvas that showcases the tags in a playful manner.
- Responsive design that adapts to different screen sizes.
- Integration with Matter.js for realistic physics simulation.
- Clean and modern UI components built with React and styled using Tailwind CSS.

Overall, this application serves as an engaging way to explore topics through a fun and interactive interface, making it suitable for educational purposes or as a creative tool.

Tags Gravity Animation

Dynamic Table with filer and group by

Minimalist Profile Cards

The app is a dynamic digital newspaper called "The Fast and Real News" (TFARN), designed to deliver timely and accurate news coverage across the Indian subcontinent. It features a modern layout that incorporates custom fonts and a responsive design to enhance user experience on both desktop and mobile devices.

Users can navigate through various sections of the app, including breaking news, articles, and weather updates. The app utilizes Next.js for server-side rendering and React for building interactive user interfaces. It also employs Tailwind CSS for styling, ensuring a clean and responsive design.

Key features of the app include:

1. **Dynamic Layout**: The app features a flexible layout that adjusts based on the device being used, providing an optimal reading experience whether on mobile or desktop.

2. **Custom Fonts**: The app integrates custom fonts, including "PPEditorialNew-UltralightItalic" and "Inter," to enhance the visual appeal of the text.

3. **Breaking News Bar**: A dedicated section at the top of the app displays the latest breaking news, which rotates automatically but can be paused on hover.

4. **Search Functionality**: Users can search for articles using a search bar, which allows for quick access to specific news topics.

5. **Weather Widget**: The app includes a weather widget that provides current weather conditions and forecasts for various cities, utilizing geolocation to display relevant data based on the user's location.

6. **Article Pages**: Each article features a detailed view with a title, summary, publication date, and content. Users can also see related articles and share them via social media.

7. **Comment Section**: Users can engage with articles by leaving comments, which are stored locally and can be retrieved upon revisiting the article.

8. **Bookmarking**: Users can bookmark articles for later reading, with the app storing this information in local storage.

9. **Responsive Design**: The app is built to be fully responsive, ensuring that it looks and functions well on a variety of screen sizes.

Overall, the app aims to provide a reliable source of news while ensuring a user-friendly experience through its modern design and interactive features.

THE FAST AND REAL NEWS

This application is a comprehensive API documentation and management platform designed for developers to explore, test, and manage APIs within the Truck Gateway ecosystem. It provides a user-friendly interface for viewing API details, testing endpoints, and managing API versions and relationships.

Users can navigate through various sections, including API collections, individual API details, and deployment workflows. The application features a command menu for quick API searches, a user navigation dropdown for account management, and a status explanation dialog to clarify API statuses and categories.

Key features of the application include:

1. **API Documentation**: Each API has a dedicated page displaying its name, description, endpoint, business function, environment, version, and caching status. Users can view detailed documentation, including supported methods and request examples.

2. **Testing Console**: A built-in API test console allows users to send requests directly from the browser, view responses, and test different HTTP methods.

3. **Version Management**: Users can view the version history of APIs, including changes made in each version, and can select different versions to view their documentation.

4. **Deployment Workflow**: The application provides insights into the deployment status of APIs across different environments (development, QA, production), including server details and deployment history.

5. **API Relationships**: Users can visualize how APIs interact with each other through a relationship graph and view related APIs, including any environment warnings if dependencies are not aligned.

6. **Caching and Data Source Information**: The application details caching configurations and data source information for each API, helping users understand performance optimizations and data management.

7. **User Management**: The user navigation component allows users to manage their profiles, access settings, and log out.

8. **Filtering and Searching**: Users can filter APIs by status and environment, and search for specific APIs using a search bar.

The application is built using modern web technologies, including TypeScript, React, and Next.js, ensuring a responsive and dynamic user experience. It leverages various UI components for a consistent design and user-friendly interactions. The application also includes mock data for demonstration purposes, simulating real-world API management scenarios.

FIle upload made by KokonutUI designed for web applications, allowing users to easily upload files through a drag-and-drop interface or by selecting files from their device. It is built using React and TypeScript, leveraging the motion library for animations and the Lucide React icon library for visual elements.

To use the app, developers can integrate the FileUpload component into their React applications. The component accepts several props, including callbacks for handling successful uploads and errors, accepted file types, maximum file size limits, and a current file state. Users can interact with the component by dragging files into a designated drop zone or clicking to open a file selection dialog. The component provides visual feedback during the upload process, including progress indicators and success/error messages.

Key features of the app include:
- Drag-and-drop functionality for file uploads.
- Support for validating file types and sizes, with customizable error messages.
- Visual feedback during the upload process, including progress bars and success/error animations.
- A preview of the uploaded file, if applicable, along with its details such as name, size, and type.
- Options to replace or remove the uploaded file.
- Responsive design that adapts to different screen sizes and themes.

Overall, this file upload component enhances user experience by providing a modern, interactive interface for file management within web applications.

This application is a user interface designed for the Playwright testing framework, enabling developers to manage and execute end-to-end tests for web applications. The app provides a structured environment where users can view test actions, logs, and source code, facilitating easier debugging and test management.

To use the app, users can select a test from the sidebar, which displays a list of available tests. Upon selecting a test, the main panel updates to show a timeline of actions taken during the test execution, along with detailed logs and source code snippets. Users can interact with the timeline to select specific actions, which will highlight corresponding details in the actions tab. The app also allows users to toggle between light and dark themes for better visibility.

The application is built using TypeScript and React, leveraging Next.js for server-side rendering and routing. It utilizes Tailwind CSS for styling, providing a responsive and modern user interface. Key features include a timeline visualization of test actions, detailed logs of test execution, a source code viewer, and a sidebar for easy navigation between tests. Additionally, the app includes a theme toggle for user preference and a service worker handler to manage service worker registration errors.

Overall, this app serves as a comprehensive tool for developers working with Playwright, streamlining the testing process and enhancing productivity through its intuitive design and functionality.

Recreate UI from screenshot

This application is a visual demonstration tool that showcases animated graphics and code snippets using HTML5 canvas elements. It consists of two main components: an Animated Letters Card and a Figma Shapes Card, both of which are rendered on a web page.

The Animated Letters Card displays a grid of code snippets that animate in and out, creating a dynamic visual effect. Each cell in the grid randomly displays a character from a selection of JavaScript code snippets, with varying opacity and transition speeds. The animation is achieved using the requestAnimationFrame method, which ensures smooth rendering and updates based on the device's refresh rate.

The Figma Shapes Card features a collection of geometric shapes, including rounded rectangles and triangles, that animate between aligned and random states. The shapes are drawn on a canvas and exhibit movement, scaling, and rotation effects. The application uses a grid system to position the shapes, and they transition between organized and chaotic layouts at set intervals. The shapes also have selection indicators that highlight the currently selected shape, enhancing user interaction.

To use the app, users simply need to load the web page where the components are displayed. The animations will run automatically, providing a visually engaging experience without any user input required.

The application is built using TypeScript and React, leveraging the capabilities of functional components and hooks such as useEffect and useRef for managing side effects and references to DOM elements. The canvas rendering is handled through the 2D context API, allowing for detailed control over drawing operations.

Key features of the app include:
- Dynamic animation of code snippets with varying opacity and transition effects.
- Interactive geometric shapes that transition between aligned and random states.
- Smooth animations using requestAnimationFrame for optimal performance.
- A visually appealing design that combines coding elements with graphic shapes, making it suitable for educational or demonstration purposes.

Animated letter card

Togglable settings card

Toggle Settings

Animated Toolbar

Animated Toolbar

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

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

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

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

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

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

Animated Presentation Creation

The Heart & Horizon app is a web-based platform designed to showcase the journey of a nature photographer who captures the beauty of Europe's landscapes while engaging in acts of kindness. The app serves as a photo journal, blending stunning imagery with meaningful stories about the people encountered along the way.

Users can navigate through various sections of the app, including a homepage featuring a hero section with a captivating title and subtitle, a mission section that outlines the app's purpose, a gallery of featured stories, and a call-to-action section encouraging community involvement. The app also includes a blog where users can read detailed accounts of the photographer's adventures, highlighting the impact of small acts of kindness on local communities.

To use the app, users can simply visit the website, where they will find a responsive design that adapts to both desktop and mobile devices. The navigation bar allows easy access to different sections, including the journey, kindness missions, gallery, about, and contact pages. Users can also engage with the content by sharing stories on social media platforms.

The app is built using modern web technologies, including TypeScript, React, and Next.js, ensuring a smooth and efficient user experience. It utilizes Tailwind CSS for styling, providing a clean and visually appealing interface. The app also integrates Builder.io for visual editing capabilities, allowing for easy updates and content management.

Key features of the Heart & Horizon app include:
- A visually stunning hero section that captures user attention.
- A mission section that articulates the app's goals and values.
- A gallery showcasing breathtaking photography and stories of kindness.
- A blog section with detailed narratives of the photographer's experiences.
- Social media sharing options to promote community engagement.
- An admin dashboard for content management, allowing for easy updates and publishing of new stories.

Overall, the Heart & Horizon app aims to inspire users through the beauty of nature and the power of kindness, creating a community of like-minded individuals who appreciate both.

Heart and horizon blog

This application is designed to enhance the digital presence of executives, helping them transform their online profiles into powerful tools for influence and authority. The app provides a comprehensive system tailored for C-suite leaders, focusing on strategic positioning, asset development, platform optimization, and amplification of opportunities.

Users can navigate through various sections, including a homepage that highlights the value proposition, a detailed process section outlining the four-phase transformation system, and a testimonials section showcasing success stories from previous clients. The app also features a services section that breaks down the offerings into specific packages, each designed to meet different executive needs.

To use the app, users can apply for transformation through an application form, which is prominently displayed on the homepage. The app is built using modern web technologies, including TypeScript and React, ensuring a responsive and interactive user experience. It utilizes Tailwind CSS for styling, providing a clean and professional design that aligns with the branding of executive presence.

Key features of the app include:
- A structured site map that outlines the navigation and page hierarchy.
- Scroll logic that guides users through an emotional journey from identifying their problems to presenting solutions.
- User flows tailored to different traffic sources, ensuring that the experience is optimized for both cold and warm leads.
- Modular section goals that define the objectives and key components for each part of the website.
- A design system that includes typography, color palettes, and component showcases, ensuring consistency across the application.

Overall, this app serves as a vital resource for executives looking to enhance their digital footprint and leverage their online presence for greater professional opportunities.

Productized service website

CivicConnect is a mobile-first civic engagement application designed to connect citizens with government services and community resources. The app provides a platform for users to access information about government schemes, job opportunities, events, and community posts, fostering better communication between citizens and government officials.

To use the app, users can create an account or log in using their email or mobile number. Once logged in, they can navigate through various sections, including a social feed for community updates, a job board, and a calendar of upcoming events. Users can also manage their profiles, customize settings, and receive notifications about important updates and alerts.

The app is built using modern web technologies, including TypeScript, React, and Next.js, with a focus on responsive design and accessibility. It utilizes Tailwind CSS for styling, ensuring a clean and user-friendly interface. Key features include:

- A mobile-friendly layout with a bottom navigation bar for easy access to core functionalities.
- A social feed that displays posts from both official sources and community members, allowing for interaction through likes, comments, and shares.
- A comprehensive job board that lists local job opportunities and allows users to apply directly through the app.
- A section dedicated to government schemes, providing detailed information and eligibility criteria for various programs.
- Event management features that allow users to view and register for community events.
- A notification center that keeps users informed about application statuses, new messages, and emergency alerts.
- Accessibility options, including high contrast mode and text size adjustments, to cater to diverse user needs.

CivicConnect aims to empower citizens by providing them with the tools and information necessary to engage with their local government and community effectively.

Social media app frontend

The app is a logistics management platform designed to facilitate the booking and tracking of freight loads. It provides users, primarily truck drivers and logistics coordinators, with tools to find available loads, manage bookings, and receive real-time updates on weather and traffic conditions.

To use the app, users can navigate through a dashboard that features various components, including a multi-source freight board, a map view, load recommendations, and a notification center. Users can search for loads based on specific criteria, apply filters, and sort results by rate, distance, or pickup date. The app also allows users to book or reserve loads, manage their bookings, and communicate with brokers.

The app is built using modern web technologies, including TypeScript and React for the frontend, and it leverages various libraries and frameworks such as Next.js for server-side rendering and Tailwind CSS for styling. It integrates with external APIs for weather and traffic data, as well as freight load boards, to provide users with comprehensive information.

Key features of the app include:
- A multi-source freight board that aggregates loads from various logistics platforms.
- Real-time weather and traffic updates to help users make informed decisions.
- An interactive map view for visualizing load routes and tracking shipments.
- AI-powered load recommendations based on user preferences and historical data.
- A notification center that alerts users to high-value loads and important updates.
- A booking management system that allows users to manage their reservations and communicate with brokers.
- A broker rating system that enables users to provide feedback on their experiences with different brokers.

Overall, the app aims to streamline the logistics process, enhance communication between drivers and brokers, and improve the efficiency of load management.

AI driven logistics platform

Server actions and Zod validation.

Next.js + Forms

AI Input made by kokonut/ui

The app is an automated book generation platform called Auto$Mind, designed to help users create and publish books based on trending topics. It leverages various technologies, including TypeScript, React, and Next.js, to provide a seamless user experience.

Users can interact with the app through a dashboard that allows them to generate new books, view analytics, and manage settings. The app features a chatbot that assists users in navigating the platform and generating content. Users can initiate the book generation process by selecting topics, adjusting settings such as story length and style, and enabling auto mode for scheduled book generation.

Key features of the app include:

1. **Book Generation**: Users can generate books based on trending topics sourced from platforms like Reddit, Twitter, TikTok, and Google Trends. The app uses AI models to create engaging stories, titles, and descriptions.

2. **Cover Generation**: Users can generate custom book covers using AI, with options to select different art styles.

3. **Analytics Dashboard**: The app provides insights into book performance, including total sales, revenue, and user engagement metrics. Users can view trends over time and analyze performance by source.

4. **Real-Time Dashboard**: Users can monitor real-time events and statistics related to their generated books, including recent activities and overall performance.

5. **Settings Management**: Users can configure various settings, including API keys for integrations, AI model preferences, and content generation parameters.

6. **Redis Integration**: The app utilizes Redis for data storage and caching, ensuring fast access to generated content and analytics.

7. **Event Tracking**: The app tracks user interactions and events, providing insights into usage patterns and performance metrics.

To use the app, users can sign up, log in, and navigate through the dashboard to access different functionalities. They can initiate book generation, customize settings, and view analytics to optimize their content creation process. The app is designed to be user-friendly, with a focus on automating the book generation workflow while providing valuable insights into performance.

Automated book generator

The SWIFT Transfer application is a comprehensive platform designed to facilitate the management and demonstration of SWIFT API functionalities for financial institutions. This application allows users to view, manage, and interact with various SWIFT transfer messages and APIs, providing a user-friendly interface for developers and financial professionals.

To use the application, users can navigate through different sections, including Transfers, Messages, API Demos, and Settings. Each section is equipped with features that allow users to perform specific tasks, such as searching for transfers, validating messages, and managing API credentials. The application also includes demo functionalities that showcase the capabilities of SWIFT APIs, such as payment tracking, compliance checks, and message conversions between MT and MX formats.

The application is built using modern web technologies, including TypeScript and React for the frontend, and utilizes various UI components for a consistent user experience. It leverages APIs for backend interactions, allowing for real-time data processing and validation.

Key features of the SWIFT Transfer application include:

1. **Transfer Management**: Users can view and filter transfer records based on various criteria, including status and reference numbers. The application provides a detailed view of each transfer, including sender and receiver information, amounts, and statuses.

2. **Message Validation**: Users can input SWIFT messages to validate their formats and ensure compliance with SWIFT standards. The application provides feedback on the validity of the messages and highlights any errors or warnings.

3. **API Demos**: The application includes demo sections that allow users to interact with various SWIFT APIs, such as the GPI Tracker and Transaction Screening APIs. Users can test these APIs with sample data and view the results in real-time.

4. **User Settings**: Users can manage their account settings, including API credentials, notification preferences, and security settings. The application provides a secure environment for managing sensitive information.

5. **Responsive Design**: The application is designed to be responsive, ensuring a seamless experience across different devices, including desktops, tablets, and mobile phones.

Overall, the SWIFT Transfer application serves as a valuable tool for financial institutions looking to leverage SWIFT APIs for enhanced operational efficiency and compliance in their financial messaging processes.

Prowide swift example

Fitmart mobile app

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

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

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

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

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

Interactive-3D-Infographic

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

This application is a file management system designed to facilitate the organization, upload, and manipulation of files and folders. Users can navigate through a structured file system, create new folders, upload files, and perform various actions on files such as renaming, moving, and deleting.

To use the app, users can interact with a user-friendly interface that displays files and folders in either a list or grid view. They can search for specific files using a search bar, select multiple files for bulk actions, and navigate through folders using a breadcrumb navigation system. The app also supports drag-and-drop functionality for file uploads.

The application is built using TypeScript and React, leveraging various UI components for a responsive and interactive experience. Key technologies include React hooks for state management, Lucide icons for visual representation of file types, and date-fns for date formatting. The UI components are structured using a card layout, tables for file listings, and modals for user interactions such as file uploads and confirmations.

Key features of the app include:
- File and folder creation, renaming, and deletion.
- File upload functionality with progress indication.
- Search functionality to quickly locate files.
- Support for multiple file types, including images, documents, and code files.
- Bulk actions for selecting and manipulating multiple files at once.
- Preview functionality for viewing file details before taking action.
- Responsive design that adapts to different screen sizes.

Overall, this file management app provides a comprehensive solution for users to manage their files efficiently and intuitively.

The TimoPro app is a comprehensive digital solution designed to assist entrepreneurs in building high-converting Shopify stores. It offers a range of services including Shopify development, dropshipping setup, print-on-demand services, and store optimization, all aimed at enhancing the online presence and profitability of businesses.

Users can navigate the app to explore various sections such as services, portfolio, testimonials, and blog posts. 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 and visually appealing design.

Key features of the TimoPro app include:

1. **Service Overview**: A detailed breakdown of services offered, including descriptions and benefits, allowing users to understand how TimoPro can meet their specific needs.

2. **Portfolio Showcase**: A gallery of successful projects that highlights the quality and effectiveness of TimoPro's work, complete with links to live sites.

3. **Testimonials Section**: Client success stories and reviews that provide social proof of TimoPro's capabilities and the positive impact on businesses.

4. **Blog**: A resource for users to access valuable insights, tips, and strategies related to Shopify and e-commerce, helping them stay informed about industry trends.

5. **Contact and Consultation**: An easy-to-use contact form for inquiries and a call-to-action for booking free consultations, facilitating direct communication with the TimoPro team.

6. **Live Chat Feature**: A real-time chat option that allows users to connect with support for immediate assistance, enhancing customer service.

The app is designed to be intuitive, making it easy for users to find the information they need and engage with TimoPro's services effectively. Overall, TimoPro aims to empower entrepreneurs by providing the tools and support necessary to succeed in the competitive e-commerce landscape.

Portfolio website design

Property Sale Prices Table

Property Sale Prices Table

This app is a development tool designed to analyze and document the export patterns of React components within a project. It provides a user-friendly interface for developers to understand how components are exported, ensuring consistency and best practices in their codebase.

To use the app, developers can navigate to the main page where the SDK documentation is displayed. The documentation includes examples of different export patterns, such as default exports and named exports, helping users to follow recommended practices. The app also features a script that scans specified directories for component files, analyzes their export types, and generates a report summarizing the findings.

The technologies involved in this app include TypeScript and React for building the user interface, as well as Node.js for the backend script that performs the analysis. The app leverages file system operations to read and analyze component files, providing insights into the structure of the codebase.

Key features of the app include:
- A documentation component that showcases examples of export patterns.
- A scanning script that identifies and categorizes component exports into default, named, mixed, and no exports.
- A detailed report that highlights the number of each export type and any errors encountered during the analysis.
- Recommendations for standardizing export patterns to improve code consistency and maintainability.

Overall, this app serves as a valuable resource for developers looking to enhance their understanding of component exports in React and to maintain a clean and organized codebase.

Crystal AI Platform

Tea Farm Integration Tool for Identifying Nitrogen Fixing Crops

Nitrogen Fixing Farm Map