DEV Community: Seif Almotaz Bellah

Stop Generating "AI Slop": The Developer's Guide to Google Stitch

Seif Almotaz Bellah — Mon, 22 Dec 2025 02:37:01 +0000

The release of "Stitch with Google," powered by Gemini 2.5, has triggered a massive shift in how we build UIs. We are moving from an imperative model (manually pushing pixels in Figma) to a declarative one (describing intent and letting the AI render it).

But there is a catch.

If you use "naive" prompts, you get "naive" results—generic, vanilla interfaces that look like every other AI-generated template. To get production-ready code, you need to stop asking for "a cool website" and start engineering your prompts with semantic precision.

This guide acts as a taxonomy for high-fidelity prompting in Stitch. We’ll move beyond the basics and look at how to control aesthetic, structure, and code output to build interfaces that actually look like they were designed by a human.

The Anatomy of a High-Fidelity Prompt

Stitch doesn't just "paste" images together; it tokenizes your prompt into categories. If you leave a category out, the AI "hallucinates" the missing parameters based on the most common (read: boring) data it has.

To avoid the "AI Slop" look, your prompt needs four distinct layers, acting like a CSS stylesheet:

Context: Who is this for? (e.g., "Fintech app" triggers different colors than "Children's game").
Structure: The layout topology (e.g., "Bento grid," "Sidebar navigation").
Aesthetic: The "vibe" (e.g., "Vintage," "Brutalist").
Tech Stack: The execution medium (e.g., "Tailwind CSS," "Dark Mode").

Naive vs. Expressive Prompting

The difference between a junior and senior prompt engineer is specificity.

