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

v0 by Vercel

...

This application is a Concrete Estimation Tool designed to facilitate the creation and management of project estimations for concrete-related projects. It allows users to input client and project details, manage team members, and generate detailed cost estimations based on various line items.

To use the app, users can start by filling out the estimation form, which includes fields for client name, project name, and currency selection. Users can add multiple line items representing different materials, specifying their descriptions, quantities, rates, and units. The app automatically calculates the subtotal, tax, and total cost based on the inputted line items. Users can also manage their teams by inviting members, updating roles, and creating or leaving teams.

The app is built using TypeScript and React, leveraging various technologies such as Next.js for server-side rendering and API routes, and a context API for state management related to team functionalities. The user interface is designed with a focus on usability, featuring components for forms, buttons, cards, and alerts, all styled for a cohesive experience.

Key features of the app include:
- Dynamic estimation form for inputting project details and line items.
- Automatic calculation of costs, including subtotal, tax, and total.
- Team management capabilities, allowing users to create teams, invite members, and manage roles.
- Integration with a backend service for saving estimations and fetching data, with fallback to mock data if the backend is unavailable.
- User-friendly notifications and alerts to inform users of actions and errors.

Overall, this app serves as a comprehensive tool for professionals in the construction industry to streamline their estimation processes and enhance team collaboration.

Estimation frontend build

The World Bank Data Explorer is a web application designed to facilitate the exploration and visualization of World Bank data across various countries and indicators. The app allows users to select specific countries and indicators, define a year range, and generate visual representations of the data in the form of charts and tables.

To use the app, users can start by selecting countries and indicators from the provided dropdown menus. They can also specify a year range for the data they wish to analyze. Once the selections are made, users can generate charts that visualize the data trends over the selected years. The app supports multiple chart types, including area, line, bar, stacked bar, and pie charts. Additionally, users can export the visualized data as a CSV file or download the chart as a JPG image.

The application is built using modern web technologies, including TypeScript and React for the frontend, and it utilizes Next.js for server-side rendering and API routes. The UI components are designed with a focus on usability and accessibility, leveraging libraries such as Lucide for icons and Radix UI for components like popovers and checkboxes.

Key features of the World Bank Data Explorer include:
- A responsive and user-friendly interface for selecting countries and indicators.
- Real-time data fetching from the World Bank API to ensure up-to-date information.
- The ability to filter and search for specific topics and indicators.
- Dynamic chart generation based on user selections, with options to switch between different chart types.
- Data export functionality for both charts and raw data in CSV format.
- Error handling and loading states to enhance user experience during data fetching.

Overall, the World Bank Data Explorer serves as a powerful tool for researchers, students, and anyone interested in analyzing global development data.

MsgGPT is an AI chat assistant application inspired by ChatGPT, designed to facilitate interactive conversations with users. The app allows users to engage in chat sessions, save chat histories, and manage multiple conversations seamlessly.

To use MsgGPT, users can start a new chat session, type their messages in the input field, and receive responses from the AI. The application features a sidebar that displays the chat history, allowing users to select previous conversations or initiate new ones. Users can also save titles for their chats, which helps in organizing and retrieving past discussions.

The app is built using modern web technologies, including TypeScript, React, and Next.js, ensuring a responsive and dynamic user experience. It utilizes the OpenAI API for generating chat responses, enabling real-time interaction. The user interface is styled with Tailwind CSS, providing a clean and customizable design.

Key features of MsgGPT include:
- A responsive chat interface that supports multiple chat sessions.
- A sidebar for easy navigation through chat history.
- The ability to save and title chat sessions for future reference.
- Real-time AI responses powered by the OpenAI API.
- Theme toggle functionality, allowing users to switch between light and dark modes.
- A welcoming screen that introduces users to the app's capabilities.

Overall, MsgGPT serves as a versatile tool for users seeking assistance, information, or simply engaging conversations with an AI assistant.

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

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

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

Key features of the app include:

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

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

Futuristic dashboard design

This application is a Web Technology Learning Tool designed to help users explore and understand various web technologies, ranging from front-end to back-end development, as well as networking and security concepts. The app provides a structured environment for learning through interactive tutorials, code examples, and a database schema overview.

To use the app, users can navigate through different sections that include technology categories, a web technology explorer, and interactive tutorials. The main interface features a hero section that introduces the tool, followed by a grid of technology categories such as Front-End Technologies, Back-End Technologies, Web Servers, Security, Databases, and Networking. Each category provides a brief description and an icon for easy identification.

