<p>In 2024, <a href="https://www.ac-consulting.fr/" target="_blank">A&amp;C Consulting</a>, a company with more than three decades of experience delivering tailored ERP and CRM systems, faced a new challenge. One of their clients, operating within a complex ecosystem of referencing procedures and strict governance requirements, was losing time and accuracy because of manual workflows, inconsistent processes, and fragmented collaboration. Bids needed to be coordinated across multiple companies and stakeholders under intense deadlines, leaving little room for efficiency.&nbsp;</p><p>But A&amp;C Consulting didn’t want to spend a year building a custom tool from the ground up. Instead, they turned to <a href="https://qodly.com/platform" target="_blank"><strong>Qodly</strong></a>, a new <strong>hybrid low-code SaaS platform</strong> built to bring together the best of both traditional development and visual programming.&nbsp;</p><p>And in just a few weeks, their vision began to take shape.&nbsp;</p><p>&nbsp;</p><img src="/sites/default/files/How-AC-Consulting-Built-a-SaaS-MVP-Fast-with-Qodly-img-4.png" data-entity-uuid="2bd1306e-5872-441a-a594-a9703cbcdf48" data-entity-type="file" alt="" width="733" height="298"><p>&nbsp;</p><p>&nbsp;</p><h2>The Birth of BGA - Business, Governance, Automation&nbsp;</h2><p>BGA was more than just another internal tool. It was A&amp;C Consulting’s answer to a recurring pain point in the industry: how to streamline the lifecycle of referencing procedures, from sourcing to compliance to recruitment - while reducing human error and administrative burden.&nbsp;</p><p>For Hassan Ould, General Manager at A&amp;C Consulting, the mission was to transform the manual process into a digital workflow: reusable, collaborative, and built to scale. Qodly made it possible.&nbsp;</p><div class="container wysiwyg"><blockquote><p>We had a clear business need and a bold idea. But we didn’t want to wait months to validate our concept. With Qodly, we could move fast, iterate quickly, and test our model in the real market. We identified a business requirement and had a concept. With Qodly, we could act immediately, we simply created it.</p></blockquote></div><p>Their vision was clear: automate the chaos, speed up delivery, and enable multi-company collaboration, all while staying compliant.&nbsp;</p><p>&nbsp;</p><img src="/sites/default/files/How-AC-Consulting-Built-a-SaaS-MVP-Fast-with-Qodly-img-1.png" data-entity-uuid="15636d31-822d-481e-b0b6-717cb7c35c12" data-entity-type="file" alt="" width="1020" height="415"><h2>&nbsp;</h2><h2>Why Qodly Low-Code Was the Right Fit</h2><p>Qodly offered the perfect <strong>mix of speed and control</strong>.&nbsp;</p><p>As a hybrid low-code platform, it allowed A&amp;C Consulting to:&nbsp;</p><ul><li>Build quickly with drag-and-drop visual tools</li><li>Customize deeply the code via <strong>Qodly Script</strong></li><li>Host and scale efficiently in the <strong>Qodly Cloud</strong></li></ul><p><em>“With Qodly, we went from zero to a working MVP in just a few weeks,”</em> says Hassan.</p><p>&nbsp;</p><img src="/sites/default/files/How-AC-Consulting-Built-a-SaaS-MVP-Fast-with-Qodly-img-2.png" data-entity-uuid="8aef3012-4df2-4e6a-8dd4-596d59f41f39" data-entity-type="file" alt="" width="1020" height="415"><p>&nbsp;</p><p>A&amp;C Consulting developers already had experience in various stacks: 4D, PHP, Laravel, JavaScript, React, etc. But Qodly offered something different, a hybrid low-code environment that blended the accessibility of drag-and-drop UI with the power of custom scripting.&nbsp;</p><p><em>“For us, Qodly was a true accelerator,”</em> says Jean Graveline, a senior developer with deep experience in 4D.</p><div class="container wysiwyg"><blockquote><p><em>Qodly's scripting language felt natural, and it allowed us to translate our existing protocols directly from 4D into something new, without starting from scratch. Also because we use ORDA.</em></p></blockquote></div><p>Romain Vernhet, a full-stack developer with a JavaScript background, saw it from another angle: "Qodly Script felt close to JavaScript. It gave us freedom — and speed."</p><p>The combination of visual building and traditional coding meant everyone on the team — whether from a 4D or web background could contribute.&nbsp;</p><p>The platform empowered both longtime 4D developers and new web developers to collaborate. Qodly Script, with its syntax resembling 4D and JavaScript, made onboarding smooth.&nbsp;</p><p><em>“Qodly speaks both languages for app development, traditional and modern. That is what makes it powerful,</em>” adds Franck, who leads the product strategy at A&amp;C Consulting.&nbsp;</p><p>&nbsp;</p><h2>From MVP to Production in Weeks&nbsp;</h2><p>A&amp;C Consulting began prototyping BGA in September 2024, and by January 2025, the platform was in production with real clients.&nbsp;</p><p>Built around two core modules (Tenders Management and Information Technology Consulting), BGA is already delivering value.</p><p>And more is on the roadmap. Future versions will integrate deeper AI capabilities to draft technical files, flag inconsistencies, and assess company compliance, before tenders are even submitted.</p><p>&nbsp;</p><img src="/sites/default/files/How-AC-Consulting-Built-a-SaaS-MVP-Fast-with-Qodly-img-3.png" data-entity-uuid="e1646bac-1568-4942-97ca-8e8a421d4cd3" data-entity-type="file" alt="" width="1020" height="415"><h2>&nbsp;</h2><h2>Lessons from the Field: Speed, Simplicity &amp; Scalability&nbsp;</h2><p>While there were challenges, such as limitations in version control within the SaaS environment, the team was adapted with regular Git exports and shared workflows. They used manual backups through FTP. Debugging tools and DevOps integration are areas where the team sees room for Qodly to evolve, but overall, the experience was “<strong>productive and fast</strong>.” <em>“From a DevOps point of view, Qodly helped us avoid heavy infrastructure setup</em>,” said Hassan.&nbsp;</p><p><em>“Hosting and deployment were simplified, and we gained a lot of time.”</em> And thanks to Qodly’s component-based structure and use of REST APIs, the platform remains highly modular, ready to expand into new markets and adapt to other operational needs.</p><p>&nbsp;</p><h2>Looking Ahead: A Long-Term Vision&nbsp;</h2><p>What began as an MVP is now part of a much larger vision. A&amp;C Consulting wants to scale BGA across new client segments, and potentially replicate the model for other industries with similar needs. For Hassan and his team, the success of BGA validates a broader trend: low-code doesn’t have to mean limited capability.&nbsp;</p><p>With Qodly, they’re not just experimenting - they’re building tools with the power and longevity to last for years. Hassan notices&nbsp;</p><div class="container wysiwyg"><blockquote><p><em>We’ve seen massive enterprise systems built with older technologies. Now we see the same potential in Qodly. It’s just the beginning.</em>&nbsp;</p></blockquote></div><h2>Final Thoughts: Low-Code Without Limits&nbsp;</h2><p>The success of BGA speaks not only to A&amp;C Consulting’s vision but to Qodly’s promise as a next-generation hybrid low-code platform.&nbsp;</p><p><em>“It’s rare to find a tool that meets both your technical needs and your business urgency,” says Hassan. “With Qodly, we didn’t have to choose. We got both.”</em>&nbsp;</p><p>A&amp;C Consulting’s success with Qodly shows how traditional development teams can use <strong>modern low-code tools</strong>. They can create scalable, smart, cloud-native platforms without any compromise.&nbsp;</p><p>Whether you’re building for tenders, compliance, HR, or operations, <strong>Qodly</strong> lets you go from idea to impact, fast.</p><p>In a world where digital transformation can’t wait, Qodly empowers teams like A&amp;C Consulting to act on ideas - fast, and at scale.</p><div class="container wysiwyg"><p class="text-align-center"><a class="btn btn-violet" href="https://cloud.qodly.com/" target="_blank">Start creating your app now&nbsp;</a></p></div>