Feature	Naive Prompt (Don't do this)	Expressive Prompt (Do this)
Aesthetic	"Make it look cool."	"Apply a retro-futurist aesthetic with neon accents, CRT scanline textures, and cyberpunk typography."
Layout	"Show some photos."	"Arrange images in a bento box grid with varying aspect ratios, rounded corners, and hover-state scaling."
Color	"Use blue."	"Utilize a monochromatic indigo palette with electric blue highlights and matte black backgrounds."
Tech	"Make a website."	"Generate a responsive landing page using Tailwind CSS utility classes and glassmorphism card effects."

decoding the "Vibe": Aesthetic Semantics

The most powerful lever you have is the style modifier. Using precise art-history or design terms works better than vague adjectives.

1. Vintage vs. Retro

These are often used interchangeably, but they trigger completely different rendering paths.

Vintage implies authenticity, age, and texture (paper grain, ink bleed).
Retro implies a modern homage (80s Synthwave, pixel art).

The Vintage Prompt:

Design a recipe app with a vintage aesthetic. Use textured paper backgrounds, hand-drawn illustrations of ingredients, and classic serif typography reminiscent of a 19th-century cookbook. Ensure the UI controls look like analog paper tags.

The Retro Prompt:

Create a retro music player interface inspired by the 1980s Walkman. Use tactile buttons, chrome textures, and a synthwave neon color palette against a dark background. Use monospaced fonts for the tracklist.

![Insert screenshot of Vintage vs Retro comparison here]

2. The "Cultured" Aesthetic

If you want that high-end, Awwwards-style look, use words like "Editorial," "Bespoke," or "Museum-curatorial." This tells Stitch to maximize whitespace and restrict the color palette.

The Cultured Prompt:

Design a cultured, editorial-style landing page for an architecture firm. Prioritize massive whitespace, elegant serif typography for headlines (e.g., Playfair Display), and full-width monochromatic photography. The vibe should be museum-curatorial.

3. Brutalism & Neubrutalism

For edgy, Gen Z-focused brands, Brutalism instructs the AI to ignore standard conventions like rounded corners and soft shadows.

The Neubrutalist Prompt:

Generate a Neo-brutalist e-commerce store. Use clashing high-contrast colors (yellow and black), thick black borders around all containers, monospaced typography, and hard, unblurred drop shadows to create a sticker-like effect.

Structural Semantics: Defining the Layout

Don't let the AI guess the layout. It will almost always give you a single-column stack. Give it a blueprint.

The "Bento Box" Grid

Popularized by Apple and Linear, this organizes content into a unified grid of rectangular tiles.

Prompt:

Create a personal portfolio using a Bento box grid layout. Divide the screen into rectangular tiles of varying sizes: a large square for the profile photo, a wide rectangle for the 'About Me' text, and smaller square tiles for social media links. Use rounded corners and soft gap spacing.

Masonry Layout

Perfect for image-heavy feeds (like Pinterest).

Prompt:

Design a photography feed using a masonry layout. Allow images to retain their original aspect ratios, creating a staggered, waterfall effect. Ensure infinite scroll behavior is implied.

Lighting & Materiality: Beyond Flat Design

Modern UI isn't flat; it has physics. You can use photography terms to control how light hits your UI elements.

Glassmorphism: Simulates frosted glass (iOS style).
Neumorphism: Simulates extruded soft plastic.
Cinematic Lighting: Creates dramatic depth.

The Glassmorphism Prompt:

Design a weather app using glassmorphism. Place translucent white cards over a dynamic, colorful abstract background. Apply a high background blur (backdrop-filter) and a subtle white outline to each card.

![Insert screenshot of Glassmorphism UI here]

Technical Constraints: Getting Production Code

Stitch exports code, so speak to it like a developer. If you want Tailwind, ask for it explicitly.

Tailwind: "Use standard Tailwind spacing (p-4, m-8) and slate-900 colors."
Material Design 3: "Use dynamic color tokens and standard MD3 elevation."
Responsive: "Mobile-first, stack elements vertically on small screens."

The Code-Ready Prompt:

Design a landing page using Tailwind CSS utility classes. Use a split-screen layout for desktop and a vertical stack for mobile. Style buttons with 'rounded-full' and 'hover:bg-blue-600'.

The Refinement Loop

Your first prompt won't be perfect. The power of Stitch is in the conversational iteration.

Anchor: "Create a mobile app for a coffee shop with a vintage industrial vibe."
Inject: "Add a bottom nav bar with icons for Home, Order, and Profile."
Tune-up: "Make the buttons fully rounded with a coffee-brown color. Change the background to a textured paper grain."
Fix: "The design is too modern. Revert to the vintage theme. Use serif fonts for headers and add a sepia filter."

📋 Copy-Paste Prompt Templates

Here are three "Master Templates" you can copy right now to get started.

Template A: High-End E-Commerce ("Cultured")

Design a responsive web homepage for a high-end furniture brand. The aesthetic should be cultured and minimalist, inspired by Scandinavian design.
Layout: Use a split-screen hero section with a large editorial photo on the left and elegant serif typography (e.g., Bodoni) on the right.
Content: Below the hero, use a masonry grid to showcase products with generous whitespace around each item.
Colors: Use a monochromatic beige and charcoal palette.
Tech: Style buttons with sharp edges and a 1px solid black border (ghost buttons).

Template B: Crypto Dashboard ("Retro-Futurist")

Create a mobile crypto dashboard app with a Retro-Futurist / Cyberpunk vibe.
Background: Deep midnight blue with a faint grid pattern overlay.
Elements: Neon green and electric purple for data lines.
Cards: Apply glassmorphism (translucent blur) with a thin holographic border.
Font: Monospaced font for all numbers to mimic a terminal.
Navigation: Bottom tab bar with glowing icons.

Template C: Recipe Journal ("Vintage")

Design a recipe sharing app with a Vintage aesthetic, evoking an old handwritten journal.
Texture: Apply a paper grain texture to the background.
Typography: Handwritten script for titles, legible serif for instructions.
Colors: Warm cream, sepia, and faded ink blue.
UI Elements: Style buttons to look like stamped ink or paper tags.
Layout: Single-column card view where each card looks like a physical recipe card.

Conclusion

Design is becoming a linguistic act. Your role is evolving from "creator of artifacts" to "curator of specifications." By mastering terms like Masonry, Glassmorphism, and Neubrutalism, you unlock the ability to generate UIs that don't just work—they feel human.

Have you tried Stitch yet? Drop your best prompt in the comments below!

Why Still Use Django Over FastAPI?

Seif Almotaz Bellah — Thu, 04 Jul 2024 21:54:13 +0000

As a developer, I continue to use Django despite all the hype around FastAPI. You might be thinking, "Dude, why complicate things? Just use FastAPI and make it simple." Let's dive into this topic by discussing some use case scenarios where Django still shines.

My Work Context

I work as a freelancer on various projects and also in a company setting. My primary role is as a mobile application developer using Dart/Flutter. This means that my work often involves creating MVPs (Minimum Viable Products) and startup projects that need to go into production as quickly as possible. This requires a software engineer to be mindful of several factors:

Developer Time and Popularity

First, there's the cost of developer time and the popularity of the language or framework being used. Choosing a well-known and widely-used framework can save time and resources in the long run.

Speed and Efficiency

Second, time is of the essence. As a developer, my main focus is on reducing the time spent developing and maintaining project code. This includes writing code, deploying it, migrating it, and testing it. Additionally, I need to be able to fix bugs quickly and add features as soon as possible, especially for startups. There's simply no time to be constantly migrating database schemas or worrying about the code not starting.

The Solution: Why Django?

To address these challenges, I focus on a few key points:

Using Python

Python is incredibly popular due to its ease of use and the robust libraries it offers. This makes it easy to get developers up to speed and working on a project quickly, especially if the project is well-documented (which, as a diligent software engineer, I ensure it is! 😊).

Using Django

As part of the Python ecosystem, Django is a robust framework that many rely on for production-ready applications. While it does have its downsides, which we'll discuss later, it offers several benefits that make it a solid choice over FastAPI:

ORM (Object-Relational Mapping): Django's ORM simplifies database interactions, allowing for effortless migrations and providing an array of field types that cover almost every need a developer might have.
Admin Panel: The Django admin panel is one of my favorite features. It saves a tremendous amount of time for startups and clients by providing a ready-made interface to manage application data. While a custom admin panel might be necessary down the line, the default admin panel is a great starting point for early-stage projects.
Extensions: Django has a rich ecosystem of extensions that can be easily integrated, further speeding up the development process.
Authentication: Built-in authentication support in Django simplifies the implementation of user management, saving time and effort.

Additionally, Django signals are a crucial feature for me. They provide a way to trigger events and execute code in response to changes in the data, eliminating the need to create a custom system for it.

APIs for Mobile Applications

Given that I primarily develop mobile applications, APIs are a crucial part of my work. To be fair, FastAPI does offer a significant benefit with its OpenAPI generated schema. This feature greatly enhances developer productivity by providing automatically generated API documentation. Front-end developers appreciate this as it allows them to get API docs quickly and use client-side generators with the OpenAPI file/code.

Combining Django with Django Ninja

To leverage this benefit, I use Django Ninja. While I'm not a fan of Django REST Framework (DRF) due to its performance and reliance on "magic," Django Ninja strikes a balance. It's similar to FastAPI in its simplicity and effective use of type hinting, but it doesn't overload with unnecessary features. Django Ninja also utilizes Pydantic for data validation, which adds to its robustness.

Embracing the Magic of Django

A lot of senior backend developers tend to dislike the "magic" that Django offers. However, as an experienced software engineer, I see this magic as a good thing—especially when you understand how it works behind the scenes. By reading the Django documentation and gaining familiarity with other frameworks like Flask, FastAPI, and SQLAlchemy, you can demystify the magic. This understanding enables you to appreciate the productivity boost that Django's abstractions provide.

The Cons of Django

While Django has many strengths, it's important to be aware of its limitations, especially when choosing it for a project. Here are some cons from my perspective, particularly in the context of building MVPs:

Async Code

Although Django 5 has introduced support for async code, it remains a fundamentally synchronous framework. Many of its components are not optimized for asynchronous operations, which can be a limitation if your project requires extensive async functionality.

Performance and Memory Usage

Django can be resource-intensive. A bare metal project using Django typically consumes at least 40 MB of RAM, which can be a lot compared to other frameworks. This can be a concern if you're working on a project with strict memory usage requirements.

Real-Time Capabilities

Django is not the best choice for applications that depend heavily on real-time features like WebSockets or Server-Sent Events (SSE). For projects requiring real-time communication, Python as a whole might not be the best option. In such cases, I would prefer using Node.js or Go, depending on the specific project requirements.

Conclusion

In conclusion, while FastAPI presents compelling advantages in API generation and performance, Django remains my preferred choice for backend development in mobile application MVP projects. Its robust ecosystem, ease of use within the Python ecosystem, and productivity-enhancing features like the admin panel outweigh its limitations in async operations and real-time capabilities. Understanding these trade-offs ensures I can effectively choose and utilize Django for projects requiring rapid development and scalability.

Navigating Environment Variables in Flutter Projects: Strategies for Effective Integration

Seif Almotaz Bellah — Sun, 07 Jan 2024 15:32:47 +0000

In this blog post, we'll explore how to make your Flutter development environment more efficient by adjusting environment variables. There are two ways to do this. First, you can specify variables directly in the run command using --dart-define=SOME_VAR=SOME_VALUE. Alternatively, you can store them in a JSON file and then parse the file within your Flutter application.

What are environment variables & why use them?

Environment variables are like secret codes for your computer, storing important information needed by different apps. They help control how programs run and behave. Imagine them as flexible tools that let you configure and customize your software without changing the code. Developers love them for securing things like API keys or database credentials, managing these details outside the code for better security and adaptability.

How to get environment variables in Dart

In Dart, there are two ways to get environment variables. The first way is using String.fromEnvironment or bool.fromEnvironment functions (there are similar ones for int and double). The second, simpler method is using Platform.environment. Let's compare them:

String.fromEnvironment

Purpose: Access environment variables defined during compilation or running using --dart-define flags.
Scope: Dart code only.
Usage:

  const apiUrl = String.fromEnvironment('API_URL', defaultValue: 'http://localhost:8080');

Platform.environment

Purpose: Access platform-specific environment variables.
Scope: Dart code and platform channels.
Usage:

  String sdkVersion = Platform.environment['FLUTTER_SDK_VERSION'];

Key Differences:

Source:
- String.fromEnvironment: --dart-define flags during compilation or running.
- Platform.environment: Platform-specific variables.
Visibility:
- String.fromEnvironment: Dart code only.
- Platform.environment: Dart code and platform channels.
Mutability:
- String.fromEnvironment: Constant (set at compile time).
- Platform.environment: Dynamic (changeable at runtime).

When to Use Each:

Use String.fromEnvironment for:
- Sensitive information.
- Values changing based on build configurations.
Use Platform.environment for:
- Platform-specific settings.
- Communicating with native code.

Best Practices:

Keep sensitive info in environment variables using --dart-define flags.
Don't hardcode sensitive values.
Use a separate config file for env variables in production.
Consider a dependency injection framework for managing env variables in larger projects.

Setting environment variables through the run command:

Enhancing your Flutter development environment can be as easy as tweaking the run command. By adding --dart-define=SOME_VAR=SOME_VALUE, you're telling Flutter to use specific values during execution. For example:

flutter run --dart-define=API_KEY=your_actual_api_key

This method lets you customize environment variables on the fly, making your development process more efficient.

Simplifying with a JSON file:

For a more organized approach, create a JSON file (let's call it env.json) to store your variables:

{
   "SOME_VAR": "SOME_VALUE",
   "SOME_VAR_2": "SOME_VALUE_2"
}

Now, when running Flutter, use the --dart-define-from-file flag to parse variables from this JSON:

flutter run --dart-define-from-file=env.json

This method is great for managing multiple variables, enhancing the organization and readability of your configuration. It's a win for a smoother development environment in Flutter.

VS Code

To incorporate custom Flutter commands like --dart-define and define the path for an environment file in Visual Studio Code, follow these steps:

Open the launch.json file by clicking on the "Run and Debug" button, then selecting the settings icon.

Inside the launch.json file, locate the configurations section.
Add the desired args, such as --dart-define=BASE_URL=http://localhost:3000, within the configuration you want. For instance:

   {
       "name": "testapp",
       "request": "launch",
       "type": "dart",
       "args": [
           "--dart-define=BASE_URL=http://localhost:3000"
       ],
       "env": {
           "VAR_EXAMPLE": "VALUE"
       }
   }

Ensure the values match your project structure.

This allows you to customize your Flutter project settings directly within Visual Studio Code, enhancing your development experience.

As you can observe, we've included an "env" key. This is a feature introduced by Visual Studio Code to facilitate the management of your environment variables.

Conclusion

In conclusion, optimizing your Flutter development environment through environment variable adjustments, be it in run commands or a JSON file, offers efficiency and flexibility. Recognizing their significance for securing sensitive data and adapting to various configurations is crucial. Dart's tools like String.fromEnvironment and Platform.environment provide dynamic control, while Visual Studio Code simplifies integration through its launch.json file. This streamlines the process, enhancing the security and efficiency of Flutter applications. Choosing the method that aligns with your project's needs contributes to a more seamless and productive development experience.

Flutter Project Architecture: Organizing for Clarity and Efficiency

Seif Almotaz Bellah — Sat, 30 Dec 2023 16:36:57 +0000

Hey Flutter devs! 👋 Let's dive into an approach for organizing your Flutter project to ensure clean and maintainable code. I'll guide you through my preferred project structure, naming conventions, and some useful tips.

Project Structure Unveiled

Let's start with the breakdown of my project structure:

- core
  -- api
  -- models
  -- helpers
  -- utils
  -- constants
- pages
- services
- components (shared among all pages)

Pages Unveiled

Maintaining order is key, especially with multiple pages. Take a user CRUD as an example, organize it like this:

pages/
|-- users/
    |-- update/
        |-- update.dart (UI widget)
        |-- controller.dart (GetX controller)
        |-- components (page-specific components)

Pay attention to naming! For the widget file, I go for UsersUpdatePage, making it crystal clear that it's about updating users. This aids in autocomplete, making your coding life a breeze.

Controller Chronicles

Always keep logic away from UI. In the controller.dart file, meet the UsersUpdateController. Functions like onPressed and onTap find their home here.

Components Realm

For components specific to a page, create a folder within the page, like so:

pages/
|-- users/
    |-- update/
        |-- components/ (components specific to this page)

For shared components used across all pages, maintain a separate folder:

components/ (shared components used across all pages)

Services Hub

Global controllers or providers, like AuthProvider, find their spot here. Stick to the same naming conventions and logic separation as in the pages.

Constants Abode

For constants, such as API base URLs or color themes, create a folder. Keep it tidy and organized.

Coding Hacks

Global Storage: Using GetStorage or SharedPreferences, create a class. It provides a readable way to handle keys and avoids typos.

class StorageProvider {
     static String? get userToken => getStorage.read<String>('userToken');
     static set userToken(String? token) => getStorage.write('userToken', token);
     static void removeUserToken() => getStorage.remove('userToken');
}

Models Folder: Keep models like UserModel in the models folder. If using JsonSerializable, organize generated code in a generated folder, simply by adding this code to your build.yaml file:

targets:
  $default:
    builders:
      source_gen:combining_builder:
        options:
          build_extensions:
            "^lib/core/models/{{}}.dart": "lib/core/models/generated/{{}}.g.dart"

Logic in Controllers: The Saga of Separation

One of the core principles in software development is the separation of concerns. In Flutter, clean separation of UI and logic is achieved by placing logic in controllers.

1. UI in UsersUpdatePage:

Focus solely on the presentation layer when designing the UI in the UsersUpdatePage widget. Craft visual elements, arrange widgets, and define the layout. Keep complex logic away.

class UsersUpdatePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Update User'),
      ),
      body: Column(
        // UI elements here
      ),
    );
  }
}

