Design Studio v0.9.5: A Visual Improvement in E-commerce Experience ๐ŸŽจ

Published: June 25, 2025

I am thrilled to announce the release of Design Studio v0.9.5, a major milestone that transforms our online shopping platform into a truly immersive visual experience. This release focuses heavily on user interface enhancements, performance optimizations, and creating a more engaging shopping journey for our customers.

๐Ÿš€ What’s New in v0.9.5

1. Stunning 10-Slide Hero Carousel

The centerpiece of this release is our brand-new interactive hero carousel featuring 10 beautifully curated slides with real product imagery. Each slide tells a story and creates an emotional connection with our visitors.

Dynamic Gradient Themes

Each slide features its own unique gradient theme:

<!-- Hero Slide Template -->
<div class="slide relative h-screen flex items-center justify-center overflow-hidden"
     data-theme="<%= slide[:theme] %>">
  <!-- Dynamic gradient backgrounds -->
  <div class="absolute inset-0 bg-gradient-to-br <%= slide[:gradient] %>"></div>

  <!-- Content with sophisticated typography -->
  <div class="relative z-10 text-center px-4">
    <h1 class="text-6xl font-bold text-white mb-6 leading-tight">
      <%= slide[:title] %>
    </h1>
    <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
      <%= slide[:description] %>
    </p>
  </div>
</div>

Smart Auto-Cycling with Manual Controls

// Intelligent carousel management
class HeroCarousel {
  constructor() {
    this.currentSlide = 0;
    this.autoInterval = 4000; // 4-second intervals
    this.isPlaying = true;
  }

  startAutoPlay() {
    this.autoPlayTimer = setInterval(() => {
      if (this.isPlaying) {
        this.nextSlide();
      }
    }, this.autoInterval);
  }

  pauseOnInteraction() {
    // Pause auto-play when user interacts
    this.isPlaying = false;
    setTimeout(() => this.isPlaying = true, 10000); // Resume after 10s
  }
}

2. Modular Component Architecture

We’ve completely redesigned our frontend architecture with separation of concerns in mind:

<!-- Main Hero Slider Component -->
<%= render 'home/hero_slider' %>

<!-- Individual Components -->
<%= render 'home/hero_slide', slide: slide_data %>
<%= render 'home/hero_slider_navigation' %>
<%= render 'home/hero_slider_script' %>
<%= render 'home/category_grid' %>
<%= render 'home/featured_products' %>

Component-Based Development Benefits:

  • Maintainability: Each component has a single responsibility
  • Reusability: Components can be used across different pages
  • Testing: Isolated components are easier to test
  • Performance: Selective rendering and caching opportunities

3. Enhanced Visual Design System

Glass Morphism Effects

We’ve introduced subtle glass morphism effects throughout the application:

/* Modern glass effect implementation */
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* Category cards with gradient overlays */
.category-card {
  @apply relative overflow-hidden rounded-xl;

  &::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-t from-black/60 to-transparent;
  }
}

Dynamic Color Management

Our new helper system automatically manages theme colors:

# app/helpers/application_helper.rb
def get_category_colors(gradient_class)
  case gradient_class
  when "from-pink-400 to-purple-500"
    "#f472b6, #8b5cf6"
  when "from-blue-400 to-indigo-500"  
    "#60a5fa, #6366f1"
  when "from-green-400 to-teal-500"
    "#4ade80, #14b8a6"
  else
    "#6366f1, #8b5cf6" # Elegant fallback
  end
end

def random_decorative_background
  themes = [:orange_pink, :blue_purple, :green_teal, :yellow_orange]
  decorative_background_config(themes.sample)
end

4. Mobile-First Responsive Design

Every component is built with mobile-first approach:

<!-- Responsive category grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <% categories.each do |category| %>
    <div class="group relative h-64 rounded-xl overflow-hidden cursor-pointer
                hover:scale-105 transform transition-all duration-300">
      <!-- Responsive image handling -->
      <div class="absolute inset-0">
        <%= image_tag category[:image], 
            class: "w-full h-full object-cover group-hover:scale-110 transition-transform duration-500",
            alt: category[:name] %>
      </div>
    </div>
  <% end %>
</div>