<p>When building a web application, you might wonder: should you code everything from scratch or use a hybrid low-code platform? In this article, we’ll compare both approaches and explore how AI (Artificial Intelligence) is changing the way apps are developed. By the end, you’ll have a clearer idea of which solution best fits your project goals, resources, and timeline.</p><h2>Building a Web App From Scratch: Full Control With More Effort</h2><h3>1. Why Code From Scratch?</h3><ul><li><strong>Creative Freedom</strong>: You get to decide on every single aspect, both front end and back end.</li><li><strong>Precise Customization</strong>: Implement exactly the features you need, without compromises.</li><li><strong>Skill Development</strong>: You’ll deepen your technical knowledge by understanding the entire codebase.</li></ul><h3>2. The Main Stages of Development</h3><ul><li><strong>Define Your Idea</strong>: Clarify the application’s purpose, target audience, and core functionalities.</li><li><strong>Choose Your Tech Stack</strong>: Select languages, frameworks, and tools (e.g., JavaScript, Python, React, Node.js) according to your needs.</li><li><strong>Design the UI/UX</strong>: Focus on usability and aesthetics for a smooth user experience.</li><li><strong>Write the Code</strong>: Implement a robust, scalable architecture, making sure the code is clean and maintainable.</li><li><strong>Test Thoroughly</strong>: Identify and fix bugs, performance issues, and usability problems through unit and user testing.</li><li><strong>Launch</strong>: Deploy your app for end users and monitor performance.</li><li><strong>Maintain and Improve</strong>: Keep the app updated, address security concerns, and add new features as needed.</li></ul><h3>3. Potential Drawbacks</h3><ul><li><strong>High Complexity</strong>: Requires strong technical expertise.</li><li><strong>Greater Time and Cost</strong>: Developing from scratch often takes longer and uses more resources.</li><li><p><strong>Specialized Team Required</strong>: Senior-level or well-trained developers are typically needed for optimal results.</p><p><img src="/sites/default/files/How%20to%20build%20an%20app%20from%20scratch.png" alt="From scratch" width="1020" height="415"></p></li></ul><h2>Hybrid Low-Code Platforms: Speed and Flexibility</h2><h3>1. What Is a Hybrid Low-Code Platform?</h3><p>These platforms offer visual, drag-and-drop development combined with the option to insert custom code. You benefit from a ready-made, yet customizable foundation.</p><h3>2. Major Advantages</h3><ul><li><strong>Faster Development</strong>: Quickly create screens, workflows, and simple features with minimal coding.</li><li><strong>Accessible Approach</strong>: Ideal for teams where not everyone is a coding expert.</li><li><strong>Flexibility</strong>: You can still add your own code (JavaScript, Python, etc.) for complex or unique features.</li><li><strong>Lower Costs</strong>: Save on development and maintenance in the long run.</li><li><strong>Centralized Maintenance</strong>: The platform often handles updates, security, and optimizations, reducing infrastructure overhead.</li></ul><h3>3. Possible Limitations</h3><ul><li><strong>Deep Customization</strong>: Can be tricky if you need features that extend beyond the platform’s standard offering.</li><li><strong>Platform Dependency</strong>: You rely on the platform’s ongoing development and ecosystem.</li><li><p><strong>License Fees</strong>: Some low-code platforms require a subscription or recurring cost.</p><p><img src="/sites/default/files/Hybrid%20low%20code_%201.png" width="1020" height="415"></p></li></ul><h2>The Growing Impact of AI in Development</h2><p>AI is playing an increasingly important role in creating and managing web applications:</p><ul><li><strong>Automation</strong>: AI can generate basic code, run automated tests, and handle continuous integration/continuous deployment (CI/CD).</li><li><strong>Personalized Experiences</strong>: AI and machine learning can analyze user behavior and adapt interfaces or content in real time.</li><li><strong>Predictive Issue Detection</strong>: Algorithms can identify anomalies or security risks before they escalate.</li><li><strong>Continuous Improvement</strong>: AI tools help gather and analyze user feedback to optimize your application.</li></ul><p>Whether you code your project entirely or rely on a low-code platform, AI provides tools and libraries to boost efficiency, performance, and innovation.</p><h2>Choosing the Best Approach for Your Project</h2><h3>Complexity of Features</h3><ul><li><strong>Coding From Scratch</strong>: Ideal if you need a highly specific or complex solution.</li><li><strong>Hybrid low code</strong>: Great for apps that can be built around standardized components</li></ul><h3>Time-to-Market</h3><ul><li><strong>Full Code</strong>: May require more development time.</li><li><strong>Hybrid low code</strong>: Allows you to launch a working prototype quickly to test your concept.</li></ul><h3>Team Expertise</h3><ul><li><strong>Full Code</strong>: Requires strong skills in front end, back end, and possibly DevOps.</li><li><strong>Hybrid low code</strong>: Enables teams with mixed technical backgrounds to collaborate effectively.</li></ul><h3>Budget</h3><ul><li><strong>Full Code</strong>: Typically involves higher development and maintenance costs.</li><li><strong>Hybrid low code</strong>: Helps reduce expenses (labor, deployment time), though you may pay licensing fees.</li></ul><h3>Scalability and Maintenance</h3><ul><li><strong>Full Code</strong>: You maintain total control, but also bear full responsibility for servers, updates, and security.</li><li><strong>Hybrid low code</strong>: The platform’s provider usually handles some level of updates and performance optimizations.</li></ul><img src="/sites/default/files/2%201.png" width="1020" height="415"><h2>Conclusion: Focus on Your Priorities</h2><p>Deciding between pure coding and a hybrid low-code platform depends on your objectives, deadlines, and available resources. Both approaches can leverage AI to streamline tasks and enhance app capabilities.</p><p>For a highly complex project that needs ultra-specific features and a fully customized architecture, coding from scratch remains a reliable option despite the higher cost and complexity.</p><p>For a quick launch or when operating on a tight budget, a hybrid low-code platform is often the best choice. You still have room for custom code to tailor the application as needed.</p><p>No matter which path you choose, the world of web development is evolving quickly, with AI taking on a larger and larger role. Make the most of AI-driven automation and analytics to create smarter, more efficient web apps.</p><h2>Going Further</h2><p>Try Out a hybrid low code platform with a free trial to see if it fits your needs.</p><p>Learn Basic Coding (HTML, CSS, JavaScript, etc.) if you’re new to development and want to understand your app’s foundation.</p><p>Keep an Eye on AI and automated development tools, which are growing more powerful each month.</p><p>At this point, you should feel more equipped to make the right choice. Take the time to analyze your project’s specific needs and resources. The success of your web app lies in selecting the right technical approach and in harnessing AI to deliver a product that delights your users and streamlines your workflow.</p><h2>Still Unsure?</h2><p>Identify a few must-have features for your new application and ask yourself if they are standard or completely unique.</p><p>Estimate an initial budget and compare it to what low-code development might cost.</p><p>Think about how AI (suggestions, automated tasks, content recommendations, etc.) could support your users and how you’d integrate it into your processes.</p><p>By following this methodical approach, you can make an informed decision and build a web app that meets your ambitions. Happy developing!&nbsp;</p>