2. Functions in Controller:

For functions related to user updates, create a corresponding controller, like UsersUpdateController. Move functions like onPressed or onTap here.

class UsersUpdateController extends GetxController {
  // Controller logic here

  void updateUser() {
    // Logic for updating user
    // Access data, call APIs, perform validations, etc.
  }

  // Other functions related to the update process
}

3. Benefits of Separation:

Readability and Maintainability: UI remains clean. Developers grasp and modify the presentation layer without being overwhelmed by complex business logic.
Reusability: Controllers can be reused across multiple pages or components, making it easy to maintain and scale your project.
Testing: Separating logic into controllers facilitates unit testing.

4. Example: Using the Controller in UI:

class UsersUpdatePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final UsersUpdateController _controller = UsersUpdateController();
    return Scaffold(
      appBar: AppBar(
        title: Text('Update User'),
      ),
      body: Column(
        children: [
          // UI elements here
          ElevatedButton(
            onPressed: _controller.updateUser,
            child: Text('Update'),
          ),
        ],
      ),
    );
  }
}

This approach keeps your codebase organized, modular, and easy to maintain, crucial for scalability.

Private Variables: Mastering Control and Modularity

In Flutter, managing your application's state is vital, and as projects grow, controlling your variables becomes essential. Private variables and accessor functions (getters and setters) play a significant role in achieving an organized and maintainable codebase.