The Web Technology Explorer section allows users to select a specific technology to learn about. Users can choose from options like HTML, CSS, JavaScript, XML, SSL, web servers, networking, and IP addresses. Each selection presents detailed information, including a description, learning steps, and an option to start an interactive tutorial. Additionally, users can view code examples related to the selected technology and take notes on their learning progress.

The app is built using TypeScript and React, leveraging modern web development practices. It utilizes components for UI elements such as cards, buttons, tabs, and forms, ensuring a responsive and user-friendly experience. The application also incorporates state management to handle user interactions and selections dynamically.

Key features of the app include:
- A categorized overview of web technologies with descriptions and icons.
- An interactive learning experience with step-by-step tutorials for various technologies.
- A code viewer that displays examples in HTML, CSS, JavaScript, XML, and web server configurations, along with explanations for each example.
- The ability for users to take notes and save their progress as they learn.
- A database schema section that outlines the structure of the underlying database used to store technology information and user progress.

Overall, this application serves as a comprehensive resource for individuals looking to enhance their knowledge of web technologies in a structured and engaging manner.

Download web tool

This is a simple showcase of v0 API cappabilities. A really simple tool that queries the genderize API, with a users input. The API then returns the likelyness of the gender based on the given name. The probability also shows and the amount of results. Feel free to use anything from this, this is the API: https://api.genderize.io/?name=luc

Gender prediction form

Favicon Converter Site

Leonradio website

A task tracking app on an iphone screen. Great for mockups

Futuristic Minimalist Landing

The Race Timer Display Board is a web application designed to facilitate the management and display of running timers for race events. Users can create, start, and monitor multiple race events, making it a useful tool for organizers and participants alike.

To use the app, users can add new events by entering a name in the designated input field and clicking the "Add Event" button. Once events are created, users can start timers for each event either immediately or by setting a custom start time. The app displays the elapsed time for each event in real-time, updating every 100 milliseconds. Users can also reset timers or remove events as needed.

The application is built using React and TypeScript, leveraging modern web technologies such as Next.js for server-side rendering and component-based architecture. It utilizes the Lucide icon library for visual elements and Tailwind CSS for styling, ensuring a responsive and visually appealing user interface. The app also incorporates local storage to persist event data, allowing users to retain their event information even after refreshing the page.

Key features of the Race Timer Display Board include:
- The ability to add, edit, and delete race events.
- Real-time display of elapsed time for each event.
- Options to start timers immediately or set custom start times.
- A fullscreen toggle button for an immersive viewing experience.
- Persistent storage of events using local storage.
- A user-friendly interface with tabbed navigation for setup and display modes.

Overall, the Race Timer Display Board provides a comprehensive solution for managing race timers, enhancing the experience for both organizers and participants.

RadioUpa es una radio dirigida a las infancias, de Argentina hacia el mundo. Con mas de 15 años transmitiendo. La radio donde el rock crece.

Rate Guru is a web application designed for users to predict treasury yields, interest rates, and yield curves while competing with others to build their forecasting reputation. The app allows users to submit their predictions, track their performance, and view their ranking on a leaderboard.

To use Rate Guru, users can start by creating an account and logging in. They can then navigate to the dashboard to view current rates and their prediction performance. Users can make predictions by selecting a rate type, entering a predicted value, and choosing a target date. The app provides visualizations of the current treasury yield curve and allows users to track their prediction history and accuracy statistics.

The application is built using modern web technologies, including TypeScript, React, and Next.js for the frontend, along with various UI components for a responsive design. The data is managed through asynchronous API calls that simulate fetching current rates, user predictions, and leaderboard information.

Key features of Rate Guru include:
- A user-friendly interface for making predictions and tracking performance.
- Real-time visualizations of the current treasury yield curve.
- A dashboard that displays user statistics, including accuracy scores and total predictions.
- A leaderboard that ranks users based on their forecasting accuracy and points earned.
- Detailed prediction history, allowing users to analyze their past performance and accuracy.

Overall, Rate Guru provides a comprehensive platform for financial forecasting enthusiasts to engage with market data and improve their predictive skills while competing with others in the community.

The app, named giff.me, is designed to facilitate donations to Twitch streamers using Interac e-transfers. It provides a streamlined and secure way for users to support their favorite content creators directly, with lower transaction fees compared to traditional donation platforms.

To use the app, users can navigate to the homepage where they will find options to donate or learn more about the service. The donation process involves entering the streamer's Twitch username or email, specifying the donation amount, and optionally including a message. Users can choose to donate either by username or email through a tabbed interface. Once the details are filled out, users are guided to complete the Interac e-transfer through their bank's website.

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 Tailwind CSS for styling, ensuring a responsive and visually appealing user interface. The app also incorporates reusable UI components for buttons, cards, and input fields, enhancing maintainability and consistency across the application.