5. Public Product Browsing

We’ve opened up product browsing to all visitors:

# app/controllers/products_controller.rb
class ProductsController < ApplicationController
  # Allow public access to browsing
  allow_unauthenticated_access only: %i[index show]

  def index
    products = Product.all

    # Smart category filtering
    if params[:category].present?
      products = products.for_category(params[:category])
      @current_category = params[:category]
    end

    # Pagination for performance
    @pagy, @products = pagy(products)
  end
end

๐Ÿ”ง Technical Improvements

Test Coverage Excellence

I’ve achieved 73.91% test coverage (272/368 lines), ensuring code reliability:

# Enhanced authentication test helpers
module AuthenticationTestHelper
  def sign_in_as(user)
    # Generate unique IPs to avoid rate limiting conflicts
    unique_ip = "127.0.0.#{rand(1..254)}"
    @request.remote_addr = unique_ip

    session[:user_id] = user.id
    user
  end
end

Asset Pipeline Optimization

Rails 8 compatibility with modern asset handling:

# config/application.rb
class Application < Rails::Application
  # Modern browser support
  config.allow_browser versions: :modern

  # Asset pipeline optimization
  config.assets.css_compressor = nil # Tailwind handles this
  config.assets.js_compressor = :terser
end

Security Enhancements

# Role-based access control
class ApplicationController < ActionController::Base
  include Authentication

  private

  def require_admin
    unless current_user&.admin?
      redirect_to root_path, alert: "Access denied."
    end
  end
end

๐Ÿ“Š Performance Metrics

Before vs After v0.9.5:

MetricBeforeAfter v0.9.5Improvement
Test Coverage45%73.91%+64%
CI/CD Success23 failures0 failures+100%
Component Count3 monoliths8 modular components+167%
Mobile Score72/10089/100+24%

๐ŸŽจ Design Philosophy

This release embodies our commitment to:

  1. Visual Excellence: Every pixel serves a purpose
  2. User Experience: Intuitive navigation and interaction
  3. Performance: Fast loading without sacrificing beauty
  4. Accessibility: Inclusive design for all users
  5. Maintainability: Clean, modular code architecture

๐Ÿ”ฎ What’s Next?

Version 0.9.5 sets the foundation for exciting upcoming features:

  • Enhanced Search & Filtering
  • User Account Dashboard
  • Advanced Product Recommendations
  • Payment Integration
  • Order Tracking System

๐ŸŽ‰ Try It Today!

Experience the new Design Studio v0.9.5 and see the difference visual design makes in online shopping. Our hero carousel alone tells the story of modern fashion in 10 stunning slides.

Key Benefits for Users:

  • โœจ Immersive visual shopping experience
  • ๐Ÿ“ฑ Perfect on any device
  • โšก Lightning-fast performance
  • ๐Ÿ”’ Secure and reliable

For Developers:

  • ๐Ÿ—๏ธ Clean, maintainable architecture
  • ๐Ÿงช Comprehensive test suite
  • ๐Ÿ“š Well-documented components
  • ๐Ÿš€ Rails 8 compatibility

Design Studio v0.9.5 – Where technology meets artistry in e-commerce.

Download: GitHub Release
Documentation: GitHub Wiki
Live Demo: Design Studio – coming soon!


Enjoy Rails 8 with Hotwire! ๐Ÿš€

Setup ๐Ÿ›  Rails 8 App โ€“ Part 17: Fix Github actions, Mini-test ๐Ÿ—œ๏ธ Test Cases With Cursor AI โž˜

Hello friends, in this post lets look into the issues we faced after integrating:

  1. Sessions for users (sign in functionality)
  2. Order, Order items models and the related code base

Check our Github actions failure cases here: https://github.com/MIRA-Designs/design_studio/actions/runs/14953772366/job/42006659413?pr=31

What is working?

  • Rubocop linting checks
  • Test cases – Fails
  • Brakeman security scan – Pending

Why the issue?

I made a mistake of integrating the sessions with Order and Order items model (I used the help of Co-piolet for improvement). I have only written the test cases for sessions. Why I made this mistake? Because for last some days the development was not happening in our design_studio project. So I was curious to do so many things at a time and I cannot control myself ๐Ÿ™‚