1. Why Private Variables?

Private variables, denoted by an underscore _, are not accessible outside the declaring class. This encapsulation ensures that the internal state of your controller is not directly manipulated from other parts of your codebase.

2. Getter and Setter Functions:

Use getter and setter functions to interact with private variables. This adds control over how data is accessed and modified.

class UsersUpdateController extends GetxController {
  // Private variable
  String _userName = '';

  // Getter
  String get userName => _userName;

  // Setter
  set userName(String name) => _userName = name;

  // Other functions can now access _userName via the getter and setter
}

3. Benefits of Encapsulation:

Controlled Access: Private variables restrict direct access, allowing you to manage when and how data is modified.
Data Validation: Setter functions enable you to add validation logic.
Centralized Logic: All logic related to a specific variable is centralized within the controller.

4. Example Usage:

class UsersUpdatePage extends StatelessWidget {
  final UsersUpdateController _controller = UsersUpdateController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Update User'),
      ),
      body: Column(
        children: [
          // UI elements here
          TextField(
            onChanged: (newName) => _controller.userName = newName,
            // Use _controller.userName to access the variable indirectly
          ),
        ],
      ),
    );
  }
}

By adopting this approach, you maintain control over your variables, ensure data consistency, and enhance the modularity of your Flutter project.

Widget Naming Odyssey: Clarity and Consistency