<p><span lang="EN-US">This guide provides a quick start to integrating <strong>DeepSeek API</strong> with<strong> Qodly</strong>. We’ll be using the Qodly’s HTTPRequest class to send user queries to DeepSeek and retrieve AI-generated responses effortlessly.</span></p><p>&nbsp;</p><h2>1. Request your API key:</h2><p><span lang="EN-US">Before getting started, you’ll need to request your API key from DeepSeek’s website to authenticate your requests in your application.</span></p><p><span lang="EN-US"><strong>Base URL:</strong></span></p><p><span lang="EN-US">The API url we’ll be using in this demo :</span><code><span lang="EN-US"> </span></code><a href="https://api.deepseek.com/v1/chat/completions"><code><span lang="EN-US">https://api.deepseek.com/v1/chat/completions</span></code></a></p><p class="text-align-justify"><span lang="EN-US">^{The /v1/chat/completions endpoint will allow us to send chat-like queries to DeepSeek's API and receive AI-generated responses, enabling interactive, dynamic conversations within our application.}</span></p><p class="text-align-justify">&nbsp;</p><h2 class="text-align-justify">2. Integrate DeepSeek with Qodly:</h2><p class="text-align-justify">We’ll demonstrate how to connect to DeepSeek using Qodly’s HTTPRequest class within a singleton pattern, ensuring efficient API usage.<span lang="EN-US"></span></p><pre><code class="language-4d language-plaintext">shared singleton constructor() this.apiKey = "your_api_key" this.apiUrl="https://api.deepseek.com/v1/chat/completions" exposed function chatbot(prompt : string):string var&nbsp;jsonBody,content : string var&nbsp;data : object&nbsp;= newObject() var&nbsp;request : 4D.HTTPRequest var&nbsp;requestOptions,jsonResponse:object data.model = "deepseek-chat" data.messages = [(newObject("role", "user", "content",prompt))] data.temperature = 0.1 data.max_tokens = 500 jsonBody = jsonStringify(data) requestOptions = {} requestOptions.method = "POST" requestOptions.headers = newObject("Authorization", "Bearer "+this.apiKey, "Content-Type", "application/json") requestOptions.body = jsonBody requestOptions.dataType = "text" request = 4D.HTTPRequest.new(this.apiUrl, requestOptions) request.wait() if&nbsp;((request.response.status == 200) &amp;&amp; (valueType(request.response.body) == kString)) try jsonResponse = jsonParse(request.response.body) content = jsonResponse.choices[0].message.content catch content = "Error : Parsing went wrong." end else content = "Error : HTTP status: "+string(request.response.status) end return content</code></pre><ul><li><span style="font-family:Symbol;" lang="EN-US"></span><span lang="EN-US">API Initialization: The singleton constructor sets up the API key and URL. The singleton pattern ensures that only one instance of the connection is used throughout the application.</span></li><li><p style="line-height:normal;"><span lang="EN-US">Sending Requests: The chatbot function sends a user prompt to DeepSeek’s API via a POST request, with necessary headers (Authorization, Content-Type).</span></p></li></ul><pre><code class="language-4d language-plaintext">data.model = "deepseek-chat" data.messages = [(newObject("role", "user", "content",prompt))] data.temperature = 0.1 data.max_tokens = 500</code></pre><p style="margin-left:.25in;"><span lang="EN-US">Here’s a breakdown of those lines:</span></p><ul><li><p style="line-height:normal;"><span lang="EN-US"><strong>data.model = "deepseek-chat"</strong></span><em><span lang="EN-US">:</span></em><span lang="EN-US"> Specifies the AI model to use for generating responses.</span></p></li><li><p style="line-height:normal;"><span lang="EN-US"><strong>data.messages = [(newObject("role", "user", "content", prompt))]:</strong> Defines the messages for the chat, with the user's input (prompt) being passed in as the message content. The "role" is set to "user" to indicate the sender.</span></p></li><li><p style="line-height:normal;"><span lang="EN-US"><strong>data.temperature = 0.1</strong>: Controls the randomness of the response. The lower the value, the more deterministic and focused the response becomes.</span></p></li><li><p style="line-height:normal;"><span lang="EN-US"><strong>data.max_tokens = 500</strong>: Sets the limit of the response ‘length.</span></p></li></ul><pre><code class="language-4d language-plaintext"> jsonBody = jsonStringify(data) requestOptions = {} requestOptions.method = "POST" requestOptions.headers = newObject("Authorization", "Bearer "+this.apiKey, "Content-Type", "application/json") requestOptions.body = jsonBody requestOptions.dataType = "text" request = 4D.HTTPRequest.new(this.apiUrl, requestOptions) request.wait()</code></pre><p style="line-height:normal;">&nbsp;</p><p style="line-height:normal;"><span lang="EN-US">The code snippet performs one main action:</span></p><ul><li><p style="line-height:normal;"><span lang="EN-US">&nbsp;Setting up and sending the request, where data is stringified, HTTP request options are configured (method, headers, body, and response type), and the request is sent via 4D.HTTPRequest.new(), followed by waiting for the response.&nbsp;</span></p></li><li><p style="line-height:normal;"><span lang="EN-US">It then handles the response by parsing it and extracting the chatbot's reply, with error handling for any HTTP or parsing failures.</span></p></li></ul><p style="line-height:normal;">&nbsp;</p><pre><code class="language-4d language-plaintext"> if&nbsp;((request.response.status == 200) &amp;&amp; (valueType(request.response.body) == kString)) try jsonResponse = jsonParse(request.response.body) content = jsonResponse.choices[0].message.content catch content = "Error : Parsing went wrong." end else content = "Error : HTTP status: "+string(request.response.status) end return content</code></pre><p style="line-height:normal;">&nbsp;</p><ul><li><p style="line-height:normal;"><span lang="EN-US">This approach efficiently manages API connections and allows easy integration with DeepSeek’s AI-driven chat responses.</span></p><p style="line-height:normal;"><span style="font-size:14.0pt;" lang="EN-US"></span></p></li></ul><h2>3. Building the Interface</h2><p><span lang="EN-US">For the interface, you can create a simple layout with:</span><span style="font-size:14.0pt;line-height:115%;" lang="EN-US"></span></p><ul><li><span lang="EN-US">A <strong>Text Input</strong> that captures the user's question, which is then sent to the DeepSeek API.</span></li><li><span lang="EN-US">A <strong>Button</strong> that triggers the function from the singleton class. When clicked, it initiates the API call, sending the user input to the DeepSeek service and retrieving the response.</span></li><li><p><span lang="EN-US">A simple <strong>Text&nbsp;</strong>to show the API response.</span></p><p><span lang="EN-US">This ensures easy interaction with DeepSeek, allowing users to input questions and view results.</span></p></li></ul><img src="/sites/default/files/deepseek-qodly-integration.png" data-entity-uuid="fc25f7df-7906-4455-af8a-be4027900e72" data-entity-type="file" alt="" width="1020" height="415"><h2>4. Demo</h2><img src="/sites/default/files/deepSeekQodly.webp" width="906" height="428"><p>&nbsp;</p><h2>5. Conclusion</h2><p><span lang="EN-US">By integrating DeepSeek’s AI capabilities with Qodly, you can easily enhance your application’s data analysis features. The HTTPRequest class and singleton pattern streamline the process, making it easier to build scalable, data-driven solutions.</span></p>

