<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Rudra Gupta</title>
    <description>The latest articles on DEV Community by Rudra Gupta (@rudragupta_dev).</description>
    <link>https://dev.to/rudragupta_dev</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1505729%2F5cd88c55-bece-4d5c-9a57-df355bd4dfda.jpg</url>
      <title>DEV Community: Rudra Gupta</title>
      <link>https://dev.to/rudragupta_dev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/rudragupta_dev"/>
    <language>en</language>
    <item>
      <title>Building a To-Do App with RTK Query</title>
      <dc:creator>Rudra Gupta</dc:creator>
      <pubDate>Wed, 19 Jun 2024 16:46:00 +0000</pubDate>
      <link>https://dev.to/rudragupta_dev/building-a-to-do-app-with-rtk-query-2c0n</link>
      <guid>https://dev.to/rudragupta_dev/building-a-to-do-app-with-rtk-query-2c0n</guid>
      <description>&lt;p&gt;In this guide, we'll walk you through creating a simple to-do application using RTK Query, a powerful data fetching and caching tool from Redux Toolkit. We'll use an open-source API to manage our to-dos. By the end of this guide, you'll have a fully functional To-Do app and a solid understanding of how to integrate RTK Query into your projects.&lt;/p&gt;

&lt;h3&gt;
  
  
  Before we start, make sure you have the following installed:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Node.js&lt;/li&gt;
&lt;li&gt;npm or yarn&lt;/li&gt;
&lt;li&gt;A code editor (e.g., VSCode)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Step 1: Setting Up the Project
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Initialize a new React project:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;yarn create-react-app rtk-query-todo
cd rtk-query-todo
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Install necessary dependencies:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;yarn add @reduxjs/toolkit react-redux
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 2: Setting Up RTK Query
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Create an API slice:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;First, let's create an API slice to manage our To-Do operations. We'll use the &lt;a href="https://jsonplaceholder.typicode.com/"&gt;JSONPlaceholder&lt;/a&gt; API for demonstration purposes.&lt;/p&gt;

&lt;p&gt;Create a file named apiSlice.js in the src directory:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/apiSlice.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  endpoints: (builder) =&amp;gt; ({
    getTodos: builder.query({
      query: () =&amp;gt; 'todos',
    }),
    addTodo: builder.mutation({
      query: (newTodo) =&amp;gt; ({
        url: 'todos',
        method: 'POST',
        body: newTodo,
      }),
    }),
    deleteTodo: builder.mutation({
      query: (id) =&amp;gt; ({
        url: `todos/${id}`,
        method: 'DELETE',
      }),
    }),
  }),
});

export const { useGetTodosQuery, useAddTodoMutation, useDeleteTodoMutation } = apiSlice;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Configure the store:
Next, let's configure our Redux store to include the API slice.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import { apiSlice } from '../apiSlice';

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =&amp;gt;
    getDefaultMiddleware().concat(apiSlice.middleware),
});

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Provide the store to your app:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Wrap your application with the Redux provider in index.js.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
import './index.css';

ReactDOM.render(
  &amp;lt;React.StrictMode&amp;gt;
    &amp;lt;Provider store={store}&amp;gt;
      &amp;lt;App /&amp;gt;
    &amp;lt;/Provider&amp;gt;
  &amp;lt;/React.StrictMode&amp;gt;,
  document.getElementById('root')
);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 3: Creating the To-Do Components
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Create a To-Do List component:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/components/TodoList.js
import React from 'react';
import { useGetTodosQuery, useDeleteTodoMutation } from '../apiSlice';

const TodoList = () =&amp;gt; {
  const { data: todos, error, isLoading } = useGetTodosQuery();
  const [deleteTodo] = useDeleteTodoMutation();

  if (isLoading) return &amp;lt;p&amp;gt;Loading...&amp;lt;/p&amp;gt;;
  if (error) return &amp;lt;p&amp;gt;Error loading todos&amp;lt;/p&amp;gt;;

  return (
    &amp;lt;ul&amp;gt;
      {todos.map((todo) =&amp;gt; (
        &amp;lt;li key={todo.id}&amp;gt;
          {todo.title}
          &amp;lt;button onClick={() =&amp;gt; deleteTodo(todo.id)}&amp;gt;Delete&amp;lt;/button&amp;gt;
        &amp;lt;/li&amp;gt;
      ))}
    &amp;lt;/ul&amp;gt;
  );
};