1. Page Widgets:

For pages, follow a clear and descriptive naming convention. Combine the feature name, action, and "Page."

class UsersUpdatePage extends StatelessWidget {
  // Widget code
}

2. Component Widgets:

For reusable components within a page, keep names concise but descriptive.

class UserNameInput extends StatelessWidget {
  // Widget code
}

Controller Naming Expedition: Organization and Readability

1. Page Controllers:

Follow a similar pattern for page controllers, incorporating the feature and action.

class UsersUpdate

Controller extends GetxController {
  // Controller logic
}

2. Component Controllers:

If you have controllers specifically for components, consider appending "Controller" to the component's name.

class UserNameInputController extends GetxController {
  // Controller logic
}

Components Naming Journey: Specificity and Reusability

1. Page-Specific Components:

For components specific to a page, keep the naming within the page's context.

pages/
|-- users/
    |-- update/
        |-- components/
            |-- user_name_input.dart

2. Shared Components:

If a component is shared among multiple pages, consider a more general name.

components/
    |-- custom_button.dart

Key Takeaways:

Descriptive and Consistent: Maintain a consistent and descriptive naming convention for widgets, controllers, and components.
Combine Feature and Action: Incorporate both the feature and the action into the names for better clarity.
Contextual Naming: Consider the context of components, especially when organizing them within specific pages or making them reusable.
Readability is Key: Prioritize readability over brevity. Clear names make code more accessible and understandable.