Key features of giff.me include:
- Direct donations to Twitch streamers via Interac e-transfers, ensuring fast and secure transactions.
- A user-friendly interface that allows donations by either Twitch username or email.
- Real-time notifications for streamers when donations are made, along with customizable alerts for their streams.
- A dedicated dashboard for streamers to manage their donations, view recent donors, and customize alert settings.
- Lower fees compared to traditional donation platforms, allowing more of the donation to reach the creators.
- A focus on Canadian users, making it easy for them to support local content creators.

Overall, giff.me aims to enhance the donation experience for both streamers and their supporters, making it easier and more cost-effective to contribute to the Twitch community.

A Desktop app shell style Home Automation Platform concept - in general it is fairly hardl to get any of the ui makers to create a good "web app" style app which makes sense since its not what they are trained on.

In this case I ended up using replit which was better at copying the unity ui screenshot i used as ref -- but since replit isnt great at dynamic things i then used v0 to make more of it work

Still pretty rough though! Figured i'd share with y'all!

Home automation platform

This application is an e-commerce platform designed to facilitate online shopping for a variety of products, including electronics, fashion, home goods, and more. It provides users with a seamless shopping experience, allowing them to browse products, add items to their cart, and complete purchases through various payment methods.

> https://www.linkedin.com/in/hellodav

To use the app, users can navigate through different product categories, view detailed product pages, and manage their shopping cart. The app supports user authentication, enabling customers to create accounts, log in, and track their orders. Additionally, users can apply discount codes and choose between different shipping options during the checkout process.

The application is built using modern web technologies, including TypeScript and React for the frontend, with Next.js as the framework. It utilizes a component-based architecture, allowing for reusable UI components and efficient state management through context providers. The app also employs Tailwind CSS for styling, ensuring a responsive and visually appealing design.

Key features of the app include:

1. Product Browsing: Users can explore a wide range of products organized by categories, with options to filter and search for specific items.

2. Product Details: Each product has a dedicated page displaying images, descriptions, prices, and customer reviews.

3. Shopping Cart: Users can add products to their cart, adjust quantities, and view the total cost, including shipping fees.

4. Checkout Process: The app supports multiple payment methods, including credit cards, PIX, and boleto, along with options for shipping.

5. User Accounts: Customers can create accounts to manage their orders, save favorite products, and receive personalized recommendations.

6. Admin Dashboard: An administrative interface allows for product management, order tracking, and customer management.

7. Responsive Design: The app is optimized for various devices, ensuring a consistent experience across desktops, tablets, and mobile phones.

8. Newsletter Signup: Users can subscribe to newsletters for updates on promotions and new products.

Overall, this e-commerce application aims to provide a comprehensive shopping experience, combining user-friendly navigation, secure transactions, and robust product management capabilities.

Flexible e-commerce platform

This app, named "剪贴盾" (Clipboard Shield), is a Chrome extension designed to enhance the security of users' clipboard data. It scans installed Chrome extensions and identifies those that have declared permissions to read or write clipboard content, thereby helping users manage their privacy and security.

To use the app, users need to install it from the Chrome Web Store. Once installed, they can click on the Clipboard Shield icon in the browser toolbar to open a popup interface. From there, users can initiate a scan by clicking the "开始扫描" (Start Scan) button, which may require granting necessary permissions. After the scan is complete, users can view a list of extensions that have clipboard access permissions.

The app is built using modern web technologies, including TypeScript, React, and Tailwind CSS for styling. It leverages Next.js for server-side rendering and routing, ensuring a smooth user experience. The design is responsive and user-friendly, with a focus on clarity and ease of use.

Key features of the Clipboard Shield app include:
- Comprehensive scanning of all installed Chrome extensions to identify those with clipboard read/write permissions.
- Zero-permission installation, meaning it only requests necessary permissions when actively used, without running in the background.
- Transparent visibility of which extensions can access clipboard content, empowering users to make informed decisions.
- Local operation without internet connectivity, ensuring that no personal data is collected or transmitted.
- A simple and intuitive interface that allows users to scan and view results without requiring technical expertise.
- Compliance with the latest security standards, as it is developed based on Chrome's Manifest V3.

Overall, Clipboard Shield is a free, open-source tool that prioritizes user privacy and security, making it an essential addition for anyone concerned about clipboard access by browser extensions.

Chrome extension scanner