Now what’s next?

Let’s solve the test cases issues. First I cannot get ‘why this test cases for Rate limit issue is happening’. I have to research on this. I want to try Cursor – how it works with these kind of scenarios. Cursor provide me details about exact issue in our test cases and updated for me. I was happy that I saved some time.

Let’s see What is the findings of cursor:

The current test case has few issues:

  1. It’s testing for 11 attempts, but the rate limit is set to 10 attempts. We should test that the 11th attempt is rate limited, but also verify that the first 10 attempts work as expected.
  2. We should verify that the rate limiting is time-based (within 1 minute) by testing that after waiting, the rate limit resets.

Fix the test case:

Cursor updated the test case to properly test the rate limiting functionality. Here’s what the improved test does:

  1. First, it makes 10 attempts and verifies that each attempt gets the normal “invalid credentials” response
  2. Then it makes the 11th attempt and verifies that it gets rate limited with the “Try again later” message
  3. Finally, it uses Rails’ travel helper to move forward in time past the rate limit window (1 minute + 1 second) and verifies that the rate limit has been reset by making another attempt

This test now properly verifies:

  • The rate limit threshold (10 attempts)
  • The rate limit behavior (redirect with “Try again later” message)
  • The rate limit duration (1 minute)
  • The rate limit reset after the time window expires

The test is now more thorough and matches the actual implementation in the SessionsController.

Run the test case with the fix:

Failure:
SessionsControllerTest#test_should_rate_limit_login_attempts [test/controllers/sessions_controller_test.rb:34]:
--- expected
+++ actual
@@ -1 +1 @@
-"Try again later."
+"Try another email address or password."

the problem is that the rate limiting is happening at the controller level using rate_limit, but our test isn’t properly simulating real-world timing. Let me modify the test to ensure we’re making the requests within the 1-minute window and properly testing the rate limiting.

We fixed it and still the issues are not solved:

# Running:
F
Failure:
SessionsControllerTest#test_should_rate_limit_login_attempts [test/controllers/sessions_controller_test.rb:36]:
--- expected
+++ actual
@@ -1 +1 @@
-"Try again later."
+"Try another email address or password."

bin/rails test test/controllers/sessions_controller_test.rb:23

The issue may be with our SessionsController rate_limit directive. That is not working in test environment. I had this doubt. Let’s see what cursor tell us regarding this:

Looking at the SessionsController, the rate limiting is implemented using Rails’ rate_limit macro, but it seems the rate limiting might not be working as expected in the test environment. Let’s try to debug this by checking if we need to enable rate limiting in the test environment or if there’s a different approach needed.

Cursor suggested Rails cache setup and wipe out cache:

require "test_helper"

class SessionsControllerTest < ActionDispatch::IntegrationTest
  setup do
    # Use memory store for rate limiting in tests
    Rails.cache = ActiveSupport::Cache::MemoryStore.new
  end

  teardown do
    Rails.cache.clear
  end

  ......

The test environment is configured to use :null_store for caching, which means rate limiting won’t work. Let’s modify the test environment configuration:

environments/test.rb:

- config.cache_store = :null_store
+ config.cache_store = :memory_store

Cursor made two important changes:

  1. Changed the test environment’s cache store from :null_store to :memory_store to ensure rate limiting works properly
  2. Added a consistent IP address in the test requests using 
    headers: { REMOTE_ADDR: “192.168.1.1” } 
    since rate limiting is typically done based on the client’s IP address

The test should now work correctly because:

  1. We have proper caching enabled in the test environment
  2. We’re using a consistent IP address for all requests, which is what rate limiting typically uses to track requests
  3. We’re still maintaining the time window with travel_to and travel
  4. The cache is cleared between tests to ensure a clean state

Try running the test again – it should now properly detect when the rate limit is exceeded on the 11th request.

Running 5 tests in a single process (parallelization threshold is 50)
Run options: --seed 55394

# Running:
.

Finished in 1.222473s, 0.8180 runs/s, 28.6305 assertions/s.
1 runs, 35 assertions, 0 failures, 0 errors, 0 skips
Coverage report generated for Unit Tests to /Users/abhilash/rails/design_studio/public/coverage.
Line Coverage: 21.37% (81 / 379)