Conclusion

By keeping it simple, following consistent naming conventions, and separating concerns, your Flutter project will be clean, maintainable, and a joy to work on. Happy coding! 🚀

This article is written with a help of AI for organizing the article context ✌️.

How to use S3 services with python

Seif Almotaz Bellah — Tue, 06 Sep 2022 23:12:28 +0000

Introduction

Hi, in this article we will discuss how to connect vultr object storage with python.

You can also use (digitalocean, aws or etc..)

In the beginning, What is Object Storage?

Object Storage is Vultr's S3-compatible, web-accessible cloud object storage service for storing and retrieving file objects.
Objects can be accessed privately or publicly, over the web. Use cases for cloud object storage including:

Share Files like ( images, videos, pdf, ...etc)
Share software or business files
Share static website hosting for assets such as images, JavaScript, CSS, or media files

Summary, When you need to handle vast numbers of file objects without having to manage or grow the underlying filesystem, object storage is suitable.

Getting Started

How to create object storage

Select the Objects menu at the top of the Vultr customer portal to navigate to the object storage subscription listing, then use the Add Object Storage form to deploy. After deployment, view your access keys on the subscription listing page.

If you have any question about object storage see this article.

Installing requirements

Create new Object storage with Vultr.
Download and Install Python from the python.org .
Installing boto3 with pip line:
1. Open cmd for Windows or terminal from MacOS.
2. And type pip install boto3