This application is a comprehensive development environment designed for creating and managing 3D games, inspired by the Roblox Studio interface. It allows users to build game worlds, manage game objects, and write scripts using a Lua-like syntax. The app features a user-friendly interface with various components that facilitate game development, including an asset store, script editor, and project manager.

To use the app, developers can create new game projects or load existing ones. The main interface consists of several panels, including an explorer for navigating game objects, a properties panel for modifying object attributes, a toolbox for inserting new assets, and a script editor for writing and editing Lua scripts. Users can also preview their game in a 3D viewport, execute commands, and view output messages from their scripts.

The app is built using modern web technologies, including TypeScript, React, and Three.js for rendering 3D graphics. It utilizes a component-based architecture, allowing for modular development and easy maintenance. Key features include:

1. **Game Object Management**: Users can create, modify, and delete game objects, each with customizable properties and behaviors.

2. **Scripting Support**: The integrated script editor supports Lua scripting, enabling developers to add interactivity and logic to their games.

3. **Asset Store**: A built-in asset store allows users to browse and insert 3D models, textures, and other resources into their projects.

4. **Project Management**: Users can save, load, and manage multiple projects, with options to export projects for sharing or backup.

5. **Real-time Preview**: The 3D viewport provides a real-time rendering of the game world, allowing developers to see changes as they make them.

6. **User Interface Customization**: The app features a customizable UI with collapsible panels, tabs for organizing different functionalities, and context menus for quick actions.

7. **Notifications and Output Console**: The app includes a notification system for user feedback and an output console for displaying script execution results and errors.

Overall, this application serves as a powerful tool for game developers, providing a rich set of features to streamline the game development process.

V0.dev game engine

3D ducks with physics effects, built with React Three Fiber.

3D Ducks with Physics

The Dinner Spinning Wheel app is designed to help users generate dinner ideas by randomly selecting ingredients from user-defined categories. The app features a visually engaging spinning wheel interface that allows users to spin for different meal components, including proteins, vegetables, and grains.

To use the app, users can start by adding their preferred ingredients to each category: protein, vegetable, and grain. The app provides an input field for each category where users can enter new ingredients and manage their lists. Once the ingredients are set, users can spin the wheels for each category to receive a random selection of ingredients for their meal. The app also allows users to spin all wheels simultaneously for a complete dinner combination.

The app is built using TypeScript and React, leveraging modern web technologies for a responsive and interactive user experience. It utilizes hooks for state management and effects, ensuring that the app remains efficient and responsive to user interactions. The spinning wheel component is designed to provide a smooth animation effect during spins, enhancing the overall user experience.

Key features of the Dinner Spinning Wheel app include:
- Ingredient management: Users can add or remove ingredients from each category, with the app saving these preferences in local storage for future sessions.
- Random selection: The spinning wheels provide a fun and engaging way to randomly select ingredients, with the option to spin all wheels at once.
- Visual feedback: The app displays the selected ingredients prominently, allowing users to see their dinner combination at a glance.
- Responsive design: The app is designed to work well on various screen sizes, ensuring accessibility for all users.

Overall, the Dinner Spinning Wheel app combines functionality with an enjoyable user experience, making meal planning a more interactive and creative process.

Custom dinner wheel

The app is a password management tool designed for users of FortunaShop.com, allowing them to reset their passwords securely. It consists of two main functionalities: a "Forgot Password" feature and a "Reset Password" feature.

To use the app, users can navigate to the "Forgot Password" page, where they will be prompted to enter their email address. Upon submission, the app sends a password reset link to the provided email. Users can then follow the link to access the "Reset Password" page, where they can create a new password by entering it twice for confirmation. The app validates that both password entries match before updating the user's password in the system.

The app is built using Next.js, a React framework, and utilizes TypeScript for type safety. It integrates with Supabase, a backend-as-a-service platform, to handle user authentication and password management. The user interface is designed with a responsive layout, ensuring accessibility across devices.

Key features of the app include:
- User-friendly forms for both password reset and password creation.
- Real-time validation to ensure password entries match.
- Feedback mechanisms, including success and error messages, to inform users of the status of their actions.
- Integration with Supabase for secure authentication and session management.
- A responsive design that adapts to various screen sizes.

Overall, the app provides a straightforward and secure way for users to manage their passwords, enhancing the overall user experience on FortunaShop.com.

This application is a home automation management tool designed to provide users with an intuitive interface for controlling and monitoring various smart devices within their home. The app allows users to create automation routines, visualize device interactions through flowcharts, and manage device settings efficiently.

To use the app, users can navigate through a main interface that includes a toolbar for quick actions, a side panel for device selection, a workspace for visualizing automation flows, and a bottom panel for terminal commands, logs, and AI assistance. Users can interact with the flowchart to create or modify automation routines by dragging and connecting nodes that represent different triggers and actions. The timeline view allows users to see the sequence of events and manage the timing of automations.