Works!! Cursor – you beauty.

Let us see why the fix worked:

  1. The main issue was that the test environment was using :null_store for caching, which effectively disabled all caching. Since Rails’ rate limiting feature relies on caching to track request counts, it wasn’t working properly.
  2. By changing to :memory_store, we enabled proper caching in the test environment, allowing the rate limiting to track requests.
  3. Adding the consistent IP address (REMOTE_ADDR: “192.168.1.1”) in the test requests was also important because Rails’ rate limiting typically uses the client’s IP address as part of the cache key to track requests per client.
  4. The test structure ensures clean state by:
  • Using setup to initialize a fresh cache store for each test
  • Using teardown to clear the cache after each test
  • Using travel_to to ensure consistent timing for rate limit windows
  • Using consistent IP addresses for request tracking

This is a good example of how testing rate limiting requires careful consideration of the entire environment, including caching, timing, and request attributes. The test now properly verifies that:

  • Users can make up to 10 attempts within a minute
  • The 11th attempt gets rate limited
  • After waiting for a minute, they can try again

I may need some more time to get the fact that: “Rails’ rate limiting feature relies on caching to track request counts”. Here is the importance of AI tool like cursor. It saved a lot of my debugging time.

What Is Cursor๐ŸงŠ AI? Why It’s Changing the Way We Code ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป in 2025

In a world increasingly defined by intelligent automation, Cursor AI has emerged as a next-generation AI-powered code editor redefining how developers – from beginners to seasoned experts – build software. Imagine an editor like VS Code but powered by the intelligence of ChatGPT, designed to help you think, debug, and code faster. Cursor AI is that vision realized.

In this post, we’ll explore:

  • What Cursor AI is
  • How it evolved
  • How to install Cursor AI on your MacBook
  • Why it matters today
  • How development feels with vs without Cursor AI
  • Pros and cons
  • How it affects experienced vs new developers
  • Best practices for experienced developers using it

Check our first post about cursor here: https://railsdrop.com/2025/04/11/evolution-cursor-ai-overview-install-macos/


๐Ÿง  What Is Cursor AI?

Cursor AI is a developer-first AI code editor, built on top of Visual Studio Code, with AI deeply integrated into the editing experience. It’s designed to work contextually – meaning it doesn’t just generate generic code snippets, it understands your codebase, folder structure, and logic.

Key features:

  • Context-aware AI coding assistant
  • Instant code refactoring
  • Inline documentation generation
  • Bug fixing suggestions
  • Built-in ChatGPT-style panel
  • AI code generation for entire files, functions, or blocks

In essence, it turns your editor into a pair programmer that understands your exact project.


๐Ÿงฌ The Evolution of Cursor AI

The journey of Cursor AI started with the rise of GitHub Copilot and ChatGPT in 2022โ€“2023. As these tools showed the value of AI-assisted development, developers demanded more context-aware, editor-native, and codebase-integrated AI tooling.

As of 29 April 2025, ~40% of code committed by professional engineers using Cursor is generated by Cursor!

Timeline of Evolution:

  1. 2023: VS Code extensions like Copilot led the charge in AI-assisted code completion.
  2. Late 2023: ChatGPT APIs brought conversational code help into tools.
  3. 2024: Cursor AI launched with the vision of full-context development, integrating the editor with ChatGPT and file-tree understanding.
  4. 2025: Cursor AI adds real-time debugging help, AI test generation, and full-project understanding with minimal configuration.

Cursor AI wasn’t just a pluginโ€”it was a full-blown editor that replaces VS Code and integrates AI from the ground up.

Check below for the words of Google CEO Sundar Pichai:

โœจ Check google’s Veo 3 – An art video generated-model


๐Ÿ’ป How to Install Cursor AI on macOS

Installing Cursor AI on your MacBook is easy.

Step-by-Step Installation:

  1. Go to the official website: https://www.cursor.so
  2. Click “Download for macOS”
  3. Once the .dmg file is downloaded, open it and drag the Cursor app to Applications.
  4. Open the app. You may need to give permissions via System Settings > Privacy & Security.
  5. Log in using your GitHub or Google account.
  6. Optionally connect your OpenAI API key (for custom models or paid usage).