<p>&nbsp;</p><p>When working on an application, dealing with data can be a hassle. You need to check what’s stored, filter specific records, and sometimes make quick edits without disrupting your workflow. That’s where <strong>Qodly’s Data Explorer</strong> comes in. It gives you a straightforward, easy-to-use interface to browse, search, and manage your application’s data, making development and debugging much smoother.</p><p>&nbsp;</p><h3>Why should you care about Data Explorer?</h3><p>&nbsp;</p><ul data-spread="false" data-pm-slice="3 3 []"><li><span><strong>See your data at a glance</strong> – No more guessing what’s in your datastore. Everything is displayed in an organized way.</span></li><li><span><strong>Add, edit, and delete records with ease </strong>– Manage your data directly without switching tools.</span></li><li><span><strong>Save changes instantly –</strong> Update your data on the spot and keep your workflow smooth.</span></li><li><span><strong>Stay in control </strong>– Whether you're debugging or refining your app, Data Explorer gives you full control over your data.</span></li></ul><p>&nbsp;</p><h3><span>Watch it in action</span></h3><p><span>To fully understand the power of Qodly’s Data Explorer, check out this video demo showcasing its key features:</span></p><p><iframe width="857" height="482" src="https://www.youtube.com/embed/7g9ON_IzhbY" title="Qodly Data Explorer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe></p><p>&nbsp;</p><h3><span>How Does It Fit Into Your Workflow?&nbsp;</span></h3><p><span>Instead of treating data management as a chore, Qodly’s Data Explorer turns it into a straightforward part of your development process. Whether you’re tracking down a bug or testing new features, having direct access to your data means you can focus on building your app—not wrestling with your database.&nbsp;</span></p><p><span>Ready to give it a try? Open </span><a href="https://cloud.qodly.com/" target="_blank"><span>Qodly’s Data Explorer</span></a><span> and start exploring your data today!</span></p>