The app is built using modern web technologies, including TypeScript and React for the frontend, with a focus on responsive design and user experience. It utilizes libraries such as Framer Motion for animations, Tailwind CSS for styling, and various UI components for a cohesive look and feel.

Key features of the app include:
- A customizable toolbar with quick access to common actions such as saving, running automations, and managing devices.
- A resizable and collapsible layout that allows users to adjust the workspace according to their preferences.
- A flowchart interface for visualizing automation processes, enabling users to create complex routines with ease.
- A timeline view to track events and manage the timing of automations.
- A terminal panel for executing commands and receiving system feedback.
- A logs view for monitoring system activity and troubleshooting issues.
- An AI assistant that provides contextual help and guidance based on user queries.

Overall, this app serves as a comprehensive solution for managing home automation systems, making it easier for users to control their smart devices and create automated routines tailored to their needs.

Home Automation Platform

This app is a comprehensive news platform designed to provide users with the latest updates and in-depth analyses of current events, particularly focusing on Yemen and the surrounding region. The application features a user-friendly interface that allows users to navigate through various news categories, including politics, economy, society, and more.

To use the app, users can browse the homepage to view featured news articles, trending topics, and the latest updates. They can also subscribe to a newsletter to receive news directly in their email. The app includes a comment section for user engagement, allowing readers to share their thoughts on articles and interact with other users.

The app is built using modern web technologies, including TypeScript and React for the frontend, with a focus on responsive design to ensure compatibility across devices. It utilizes a component-based architecture, leveraging reusable UI components for consistency and maintainability. The app also incorporates state management for handling user interactions and data updates.

Key features of the app include:
- A dynamic homepage showcasing featured articles and breaking news alerts.
- Categorized news sections for easy navigation.
- A comment system that allows users to engage with articles and reply to other comments.
- A subscription form for users to sign up for newsletters.
- Statistics counters displaying site metrics such as visitor counts and subscriber numbers.
- Advertisement banners for monetization.
- A dark mode toggle for user preference.
- An admin dashboard for managing comments, articles, and user interactions.

Overall, this app aims to deliver timely news and foster community discussions while providing a seamless user experience.

The Mumbai Rickshaw Fare Calculator is a web application designed to help users calculate the fare for auto rickshaw rides in Mumbai. The app utilizes GPS tracking to provide real-time fare calculations based on distance traveled, waiting time, and applicable surcharges, such as night rates.

To use the app, users need to enable location services on their device. Once location access is granted, they can start their journey by tapping the "START" button. The app will automatically track the distance and waiting time during the ride. When the journey is complete, users can tap the "STOP TRIP" button to end the session and view the final fare.

The application is built using modern web technologies, including TypeScript, React, and Tailwind CSS for styling. It is deployed on Vercel and is designed to function as a Progressive Web App (PWA), allowing users to install it on their devices for easy access. The app also features a service worker for offline capabilities and improved performance.

Key features of the Mumbai Rickshaw Fare Calculator include:
- Real-time fare calculation based on distance and waiting time.
- Automatic tracking of the user's location during the ride.
- Night surcharge calculations for rides taken between 12 AM and 5 AM.
- A fare chart displaying current rates for different distances.
- Instructions for users on how to effectively use the app.
- PWA capabilities, allowing users to install the app on their devices.

Overall, the Mumbai Rickshaw Fare Calculator provides a user-friendly interface for accurately estimating rickshaw fares, making it a valuable tool for both residents and visitors in Mumbai.

Mumbai rickshaw fare

This application is a weather and tide forecasting tool specifically designed for Thailand. It provides users with real-time weather data, tide information, and location selection features. The app is built using Next.js, a React framework, and utilizes various modern web technologies including TypeScript, Tailwind CSS for styling, and Radix UI components for accessibility and design consistency.

To use the app, users can select their location either by entering it manually or by using a map interface to pinpoint their desired location. The app allows users to choose a specific date and time for tide forecasts, and it displays current weather conditions such as temperature, humidity, wind speed, and pressure. Additionally, it provides detailed tide information including high and low tide times, current water levels, and lunar phases.

Key features of the app include:
- Current weather data display, including temperature, humidity, wind speed, and pressure.
- Tide information that includes waxing/waning moon phases, spring/neap tide status, high/low tide times, and current water levels.
- A responsive design that adapts to different screen sizes, ensuring usability on both desktop and mobile devices.
- A dark mode toggle for user preference.
- A map interface for selecting locations, enhancing user experience and accuracy in location selection.
- Toast notifications for user feedback and alerts.