export default TodoList;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Create an Add To-Do component:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/components/AddTodo.js
import React, { useState } from 'react';
import { useAddTodoMutation } from '../apiSlice';

const AddTodo = () =&amp;gt; {
  const [title, setTitle] = useState('');
  const [addTodo] = useAddTodoMutation();

  const handleSubmit = async (e) =&amp;gt; {
    e.preventDefault();
    if (title) {
      await addTodo({
        title,
        completed: false,
      });
      setTitle('');
    }
  };

  return (
    &amp;lt;form onSubmit={handleSubmit}&amp;gt;
      &amp;lt;input
        type="text"
        value={title}
        onChange={(e) =&amp;gt; setTitle(e.target.value)}
        placeholder="Add a new todo"
      /&amp;gt;
      &amp;lt;button type="submit"&amp;gt;Add Todo&amp;lt;/button&amp;gt;
    &amp;lt;/form&amp;gt;
  );
};

export default AddTodo;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Combine components in the main App:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/App.js
import React from 'react';
import TodoList from './components/TodoList';
import AddTodo from './components/AddTodo';

function App() {
  return (
    &amp;lt;div className="App"&amp;gt;
      &amp;lt;h1&amp;gt;RTK Query To-Do App&amp;lt;/h1&amp;gt;
      &amp;lt;AddTodo /&amp;gt;
      &amp;lt;TodoList /&amp;gt;
    &amp;lt;/div&amp;gt;
  );
}

export default App;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 4: Running the Application
&lt;/h3&gt;

&lt;p&gt;Now, you can run your application using the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;yarn start
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Your application should be up and running at &lt;a href="http://localhost:3000"&gt;http://localhost:3000&lt;/a&gt;. You can add new to-dos and delete existing ones using the JSONPlaceholder API.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Conclusion&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In this guide, we covered how to create a simple To-Do application using RTK Query with an open-source API. We set up our Redux store, created API slices, and built components for listing and adding to-dos. RTK Query simplifies data fetching and caching, making it easier to manage server-side data in your applications.&lt;/p&gt;

&lt;p&gt;Feel free to expand on this project by adding more features such as editing to-dos, marking them as completed, or integrating user authentication.&lt;/p&gt;

&lt;p&gt;Happy coding!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Steps to Initialize a Shopify Web App Locally: A Comprehensive Guide</title>
      <dc:creator>Rudra Gupta</dc:creator>
      <pubDate>Tue, 11 Jun 2024 04:57:06 +0000</pubDate>
      <link>https://dev.to/rudragupta_dev/steps-to-initialize-a-shopify-web-app-locally-a-comprehensive-guide-2hhl</link>
      <guid>https://dev.to/rudragupta_dev/steps-to-initialize-a-shopify-web-app-locally-a-comprehensive-guide-2hhl</guid>
      <description>&lt;p&gt;As e-commerce continues to grow, having the ability to customize and manage your online store is invaluable. Shopify, one of the leading e-commerce platforms, offers robust tools for developers to create and manage their web applications efficiently. However, developers often face several challenges while using the Shopify editor. Some common issues include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Inability to access auto-close features.&lt;/li&gt;
&lt;li&gt;Lack of tag suggestions.&lt;/li&gt;
&lt;li&gt;Limited syntax highlighting.&lt;/li&gt;
&lt;li&gt;Difficulties in previewing changes in real-time.&lt;/li&gt;
&lt;li&gt;Challenges in managing large and complex themes.&lt;/li&gt;
&lt;li&gt;Insufficient debugging tools.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In this article, I will walk you through the steps to initialize a Shopify web app locally, ensuring you have everything you need to start building and customizing your Shopify store more effectively.&lt;/p&gt;

&lt;h3&gt;
  
  
  Installing Shopify CLI 🚀
&lt;/h3&gt;