<p>Welcome back to our <a href="https://qodly.com/blog/calling-all-qodly-newbies-build-simple-pet-contest-app" target="_blank">pet contest app</a> journey!&nbsp;</p><p><a href="https://qodly.com/blog/calling-all-qodly-newbies-build-simple-pet-contest-app" target="_blank">In the previous post</a>, we built the core functionality of our application using Qodly’s powerful low-code tools. Now, it’s time to make it visually appealing with CSS!&nbsp;</p><p><strong>Best part? We won’t use a single line of CSS code!</strong> Everything will be configured directly from Qodly’s Property List, making styling effortless—even if you have no prior experience with CSS.&nbsp;</p><p>In this post, we’ll explore how to customize colors, fonts, and spacing and add stylish buttons and pet cards.</p><p>Let’s get started!</p><p>This is the <strong>mockup I received from our designer</strong>, so let’s try to <strong>make it as close as possible</strong> using Qodly’s built-in styling tools.</p><p>&nbsp;</p><img src="/sites/default/files/pet-1.png" data-entity-uuid="e8358ea8-8939-42fd-848b-d84ec67dd1a2" data-entity-type="file" alt="" width="1020" height="372"><p>&nbsp;</p><h2>Customizing the Overall Look&nbsp;</h2><h3>Adding a Background Image</h3><p>A great background sets the mood for our app. Here’s how to add one:</p><ol><li>Drag and drop a background image of your choice (in my case, the one with cute cat paws) into your <strong>Shared → visual</strong> folder:</li><li>Open the <strong>Background</strong> section in the Property List.</li><li>Under Background → Image,</li><li>Drop the image from your visuals folder into the webform, and voilà—the background is set! 🐾</li></ol><h3>Using a Solid Color Instead</h3><p>If you prefer a clean look, you can use a light beige color instead:&nbsp;</p><ol><li>In the Property List, find Color -&gt; Background.</li><li>Set the color to #FFF4E6 (light beige).&nbsp;</li></ol><p>Either option instantly transforms your app's feel, making it warm and inviting!</p><p>&nbsp;</p><h2><img src="/sites/default/files/pet-2.png" data-entity-uuid="e39c8f38-e935-4889-ab93-b81c10d3b086" data-entity-type="file" alt="" width="1020" height="295"></h2><p>&nbsp;</p><h2>Styling the Voting Section</h2><h3>Enhancing the Random Pet Display</h3><p>To ensure the pet images look great:&nbsp;</p><ol><li>Select the image component.</li><li>In the Property List, apply:</li></ol><ul><li>Border Radius: 50px (for round images)</li><li>Display: Flex</li><li>Justify Content &amp; Align Items: Center&nbsp;</li></ul><p>This makes each pet image look clean and perfectly centered!</p><p>&nbsp;</p><h3>Enhancing the Voting Buttons</h3><p>Let’s make the "Cute" and "Not Cute" buttons stand out:&nbsp;</p><ol><li>Select the button component and go to the Property List.</li><li>Adjust the Background Color to Light Carmine Pink (#E85D66) for "Not Cute" and Keppel (#41B6A6) to "Cute" .</li><li>Set the Text Color to White (#FFFFFF).</li><li>Increase the Border Radius to 6px for rounded edges.</li><li>Feel free to adjust the height and width as well.</li><li>💡 Want icons? Add a <strong>read heart </strong><span class="s1">♥️</span> and <strong>thumbs-down</strong> 👎 to make them even more engaging!<br>&nbsp;</li></ol><p><img src="/sites/default/files/pet-3.png" data-entity-uuid="f023dd3d-8fdb-4b85-8451-d3b3aa26574d" data-entity-type="file" alt="" width="1020" height="295"></p><p>&nbsp;</p><h2>Refining the Pet Matrix</h2><p>Before, the pet matrix looked cluttered, with overlapping entries. Here’s how to fix it:</p><ol><li>In the Property List, set the height of the matrix to 400px.</li><li>Use Flexbox. Justify Content &amp; Align Items: Center</li><li>Apply a Border Radius of 50px for a cute, rounded effect for the images.&nbsp;</li></ol><p>Now, our pet list looks clean and well-organized!</p><p>&nbsp;</p><img src="/sites/default/files/pet-4.png" data-entity-uuid="8d1ebfb5-6626-4842-bd4b-0a5acfdb2648" data-entity-type="file" alt="" width="1020" height="253"><p>&nbsp;</p><h2>Styling the Add Pet Section</h2><h3>Enhancing the Add Pet Button</h3><p>Make the <strong>"Add New Pet"</strong> button visually appealing:</p><ol><li>Select the button in the webform.</li><li>In the Property List, set:<ol><li>Background Color: Indian Yellow (#E5A04B)</li><li>Text Color: White (#FFFFFF)</li><li>Font Size: 14px,</li><li>Bold Border Radius: 6px</li></ol></li><li>Add a plus (+) icon, position it to the left, and set the color to #FFFFFF.</li><li>Adjust the Padding for a balanced layout.</li></ol><h3>Perfecting the Modal</h3><ol><li>Set a Default Pet Image<ol><li>Select the <strong>image component</strong>.</li><li><em>Follow the steps in the section Adding a Background Image to add a default image</em>. This can provide a visual cue to users about what kind of image they should upload.</li></ol></li><li>Center the modal<ol><li>In the <strong>Layout</strong> section, set <strong>Alignment</strong> to <strong>Center</strong>.</li><li>Adjust <strong>Margins &amp; Padding</strong> for proper spacing.</li></ol></li><li>Style the Upload Button<ol><li>Select the Upload Image component.</li><li>Choose a camera icon 📷 from the Icon Picker.</li><li>Set the Button Color to #E5A04B (to match the "Add Pet" button).</li></ol></li><li>Refine Input Field<ol><li>Add a <strong>light border</strong> and <strong>6px rounded corners</strong>.</li><li>Adjust the <strong>font size</strong> for readability.</li></ol></li><li>Customize the Save Button<ol><li><strong>Background Color</strong>: <strong>#E5A04B</strong></li><li><strong>Text Color</strong>: <strong>#FFFFFF</strong></li><li>Adjust <strong>padding</strong> for a well-proportioned look.</li></ol></li></ol><p><img src="/sites/default/files/pet-5.png" data-entity-uuid="0fd117bc-0103-4202-9362-1f4a8c8a9d3d" data-entity-type="file" alt="" width="1020" height="295"></p><p>&nbsp;</p><h2>Bringing It All Together&nbsp;</h2><p>With just a few tweaks in the <strong>Property List</strong>, we transformed our app from screen 1 to 2:</p><p>&nbsp;</p><img src="/sites/default/files/pet-6_0.png" data-entity-uuid="3656363e-9ecf-4a80-a8c0-28032e73c774" data-entity-type="file" alt="" width="1020" height="295"><p>&nbsp;</p><p>And we did it all <strong>without writing a single line of CSS</strong>—just using Qodly’s built-in styling tools!</p><p>Feel free to play around with different styles! If you have questions or styling ideas, connect with us on the <strong>Qodly Forums</strong>! 🚀</p>