The app is structured with a clear separation of components, making it easy to maintain and extend. It leverages hooks for state management and side effects, ensuring a smooth user experience. The use of TypeScript enhances type safety and reduces runtime errors, while Tailwind CSS provides a utility-first approach to styling, allowing for rapid UI development. Overall, this application serves as a comprehensive tool for users interested in weather and tide information in Thailand.

Thai weather app

This application is a web-based employment application form designed for candidates applying for positions at PACE Field Services. The app guides users through a multi-step process to collect essential information required for job applications, including personal details, driving credentials, employment history, and consent for background checks.

To use the app, candidates navigate through five distinct steps: Personal Information, License & Experience, Employment History, MVR Authorization, and Review & Submit. Each step contains relevant fields that users fill out, with options for inputting text, selecting dates, and providing digital signatures. The app also includes a progress bar to indicate the user's current position in the application process.

The application is built using TypeScript and React, leveraging various UI components for a responsive and user-friendly experience. Key technologies include React for component-based architecture, TypeScript for type safety, and libraries such as date-fns for date formatting and Lucide React for icons. The app also utilizes a signature pad component that allows users to draw their signatures directly on the screen.

Key features of the app include:
- A step-by-step guided form to ensure all necessary information is collected.
- Dynamic form fields that adapt based on user input, such as showing additional fields for previous licenses or accidents.
- A digital signature pad for users to provide their signatures electronically.
- File upload functionality for candidates to submit additional documents, such as driver's licenses or certifications.
- Validation checks to ensure that all required fields are completed before submission.
- A summary review page that allows users to confirm their information before final submission.

Overall, this application streamlines the employment application process, making it easier for candidates to apply for positions while ensuring that all necessary information is collected efficiently.

Editable employment form

This application is an interactive portfolio designed to mimic the Windows 10 desktop environment, providing users with a familiar interface to explore various professional and personal information. The app allows users to navigate through different sections, including projects, skills, education, and contact information, all presented as interactive folders and applications.

To use the app, users start at a login screen where they can enter their credentials. Once logged in, they are greeted with a desktop interface featuring icons for various applications. Users can double-click these icons to open corresponding windows, which can be moved, resized, minimized, or closed, similar to a real desktop experience. The taskbar at the bottom provides quick access to pinned applications and system functions, while the Start Menu allows users to search for and launch additional applications.

The app is built using React.js and Next.js, leveraging Framer Motion for animations and CSS Modules for styling. Key features include a realistic Windows 10 UI, interactive windows, a file explorer for browsing content, and simulated browsers for accessing external sites like GitHub and LinkedIn. The application also includes a loader animation during the initial loading phase and responsive design to ensure usability across different screen sizes.

Overall, this portfolio application serves as a creative way to showcase skills and projects while providing an engaging user experience that mimics a traditional desktop environment.

portfoliothefstack

The Block Phone app is designed to enhance road safety by automatically blocking mobile devices during high-risk situations, such as when crossing streets or driving. The app aims to reduce accidents and save lives in urban areas, specifically targeting users in Uruguay and Israel.

To use the app, users can navigate through a user-friendly interface that includes several tabs: Home, Dashboard, Analytics, Emergency, and Settings. The Home tab provides an overview of the app's functionality and its impact on safety. The Dashboard offers real-time statistics on user engagement and safety metrics, while the Analytics tab presents detailed insights into system performance. The Emergency tab allows users to quickly access emergency services, and the Settings tab enables customization of the app's features.

The app is built using modern web technologies, including Next.js for server-side rendering and React for building user interfaces. It utilizes Tailwind CSS for styling, ensuring a responsive and visually appealing design. The app also integrates with Vercel for deployment and analytics tracking, allowing for real-time updates and performance monitoring.

Key features of the Block Phone app include:
- Automatic device blocking during risky situations, utilizing advanced sensors and AI technology.
- Real-time monitoring and statistics on user activity and safety incidents.
- An emergency system that connects users to local emergency services with a single tap.
- Customizable settings for different protection modes, such as pedestrian and driving modes.
- A dashboard that displays key performance indicators and alerts for recent safety incidents.

Overall, the Block Phone app combines technology and safety to create a proactive solution for reducing mobile device-related accidents in urban environments.

Cell phone blocker app

The app is a comprehensive educational platform designed to assist students in managing their academic life effectively. It offers features such as lecture recording, assignment tracking, textbook exchange, study group matching, and an AI-powered tutor.