What is boto3?

Boto3 is the Software Development Kit (SDK) for Python, which allows Python developers to write software that makes use of services like Vultr Object Storage.

Let's get started:

Open your favorite code editor.
Create a new python file with any name.
Let's code:

First thing first we must get the Acess Key & Secret Key from your object storage page from subscription listing page.

And let us save it in variable:

object_storage_config = {
    'region_name': 'ewr1',
    'endpoint_url': 'https://ewr1.vultrobjects.com',
    'aws_access_key_id': 'Your_access_key',
    'aws_secret_access_key': 'Your_secret_key'
}

How to upload a file to your file dir:

import boto3
client = boto3.client('s3', **object_storage_config)

Now we have connected to vultr s3 object storage

Let us upload a file to object storage but first we must create a new bucket:

Objects are stored in buckets. Before you can begin uploading objects, you need to create at least one bucket. Buckets are similar to folders on a file system.
Know more in this article article.

Now we create a new bucket:

client.create_bucket(Bucket="bucket_name")

Now upload file with boto3:

client.upload_file("file_name", "bucket_name", "object_name.extention")

Example code for the above:

import boto3

object_storage_config = {
    'region_name': 'ewr1',
    'endpoint_url': 'https://ewr1.vultrobjects.com',
    'aws_access_key_id': 'Your_access_key',
    'aws_secret_access_key': 'Your_secret_key'
}

client = boto3.client('s3', **object_storage_config)
client.create_bucket(Bucket="uploaded_images")
client.upload_file("./images/logo.png", "uploaded_images", "logo.png")

What about Multipart files

We can upload a multipart file with function upload_fileobj.

client.upload_fileobj(file, "bucket_name", "object_name.extention")

Example:

import boto3
object_storage_config = {
    'region_name': 'ewr1',
    'endpoint_url': 'https://ewr1.vultrobjects.com',
    'aws_access_key_id': 'Your_access_key',
    'aws_secret_access_key': 'Your_secret_key'
}

client = boto3.client('s3', **object_storage_config)
# WE ALREADY CREATED BUCKET
with open("FILE_NAME", "rb") as file:
    client.upload_fileobj(file, "uploaded_images", "logo.png")

Now we have uploaded a file to s3 storage but we have a problem. The problem is that the files we have uploaded are in private mode and there is no one can access them without an access key.
We have two options to solve this first to make the files in the public mode when we upload it and second we can create a Presigned URL.

What is Presigned URLs?

Vultr users who can access the object will generate a pre-signed URL. The generated URL will be delivered to unauthorized users. The pre-signed URL can be entered in a browser or used in an HTML web page or application. Credentials that use a pre-signed URL are the credentials of the Vultr user who generated the URL.
pre-signed URLs are valid for the limited time specified when the URL was generated.

response = client.generate_presigned_url(
    'get_object', 
    Params={'Bucket': "bucket_name", 'Key': "object_name"},
    ExpiresIn=expiration
)

Expiration: Time in seconds for the presigned URL to remain valid