&lt;p&gt;The Shopify Command Line Interface (CLI) is a powerful tool that simplifies the development process by providing various commands to manage your store. Before we dive into the installation steps, ensure you have the following prerequisites installed:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Node.js&lt;/strong&gt;: Version 18.16.0 or higher. Download from &lt;a href="https://nodejs.org"&gt;nodejs.org&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Git&lt;/strong&gt;: Version 2.28.0 or higher. Download from &lt;a href="https://git-scm.com"&gt;git-scm.com&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Installation Steps 🖥️
&lt;/h3&gt;

&lt;h4&gt;
  
  
  For Windows 🪟
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Install Ruby+Devkit 3.0&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Download the installer from &lt;a href="https://rubyinstaller.org/downloads/"&gt;RubyInstaller&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Run the installer and select the MSYS2 component, choosing the MSYS2 base installation option.&lt;/li&gt;
&lt;li&gt;Follow the prompts to complete the installation.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Verify Ruby Installation&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Open a new command prompt and run &lt;code&gt;ruby --version&lt;/code&gt; to ensure Ruby is installed correctly.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Install Shopify CLI&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;In a new command prompt window, run one of the following commands to install Shopify CLI globally:
&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; npm install -g @shopify/cli
&lt;/code&gt;&lt;/pre&gt;


&lt;p&gt;or&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; yarn global add @shopify/cli
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Verify Installation&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Run &lt;code&gt;shopify help&lt;/code&gt; to display the help menu and confirm that Shopify CLI is installed and functioning properly.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  For macOS 🍏
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Install Homebrew&lt;/strong&gt; (if not already installed):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Open Terminal and run:
&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Install Ruby&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Using Homebrew, run:
&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; brew install ruby
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Verify Ruby Installation&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Run &lt;code&gt;ruby --version&lt;/code&gt; to ensure Ruby is installed correctly.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Install Shopify CLI&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Open Terminal and run one of the following commands to install Shopify CLI globally:
&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; npm install -g @shopify/cli
&lt;/code&gt;&lt;/pre&gt;


&lt;p&gt;or&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; yarn global add @shopify/cli
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Verify Installation&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Run &lt;code&gt;shopify help&lt;/code&gt; to display the help menu and confirm that Shopify CLI is installed and functioning properly.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Post-Installation Steps 📦
&lt;/h3&gt;

&lt;p&gt;Once you have installed Shopify CLI, follow these steps to download, preview, and share your theme changes.&lt;/p&gt;

&lt;h4&gt;
  
  
  Download the Theme Code 📥
&lt;/h4&gt;

&lt;p&gt;To pull the theme code from your Shopify store, run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;shopify theme pull --store gynoveda.myshopify.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Enter your store credentials when prompted.&lt;/p&gt;

&lt;h4&gt;
  
  
  Preview Your Changes 👀
&lt;/h4&gt;

&lt;p&gt;To preview the changes you make to the theme, run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;shopify theme dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then, open Google Chrome and navigate to &lt;a href="http://127.0.0.1:9292"&gt;localhost&lt;/a&gt; to view the theme preview.&lt;/p&gt;

&lt;h4&gt;
  
  
  Share Your Changes 🌐
&lt;/h4&gt;

&lt;p&gt;To share your updates with the Gynoveda team, upload your changes using:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;shopify theme push
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Publish the Updated Theme 📢
&lt;/h4&gt;

&lt;p&gt;After getting approval for the changes, make the theme live by running:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;shopify theme publish
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Conclusion 🎉
&lt;/h3&gt;

&lt;p&gt;Initializing a Shopify web app locally is a straightforward process that sets the stage for efficient and effective store management. By following these steps, you can ensure a smooth setup, allowing you to focus on building and customizing your Shopify store to meet your specific needs. Overcoming the limitations of the Shopify editor, such as lack of auto-close features, tag suggestions, and other productivity hindrances, becomes much easier with a local development environment. &lt;/p&gt;

&lt;p&gt;Happy coding! 👨‍💻👩‍💻&lt;/p&gt;




</description>
      <category>shopifycli</category>
      <category>techtips</category>
      <category>ruby</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
