ARKAN AI No-Code Workshop Documentation
This repository contains the documentation for the AI Code Workshop held on February 18, 2025 at XRPL by ARKAN. During this session, we explored no-code AI development tools, best practices in prompt engineering, and modern web development techniques built on a robust tech stack. The formation was focused mainly on the Bolt no-code tool.
For rapid and efficient development, we recommend the following stack:
- TypeScript: For type-safe JavaScript development.
- React: To build dynamic user interfaces.
- Tailwind CSS: For a utility-first approach to styling.
- Supabase: For backend services including authentication, database, and storage.
- Tavily: To streamline development further.
This stack enables you to build scalable, high-performance web applications while keeping a clear separation between design, logic, and data management.
Effective prompt engineering is essential when using Bolt. Below is a detailed table with examples to help you craft precise and actionable prompts:
| Do | Don't |
|---|---|
| Use clear and concise language that outlines your requirements explicitly. | Provide vague or generic instructions that leave too much open-ended. |
| Specify the technology stack and any design or functional constraints (e.g., "Create a React component with TypeScript and Tailwind CSS styling"). | Assume the AI will infer the needed details without guidance. |
| Break down complex tasks into smaller, step-by-step instructions. | Combine multiple unrelated tasks into a single prompt. |
| Include examples, context, and expected output formats to guide the response. | Skip important context that could lead to irrelevant or incomplete outputs. |
| Request iterative improvements (e.g., "Provide an initial version and then update it with error handling"). | Expect a one-shot, complete solution without any revision process. |
"Just create a basic user list without handling loading states, errors, or responsive design."
"Build a reusable React component in TypeScript that retrieves and displays a paginated list of user profiles from Supabase. The component should use a responsive grid layout powered by Tailwind CSS, include loading and error states, and offer dynamic filtering based on user input."
"Simply show a basic API connection without any error handling or context."
"Develop a comprehensive example of integrating a third-party REST API into a React application using hooks. The solution should include detailed error handling, loading state management, a retry mechanism, and clear inline comments explaining each integration step."
"Offer a minimal code snippet that lacks handling for asynchronous operations or scalability considerations."
"Construct an example using the React Context API combined with a reducer to manage global state. Provide a detailed implementation that includes asynchronous actions, state update logging, and comprehensive comments for future scalability."
"Only write minimal authentication code without addressing session management or responsive UI feedback."
"Design a full authentication flow using Supabase in a React application. Include user registration, login, session persistence, and error handling. Ensure the UI provides responsive feedback using Tailwind CSS, and separate the authentication logic from the presentation layer."
"Just ask for a brief explanation of the deployment process without any specific, actionable instructions."
"Draft a detailed guide for deploying a React application on Netlify. Include step-by-step instructions for setting build commands, configuring environment variables for Supabase, setting up continuous integration, and troubleshooting common deployment issues."
"Create a login page with an email and password field."
"Design a clean login page with a blue/purple gradient background, a centered card with a subtle shadow, an email field with an icon, a password field with a show/hide option, and a blue CTA button labeled ‘Log in’ with a glowing hover effect."
"Make a sign-up page."
"Generate a modern sign-up page with three input fields (Name, Email, Password), a checkbox for ‘Accept terms and conditions,’ and a CTA button labeled ‘Create Account’ with a ripple effect on click."
"Add a navigation bar."
"Add a fixed navbar at the top of the screen, including a logo on the left, a centered menu with three links (‘Home,’ ‘About,’ ‘Contact’), and a ‘Log in’ button on the right styled as a primary button."
"Make a landing page."
"Create a full-screen Hero Section with a blurred background image, a white title saying ‘Welcome to TravelMate,’ a semi-transparent subtitle, and a rounded ‘Explore’ CTA button with a scale-up hover animation."
"Add cards with offers."
"Create a responsive grid of offer cards, each containing a top image, a bold title, a short description, and a ‘View More’ button with an elevation hover effect."
"Add a search bar."
"Add a centered search bar with a wide input field, a clickable magnifying glass icon, and a filter button on the right that opens a dropdown menu to select the destination and trip duration."
"Add a button to scroll up."
"Implement an automatic scroll-to-top feature when a user changes pages, with a smooth and gradual transition for better navigation comfort."
"Add a dark mode."
"Add a toggle switch in the top-right corner to switch between light and dark mode, with a smooth transition and seamless color changes across the interface."
"Add a data table."
"Create a responsive table with pagination, sortable columns, a top filter system, and a row highlight effect on hover."
"Add a customer review section."
"Create a testimonial section in a carousel format, displaying three reviews per slide with a round profile picture, a bold name, and a star rating."
"Add an animation."
"Apply a fade-in animation to titles and buttons on load, and a slide-in effect from the left for images to create a dynamic layout."
"Add a ‘Book’ button."
"Add a ‘Book Now’ CTA button with a blue gradient, a hover animation that slightly increases opacity, and a subtle glow effect."
"Add a footer with links."
*"Create a structured footer with three columns:
- A logo and short description.
- A quick links section (‘Legal Notice,’ ‘Terms & Conditions,’ ‘FAQ’).
- A social media icons section (Facebook, Instagram, Twitter) with a zoom hover effect."*
"Add a contact form."
"Create a contact form with three fields (Name, Email, Message), a rounded blue submit button, and an animated confirmation message upon submission."
"Add a list of destinations."
"Create a destination list in a card format with a top image, a title, and a ‘View More’ button. Add a sticky filter bar at the top with sorting options for price, popularity, and trip duration."
For further details and advanced techniques, please refer to the following resources:
For those looking to push the limits of Bolt with the last tools, check out these Supercharge resources:
- Video on Supercharge: Watch on X
- Supercharge YouTube Channel: Supercharge Bolt
Supercharge offers voice mode, component selector, and practical examples that help you overcome common challenges in no-code development, optimize your prompt strategies, and integrate advanced functionalities seamlessly.
This README documents the outcomes of the training session at XRPL. We invite you to explore these materials, experiment with the recommended tech stack, and refine your skills in prompt engineering and modern web development. Whether you're leveraging Supercharge for advanced insights or using our glossary to master technical communication, our aim is to empower your journey in AI-powered development.
Happy coding and prompt crafting!