Example:

import boto3
object_storage_config = {
    'region_name': 'ewr1',
    'endpoint_url': 'https://ewr1.vultrobjects.com',
    'aws_access_key_id': 'Your_access_key',
    'aws_secret_access_key': 'Your_secret_key'
}

client = boto3.client('s3', **object_storage_config)
response = client.generate_presigned_url('get_object', Params={'Bucket': "uploaded_images", 'Key': "logo.png"}, ExpiresIn=3600)
print(response)

Option two is to upload the file in public mode

We can do that by adding ExtraArgs to upload_file or upload_fileobj function.

Example:

import boto3

object_storage_config = {
        'region_name': 'ewr1',
        'endpoint_url': 'https://ewr1.vultrobjects.com',
        'aws_access_key_id': 'Your_access_key',
        'aws_secret_access_key': 'Your_secret_key'
}

client = boto3.client('s3', **object_storage_config)
client.create_bucket(Bucket="uploaded_images")
client.upload_file("./images/logo.png", "uploaded_images", "logo2.png", ExtraArgs={"ACL": "public-read"})

Cruky library first README

Seif Almotaz Bellah — Mon, 04 Apr 2022 15:51:42 +0000

Info

Cruky is a server-side library for the dart ecosystem to help you create your API as fast as possible. We want to make server-side apps with modern style and fast high performance.

The main reason why I built this is that all libraries are focused on the Flutter ecosystem and not on dart lang
and this makes the library have fewer futures than other frameworks or libraries like (Django, FastAPI, ROR, ..etc)
So I decided that I will make a new library that focuses on Dart and get the maximum performance using dart:mirrors and code generators together to get the best usage of the dart.

Inspired by server-side frameworks like (Django, Flask, FastAPI, ROR)

Get started

You can see the todo example in the examples file it's very clear to understand.

Install Dart from Dart.dev
Install the Cruky package with dart pub global activate cruky
Create dart project with dart create nameOfProject
open the project with your favorite IDE like vscode
And let's get started

Start adding the entrypoint app

import 'package:cruky/cruky.dart';

class MyApp extends ServerApp {
  @override
  List get routes => [
        exampleWithGETRequest,
      ];
}

Now let's add our first route method:

@Route.get('/')
exampleWithGetRequest(ReqCTX req) {
  return Json({});
}

Add the Route annotation to specify the route path, and add the method under it we can use the Future method or regular method (async or sync).

Return data from the method

You can return a List or map for now and the response content type is just JSON for now.

Return specific status code

you can return the specific status code with the map like that:

@Route.get('/')
exampleWithGetRequest(ReqCTX req) {
  return Json({}, 201);
}

Now serve the app

we can serve a simple app with this code

void main() => runApp(MyApp(), debug: true);

You can run with cruky serve,
This will run the file in ./lib/main.dart
with hot reload.

Note: In production mode better to use the dart run command
for less ram use and better performance.

You can disable hot reload with:

void main() => runApp(MyApp(), debug: false);

Now Cruky will run the app with hot-reload if any thing changed in lib folder.

Let's add some middleware

We can add a before and after middleware.
The before middleware runs before calling the main route method handler,
And the after middleware is the opposite.

@BeforeMW()
middlewareExample(ReqCTX req) {
  if (req.headerValue('Token') == null) {
    return Text('Not Auth', 401);
  }
}

The MW is the short of MiddleWare.
The annotiation defines the type of middleware, There is two types BeforeMW amd AfterMW.

You can access the header values with the headerValue function, if you want the full access you can get the main HttpRequest data with req.native or the response with req.response as HttpResponse

If you want to not execute the next function you can (The main route method) you can return a response like in the example.

Now we will add this middleware to global middlewares in the app and any route under it well have the same middleware.

class MyApp extends ServerApp {
  @override
  List get routes => [
        exampleWithGETRequest,
      ];

  @override
  List get middlewares => [middlewareExample]; /// add this
}

Or you can add the middleware scoped for a route like this:

@Route.get('/', [middlewareExample])
exampleWithGetRequest(ReqCTX req) {
  return Json({}, 201);
}