Users can record lectures, which are automatically transcribed and analyzed for key concepts. The app allows students to track their assignments, view upcoming deadlines, and manage their progress. It also includes a marketplace for buying, selling, or renting textbooks, as well as a feature for creating and joining study groups based on courses.

The AI tutor provides personalized assistance, allowing users to ask questions in English or Shona and receive detailed explanations. The app also includes a dashboard that summarizes user activity, including earnings from shared content and study sessions.

To use the app, users can sign up by providing their personal information, including their university, program, and courses. They can then access various features through a user-friendly interface. The app is built using modern web technologies, including TypeScript, React, and Next.js, and utilizes a PostgreSQL database for data storage.

Key features of the app include:
- Lecture recording and transcription
- Assignment tracking with progress indicators
- Textbook exchange platform
- Study group matching based on courses
- AI-powered tutoring with support for multiple languages
- User dashboard for tracking academic activity and earnings
- Integration with payment systems for managing earnings and withdrawals

Overall, the app aims to enhance the academic experience for students by providing tools that facilitate learning, collaboration, and financial rewards for sharing knowledge.

The Telegram Mini App is a web application designed to enhance user engagement within the Telegram platform by integrating wallet functionalities and gamified elements. It allows users to connect their cryptocurrency wallets, complete daily tasks, and earn points that can be redeemed for rewards.

To use the app, users simply need to access it through Telegram. Upon launching, the app initializes the Telegram Web App environment, retrieves user data, and displays a user-friendly interface. Users can connect their wallets using popular connectors like MetaMask, complete tasks to earn points, and interact with various features such as a rewards shop and daily check-ins.

The app is built using modern web technologies, including TypeScript, React, and Tailwind CSS for styling. It leverages the Wagmi library for Ethereum wallet connectivity and the TanStack Query library for data fetching and state management. The app is designed to be responsive and visually appealing, utilizing a gradient background and card components to present information clearly.

Key features of the Telegram Mini App include:
- User authentication and data retrieval from Telegram.
- Wallet connection functionality to manage cryptocurrency assets.
- A points system that rewards users for completing tasks and engaging with the app.
- A rewards shop where users can spend their earned points on exclusive items.
- Daily tasks that encourage user interaction and retention.
- The ability to invite friends and share links to enhance social engagement.

Overall, the Telegram Mini App aims to create an interactive and rewarding experience for users within the Telegram ecosystem, combining social features with blockchain technology.

The app is a scientific search engine called Eduvia, designed to facilitate access to millions of academic articles through a voucher-based system. Users can redeem vouchers to gain credits, which are required to perform searches. The app features a user-friendly interface that allows users to search for scientific papers, manage their accounts, and view their search history.

To use the app, users must first enter a valid voucher code to activate their account and receive initial credits. Once activated, users can search for articles by entering keywords and applying various filters, such as publication year, journal, and author. Each search costs a certain number of credits, and users can track their credit balance and usage.

The app is built using modern web technologies, including TypeScript, React, and Next.js for the frontend, and Supabase for the backend, which handles user authentication, database management, and real-time data updates. The user interface is styled with Tailwind CSS, ensuring a responsive and visually appealing design.

Key features of the app include:
- Voucher redemption system that allows users to gain credits for searching.
- Advanced search capabilities with filters for refining results.
- User account management, including credit balance tracking and search history.
- A dashboard that provides an overview of user activity, including total searches and credits used.
- Notifications and toast messages to inform users of actions and errors.
- A demo mode for new users to explore the app's features without needing to enter a voucher code.

Overall, Eduvia aims to provide a comprehensive and efficient platform for researchers and students to access scientific literature.

Eduvia project details

This app is a lottery drawing application that allows users to participate in a prize draw with a variety of rewards. Users can click a button to initiate the lottery, and the app will randomly select a prize based on predefined probabilities. The prizes include items such as an iPhone 15 Pro, virtual currency, and other fun items, each with different chances of winning.

To use the app, users simply visit the lottery page and click the "立即抽奖" (Draw Now) button. The app will display a spinning animation while the prize is being drawn. After a brief delay, the result will be shown, indicating whether the user has won a prize or not. Users are limited to one participation per session, and the app will store the result in local storage to prevent multiple entries.

The app is built using React and TypeScript, leveraging various components for the user interface, including buttons, cards, and badges. It utilizes local storage to keep track of whether a user has already participated and to save the result of the draw. The design incorporates responsive layouts and animations to enhance user experience.

Key features of the app include:
- A variety of prizes with different probabilities of winning.
- A visually engaging drawing animation.
- Local storage management to track user participation.
- Clear display of results, including congratulatory messages for winners.
- A reset function for demonstration purposes, allowing developers to clear the lottery state.