<p>In my journey as a web developer, I have worked on many web application development projects. These range from large enterprise systems to quick, simple MVPs. I have learned that balancing efficiency and customization is crucial in the projects.&nbsp;</p><p>This is especially true when clients want to replace slow paper processes with quick digital solutions. Low-code and hybrid platforms have changed my development strategy. They have opened new ways to create impactful applications.</p><h2>The Dual Nature of Development Projects</h2><p>Throughout my career, I've worked on a diverse range of projects that can generally be categorized into two main types:&nbsp;</p><p><strong>Complex, Evolving Projects:</strong> These projects grow over time, with new features added in successive phases. The challenge here is that every update or tweak can involve extensive coding and reworking of existing structures. While full-scale custom development gives the flexibility needed for such projects, it also demands significant time and resources.&nbsp;</p><p><strong>Lean, Purpose-Driven MVPs:</strong> Many clients want to launch a minimal viable product quickly. This product should streamline processes and minimize reliance on outdated, manual tasks. These projects often have a small budget and a clear objective. They aim to quickly change inefficient paper-based workflows into a digital solution that can scale over time.&nbsp;</p><p>&nbsp;</p><p><img src="/sites/default/files/2025-02/Balancing%20development%20platforms.png" data-entity-uuid="e9f5bf57-277c-4cbf-bda6-163536f3922a" data-entity-type="file" alt="" width="1020" height="415"></p><p>&nbsp;</p><h2>The Constraints: Budget and Resource Limitations&nbsp;</h2><p>Often, small clients have tight budgets and fewer resources, lacking dedicated teams for development, infrastructure, and DevOps. In such situations, efficiency isn’t just beneficial—it’s essential. The challenge is delivering a reliable, functional product without over-investing time or money on extensive custom coding.&nbsp;</p><h2>Low-Code/Hybrid Platforms: A Game Changer&nbsp;</h2><p>Low-code and hybrid platforms have emerged as a powerful tool in my development toolkit. Here’s why they’ve been transformative:&nbsp;</p><h3>1. Streamlined Development, Focused Coding&nbsp;</h3><p>With low-code platforms, I can focus on solving specific business problems. I don't have to recreate common features for each project. The philosophy is simple: code only when there’s no alternative. This approach reduces redundant work and allows me to leverage pre-built modules for standard functionalities, accelerating the development process.&nbsp;</p><h3>2. Rapid Prototyping and Iteration&nbsp;</h3><p>One of the greatest benefits of these platforms is the ability to quickly roll out functional prototypes. Instead of spending months developing a small application from scratch, I can quickly assemble a working MVP. This not only impresses clients with fast turnarounds but also provides a solid foundation for future enhancements as their business grows.&nbsp;</p><h3>3. Effortless Modifications and Maintenance&nbsp;</h3><p>Client requirements can evolve, and when they do, low-code platforms make modifications straightforward. Instead of diving back into lines of code to make adjustments, many changes can be handled by tweaking existing components. This ease of modification significantly reduces maintenance headaches and allows for more agile responses to new business demands.&nbsp;</p><h3>4. Custom Components When Needed&nbsp;</h3><p>A common concern with low-code solutions is the perceived limitation on customization. However, hybrid platforms bridge that gap beautifully. They offer the best of both worlds. You get a robust library of ready-made components. You also have the freedom to write custom code for special features. This means I can address specialized requirements without sacrificing overall development speed.&nbsp;</p><h3>5. Cost Efficiency and Scalability&nbsp;</h3><p>For small businesses with tight budgets, low-code platforms offer an invaluable solution. They provide an affordable pathway to digital transformation, streamlining processes and cutting down on manual tasks without the need for massive investments. As a business expands, the initial low-code application can seamlessly evolve—either by scaling up within the same platform or serving as a stepping stone towards more comprehensive systems like ERP or CRM solutions.&nbsp;</p><p>&nbsp;</p><p><img src="/sites/default/files/2025-02/The%20power%20of%20low-code%20platfirms.png" data-entity-uuid="f875b72f-340b-43b1-a380-2aedac4f701b" data-entity-type="file" alt="" width="1020" height="415"></p><p>&nbsp;</p><h2>Maintaining the Developer’s Edge&nbsp;</h2><p>It's important to clarify: embracing low-code platforms does not mean abandoning traditional coding. On the contrary, these platforms free me to focus on the more challenging aspects of a project—the custom business logic and unique requirements that truly differentiate an application. By handling routine tasks through low-code, I can devote more time to creative problem-solving and innovation.&nbsp;</p><h2>Final Reflections&nbsp;</h2><p>Low-code and hybrid platforms have reshaped my approach to web development. They offer a strategic advantage for projects that require quick delivery and easy modifications without compromising the ability to customize when it matters.&nbsp;</p><p>This balance has allowed me to serve clients better—especially small businesses looking for fast, efficient solutions that address immediate needs and have the potential to grow with their ambitions. In a rapidly evolving digital landscape, choosing the right tools is key.&nbsp;</p><p>For me, low-code platforms have proven to be a critical asset, enabling a smoother development process, reducing overhead, and ultimately empowering businesses to move forward confidently into the future.&nbsp;</p>