Cursor AI will sync your settings like any modern IDE, and youโ€™re ready to go!


๐ŸŒ Why Cursor AI Matters in the Modern Coding Era

Software development is no longer just about writing codeโ€”itโ€™s about writing good, secure, and maintainable code faster. Cursor AI helps with:

  • ๐Ÿš€ Speed: Complete entire components in seconds
  • ๐Ÿง  Knowledge: Understands your codebase like a team member
  • ๐Ÿž Debugging: Pinpoints issues and suggests fixes
  • ๐Ÿงช Testing: Helps write unit tests and specs instantly
  • โœ๏ธ Docs: Auto-generates internal documentation

In the AI-assisted future of work, tools like Cursor AI aren’t optionalโ€”they’re multipliers.


๐Ÿ†š Development With vs. Without Cursor AI

FeatureWith Cursor AIWithout Cursor AI
Code generationInstantly generated with contextManual and slower
Bug fixingOne-click suggestionsManual debugging, Stack Overflow
Learning curveSmooth with AI helpSteeper, especially for beginners
DocumentationAuto-generated inline docsTime-consuming, often skipped
RefactoringAssisted refactors in secondsManual, error-prone
AI integrationNative and seamlessPlugin-based or absent

The difference is stark: with Cursor AI, coding feels like a team sportโ€”even if you’re solo.


Advantages and Disadvantages of Cursor AI

โœ… Advantages:

  • Full codebase context for suggestions
  • Conversational AI built into the IDE
  • Quick refactors and fixes
  • Makes pair programming obsolete
  • Beginner-friendly with pro-level capabilities

โŒ Disadvantages:

  • Limited to Cursor editor (not VS Code extension)
  • May over-rely on AI for thinking/debugging
  • Occasional hallucinations or wrong suggestions
  • Internet connection required
  • Premium features may require subscription or OpenAI key

๐Ÿ‘ถ Freshers vs ๐Ÿง  Experienced Developers: How Cursor AI Affects Them

For Freshers:

  • Pros:
    • Less intimidating learning experience
    • AI explains code and errors
    • Boosts confidence and learning speed
  • Cons:
    • May hinder learning fundamentals if overused
    • Risk of blindly accepting AI suggestions

For Experienced Developers:

  • Pros:
    • Supercharges productivity
    • Speeds up prototyping and testing
    • Handles boilerplate and repetitive tasks
  • Cons:
    • Still requires strong judgment to verify AI output
    • Context overload may cause distraction if unmanaged

๐Ÿงฉ How Experienced Developers Can Fully Utilize Cursor AI

Here’s a practical strategy:

โœ… Do:

  1. Use AI for context-aware code completionsโ€”especially for large files.
  2. Refactor in seconds by selecting blocks and using the AI menu.
  3. Write test specs from user stories with the help of the chat assistant.
  4. Ask AI to explain or find bugs across files or functions.
  5. Generate documentation, migration files, or even setup scripts.

โŒ Don’t:

  • Rely solely on AI for business logic or architecture decisions
  • Accept code blindlyโ€”always review suggestions
  • Skip writing your own tests
  • Forget to version control your AI-generated changes

Pro Tip ๐Ÿ’ก:

Use AI for what it’s best atโ€”pattern recognition and code generationโ€”but keep the human creativity and design decisions in your hands.


โœจ Final Thoughts

Cursor AI is not just a trend – it’s a transformation. It represents a shift toward context-aware, AI-first development environments that do more than autocomplete – they collaborate.

Whether you’re a Rails engineer, a React hacker, or a full-stack product builder, Cursor AI is like adding a genius teammate to your IDE.


๐Ÿงฑ Up Next: Building a Rails + React App Using Cursor AI

In the next blog post, we’ll build a full Rails + React app from scratch using Cursor AIโ€”watch how it writes your models, React components, routes, and tests like magic.


Stay tuned! ๐Ÿš€

Cursor ai ๐Ÿค– Overview: Install, Usage, Advantages and Best Practices