Overall, this app provides an interactive and fun way for users to engage with a lottery system while showcasing modern web development practices.

抽奖页面生成器

VidGenius AI is an application designed to help users transform their ideas into engaging videos using artificial intelligence. The app allows users to input a video script, select a language, and choose a music style, facilitating the creation of personalized video content.

To use VidGenius AI, users begin by entering their video script or idea into a dedicated text area. They can then select their preferred language from options including Hindi, English, and a mix of both. Additionally, users can choose a music style from various categories such as emotional, motivational, romantic, upbeat, and calm. Once all inputs are provided, users can click the "Create My Video" button to initiate the video generation process. The app simulates video generation and provides feedback on the status of the generation.

The application is built using TypeScript and React, leveraging modern web technologies to create a responsive and user-friendly interface. Key features include a text area for script input, dropdown selections for language and music style, and a button that triggers the video generation process. The app also provides visual feedback during the generation process, enhancing user experience.

Overall, VidGenius AI aims to simplify video creation, making it accessible for users looking to produce high-quality video content quickly and efficiently.

This application is a Fuel Tracking System designed for managing fuel records for a fleet of vehicles, specifically tailored for a fleet of up to 370 vehicles. The app allows users to input, view, and analyze fuel consumption data, providing a comprehensive dashboard for fleet management.

To use the app, users can navigate through three main tabs: the Fuel Entry Form, Fuel Records Table, and Dashboard. In the Fuel Entry Form, users can input details such as vehicle plate number, model, driver name, fuel amount, fuel price, gas station, and any additional notes. The app validates the input data and calculates the total cost based on the fuel amount and price. Once the data is submitted, it is stored in the local storage for persistence.

The Fuel Records Table displays all entered fuel records, allowing users to filter and sort the data based on various criteria, such as date and vehicle plate number. Users can also delete records if necessary. The Dashboard provides key statistics, including total records, total fuel consumed, total cost, average fuel per record, and insights into the top vehicles by fuel consumption.

The application is built using React, leveraging hooks such as useState and useEffect for state management and side effects. The user interface is styled with CSS, ensuring a responsive design that adapts to different screen sizes. The app also utilizes local storage for data persistence, allowing users to retain their records even after refreshing the page.

Key features of the app include:
- A user-friendly form for entering fuel records.
- A sortable and filterable table for viewing records.
- A dashboard that summarizes key statistics and insights.
- Data persistence using local storage.
- Responsive design for accessibility on various devices.

Overall, this Fuel Tracking System provides a robust solution for fleet managers to efficiently track and analyze fuel consumption across their vehicles.

Fleet fuel tracker

This application is a web-based platform designed for purchasing and managing eSIMs in Myanmar. It allows users to select from various telecom operators, complete necessary KYC (Know Your Customer) documentation, and process payments for eSIM activation. The app is built using modern web technologies, including React, TypeScript, and Tailwind CSS, ensuring a responsive and visually appealing user interface.

Users can navigate through the app to explore different eSIM plans, view guidelines for SIM card registration, and access announcements from the Myanmar Post and Telecommunications Department (PTD). The application features a checkout process where users can input their personal information, upload required identification documents, and make payments via a QR code system integrated with Myanmar Pay.

Key features of the app include:

1. **Multi-language Support**: The app supports both English and Myanmar languages, allowing users to switch languages seamlessly.

2. **Dynamic eSIM Plans**: Users can view and select from various eSIM plans offered by different operators, with detailed information about validity, data, and voice options.

3. **KYC Document Upload**: Users can upload identification documents (NRC or passport) for verification, with real-time feedback on the verification status.

4. **Payment Processing**: The app integrates a payment system that allows users to pay for their eSIMs using QR codes, with status updates on payment processing.

5. **Admin Panel**: An administrative interface is available for managing orders, verifying documents, and monitoring payment statuses. Admins can confirm or reject orders and view detailed statistics on order processing.

6. **Responsive Design**: The application is designed to be mobile-friendly, ensuring a smooth user experience across devices.

7. **Real-time Notifications**: Users receive updates on their order status and document verification through the app.

To use the app, users simply need to create an account, select their desired eSIM plan, complete the KYC process by uploading documents, and proceed to payment. The app handles all backend processes, including order management and document verification, using a Redis database for efficient data storage and retrieval.

Overall, this application provides a comprehensive solution for users looking to purchase and manage eSIMs in Myanmar, with a focus on user experience, security, and compliance with local regulations.

Vercel auth proxy API

Myanmar eSIM update