Cursor AI is an innovative AI-powered code editor developed by Anysphere Inc., designed to enhance developer productivity by integrating advanced artificial intelligence features directly into the coding environment. It is a fork of Visual Studio Code with additional AI features like code generation, smart rewrites, and codebase queries. (Wikipedia)


What is Cursor AI?

Cursor AI is a smart code editor that assists developers in writing, debugging, and optimizing code. It offers AI-powered suggestions, real-time error detection, and the ability to interact with existing code through natural language prompts. This makes it a valuable tool for both experienced developers and newcomers to programming.(Reddit)


The Evolution of Cursor AI

Cursor AI was founded in early 2022 by four MIT graduates: Michael Truell, Sualeh Asif, Arvid Lunnemark, and Aman Sanger. Initially focusing on mechanical engineering tools, the team pivoted to programming after identifying a larger opportunity and aligning with their expertise. (Medium, lennysnewsletter.com)

Launched in 2023, Cursor AI quickly gained traction, reaching $100 million in annual recurring revenue within 12 months, making it one of the fastest-growing SaaS startups. By April 2025, the company achieved a $9 billion valuation following a $900 million funding round. (productmarketfit.tech, Financial Times)


Installing Cursor AI on macOS

To install Cursor AI on your MacBook:

  1. Download: Visit the Cursor Downloads page and select the appropriate version for your Mac (Universal, Arm64, or x64).(Cursor)
  2. Install: Run the downloaded installer and follow the on-screen instructions.
  3. Launch: After installation, open Cursor from the Applications folder.(apidog)
  4. Setup: On first launch, you’ll be prompted to configure settings to get started. (Cursor)

For a visual guide, you can refer to this tutorial:

How to Install Cursor AI on macOS โ†—๏ธ

Useful shortcuts: cmd + L, cmd + K


The Importance of Cursor AI in Modern Coding

In today’s fast-paced development environment, tools that enhance productivity are invaluable. Cursor AI stands out by integrating AI directly into the coding process, allowing developers to:(Reddit)

  • Generate code snippets based on natural language prompts.
  • Refactor and debug code efficiently.(Rapid Dev)
  • Understand and navigate complex codebases with ease.

This integration reduces the cognitive load on developers, allowing them to focus on higher-level problem-solving. (fine.dev)


Software Development With and Without Cursor AI

Without Cursor AI:

  • Manual coding and debugging.(Builder.io)
  • Time-consuming code reviews.(YouTube)
  • Limited assistance in understanding unfamiliar codebases.(Reddit)

With Cursor AI:

  • Automated code generation and suggestions.
  • Faster identification and resolution of bugs.
  • Enhanced collaboration through AI-assisted code reviews.

The integration of AI into the development process streamlines workflows and accelerates project timelines.


Advantages and Disadvantages of Using Cursor AI

Advantages:

  • Increased productivity through AI-assisted coding.
  • Improved code quality with real-time suggestions.
  • Enhanced learning for new developers.

Disadvantages:

  • Steep learning curve for those unfamiliar with AI tools.(Medium)
  • Potential over-reliance on AI, leading to reduced manual coding skills.(Financial Times)
  • Challenges in handling large-scale, complex projects. (docs.kanaries.net)

Impact on Experienced vs. New Developers

New Developers:

  • Benefit from real-time feedback and suggestions.
  • Accelerated learning curve.(productmarketfit.tech)
  • Ability to build applications with minimal prior experience.

Experienced Developers:

  • Enhanced efficiency in coding and debugging.
  • Ability to focus on complex problem-solving tasks.
  • Potential to mentor juniors more effectively using AI tools.

Best Practices for Experienced Developers Using Cursor AI

Steps to Follow:

  1. Define Clear Objectives: Start with a clear understanding of the task at hand.
  2. Use AI for Repetitive Tasks: Leverage Cursor AI for boilerplate code and routine functions.
  3. Review AI Suggestions: Always review and understand AI-generated code before integration.(Rapid Dev)
  4. Integrate with Testing: Use test-driven development to ensure code reliability. (Builder.io)

What Not to Do:

  • Avoid blind reliance on AI suggestions without understanding the underlying code.
  • Do not neglect code reviews and testing.
  • Refrain from using AI for tasks that require deep domain expertise without proper oversight.

Happy AI Coding! ๐Ÿš€