DEV Community: Sarvesh S. Kulkarni

Redux with React: A Friendly Guide for Beginners

Sarvesh S. Kulkarni — Sun, 28 Jul 2024 12:11:43 +0000

Hey there! 🎉 If you’ve been diving into React and are ready to level up your state management game, you’ve probably heard of Redux. It’s a powerful tool that helps you handle state in a predictable and organized way, especially as your app grows bigger. Don’t worry if Redux sounds a bit daunting right now—this guide will break it down step-by-step in a super casual, easy-to-follow way. Let’s get started!

What’s Redux All About?
Imagine your React app as a big, busy kitchen. You have ingredients (state) that need to be organized and used in recipes (components). Redux acts like a super-efficient kitchen organizer. It keeps all your ingredients (state) in one place (the store), and whenever you need to make a recipe (update the state), it tells you exactly how to do it (reducers).

Redux Basics

1. Store: Think of this as your pantry where you keep all your ingredients (state).
2. Actions: These are like recipe instructions. They tell the store what you want to do (e.g., "Add sugar").
3. Reducers: They’re the chefs who take the recipe (action) and update the pantry (store) accordingly.
4. Dispatch: This is how you get the recipe instructions to the chefs (reducers).

Setting Up Your Project
Let’s set up a React project with Redux. It’s super easy with create-react-app—a handy tool that gets everything ready for you.

1. Create Your React App
Open up your terminal and run these commands to start a new project:

npx create-react-app redux-tutorial
cd redux-tutorial

2. Add React-Redux and @reduxjs/toolkit
Now, let’s install React-Redux and @reduxjs/toolkit, which helps connect Redux with React.

npm install react-redux @reduxjs/toolkit

Using createSlice to Manage State
We’ll use createSlice to set up our Redux store. It lets us define our state, actions, and reducers all in one place.

1. Create a Slice
Let’s create a counterSlice.tsx file in a new features folder. This file will manage our counter state.

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

2. Configure the Store
Create a store.ts file to configure the Redux store using the slice we just created.

import { configureStore } from '@reduxjs/toolkit'
import counterSlice from '../feature/counterSlice'

export default configureStore({
  reducer: {
    counter: counterSlice, 
  },
})

3. Provide the Redux Store to React
Wrap your app with the Provider component so that Redux can manage the state. Update index.tsx like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import store from './app/store'
import { Provider } from 'react-redux'
import Navbar from './components/Navbar';
import Footer from './components/Footer';

const router = createBrowserRouter([
  {
    path: "/",
    element: <App/>,
  },
  {
    path: "*",
    element: <div className='d-flex justify-content-center align-items-center m-5'>Not Found</div>,
  }
]);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
      <Navbar/>
        <Provider store={store}>
        <RouterProvider router={router}/>
        </Provider>
      <Footer/>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

4. Connect Your Component to Redux
Now, let’s connect a React component to the Redux store using useSelector and useDispatch from react-redux. Create a Counter.tsx component:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../feature/counterSlice';

// Define the types for your state
interface CounterState {
  value: number;
}

interface RootState {
  counter: CounterState;
}

export function Counter() {
  // Use useSelector to access the counter and food items from the state
  const count = useSelector((state: RootState) => state.counter.value);

  const dispatch = useDispatch();

  return (
    <div>
      <fieldset className='border m-5'>
        <legend className='text-center'>Basic Counter</legend>
        <div  className='d-flex justify-content-center align-items-center'>
        <button
          aria-label="Increment value"
          className='btn btn-outline-success'
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span className='p-5 fs-5 fw-semibold text-secondary'>{count}</span>
        <button
          aria-label="Decrement value"
          className='btn btn-outline-danger'
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
      </fieldset>
    </div>
  );
}

Update App.tsx to include the Counter component:

import './App.css';
import { Counter } from './components/Counter';

function App() {

  return (
    <>
    <Counter/>
    </>
  );
}

export default App;

Wrapping Up
You’ve just set up Redux in your React app using Redux Toolkit and createSlice. Here’s a quick rundown of what we did:

Setup: Created a new React project and installed Redux Toolkit.
Slice: Defined our state and reducers in one place using createSlice.
Store: Configured the store with the slice’s reducer.
Provider: Wrapped our app with the Redux Provider.
Component: Connected a React component to the Redux store with useSelector and useDispatch.

I have implemented the example of the multi-state management in the this repository.

Please feel free to explore the code, and if you have any questions or suggestions, don’t hesitate to open an issue or submit a pull request. Your feedback is always appreciated!

Redux Toolkit makes it super easy to manage state in a scalable and maintainable way. Enjoy building your app, and have fun with Redux Toolkit! 🚀

Streamline Your Workflow: Automate Frontend Deployment with GitHub Actions

Sarvesh S. Kulkarni — Wed, 24 Jul 2024 08:55:11 +0000

Manually deploying your frontend code can be a time-consuming and error-prone process. But fear not, developers! GitHub Actions offers a powerful solution for automating your CI/CD pipeline, allowing for seamless frontend deployments with every code change.

What is CI/CD?
CI/CD stands for Continuous Integration and Continuous Delivery/Deployment. It's an automated workflow that streamlines the software development process. With CI/CD, code changes are continuously integrated, tested, and deployed, ensuring a faster and more reliable development cycle.

Using GitHub Actions runners on an EC2 instance is a powerful way to extend the capabilities of GitHub Actions beyond the default hosted runners provided by GitHub. This setup gives you more control over the environment in which your workflows run and allows you to leverage resources within your own AWS account. Here's a guide on how to set up and use GitHub Actions self-hosted runners on an EC2 instance:

Install and Configure the Runner:

Connect to your EC2 Instance: SSH into your EC2 instance using the key pair associated with the instance.

Download and Install the Runner: Follow the instructions provided by GitHub to download and configure the GitHub Actions runner. You can find the installation steps in the GitHub repository under Settings -> Actions -> Self-hosted runners.

Register the Runner: During the installation process, you'll be prompted to enter your GitHub repository URL, an access token, and other configuration details. This registers the runner with your GitHub repository.

Getting Started with GitHub Actions
If you're new to GitHub Actions, getting started is straightforward:
(For this example I've created a sample react project.)

Create a Workflow File: Inside your repository, create a .github/workflows directory if it doesn't exist. In this directory, add a YAML file (e.g., deploy.yml) where you'll define your workflow.

Define Workflow Steps: In your YAML file, define the steps required to build and deploy your frontend application. This typically includes installing dependencies, building assets (e.g., with webpack or npm scripts), and deploying to an ec2 instance.

name: Deploy to ec2 instance

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: self-hosted

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Cache Node.js dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{matrix.node-version}}

      - name: Install dependencies
        run: npm install

      - name: Build React application
        run: |
          npm run build
          rm -rf /var/www/react_sample/static
          mv build/* /var/www/react_sample
          rm -r *

This example workflow installs dependencies, builds the project, and deploys the built assets to an ec2 instance using a self-hosted runner. Adjust the details (like branches and build commands) to fit your project's setup.

Configure Secrets: For deploying to certain services (like GitHub Pages or AWS), you'll need API keys or access tokens. Store these securely in your repository's Secrets settings (Settings -> Secrets), and reference them in your workflow YAML file.

Trigger Workflow: With your workflow file set up, GitHub Actions will automatically trigger it when changes are pushed to the specified branch (main in the example). You can also trigger workflows manually or on other events like pull requests.

Benefits of GitHub Actions for Frontend Deployment

Automation: Once set up, deployments happen automatically on every push or as scheduled, reducing manual intervention.

Consistency: Eliminates human error in deployment steps, ensuring each deployment follows the exact same process.

Visibility and Monitoring: GitHub Actions provides logs and status checks for each workflow run, making it easy to monitor deployment outcomes and debug issues.

Community Actions: Leverage a wide range of community-maintained actions for common tasks, reducing the need to reinvent the wheel.

Happy Coding!

Nuxt Your Way to Native: Building Mobile Apps with Capacitor

Sarvesh S. Kulkarni — Mon, 10 Jun 2024 05:53:02 +0000

Nuxt.js is a fantastic framework for building lightning-fast and feature-rich web applications. But what if you want to take your Nuxt.js creation and turn it into a native mobile app? With Capacitor, you can bridge the gap and deliver your Nuxt.js app as a native Android or iOS experience!

Why Capacitor for Nuxt.js Mobile Apps?

Capacitor offers a compelling solution for building native apps with Nuxt.js:

Leverage Your Existing Skills: If you're already comfortable with Nuxt.js, you can use your Vue knowledge to create the core application logic. Capacitor handles the native parts.
Reduced Development Time: By reusing your Nuxt.js codebase, you can significantly speed up development compared to building separate native apps from scratch.
Native Look and Feel: Capacitor integrates your Nuxt.js app into a native container, allowing you to access device features and provide a platform-specific user experience.

Getting Started with Nuxt.js and Capacitor

Here's a quick overview of the process:

Create Your Nuxt.js App: Start by building your Nuxt.js application as usual.

Integrate Capacitor: Add Capacitor to your project using npm or yarn. This configures the native app structure and environment.
Build for Mobile Platforms: Use Capacitor commands to generate native app builds for Android and iOS. Capacitor will bundle your Nuxt.js app into the native container.
Deploy to App Stores: Once you're happy with your native builds, you can submit them to the respective app stores (Google Play Store and Apple App Store) following their guidelines.

Beyond the Basics

While Capacitor provides a smooth foundation, there's more to explore:

Native Plugins: Capacitor supports various plugins that grant access to native device functionalities like camera, GPS, and local storage within your Nuxt.js app.
Advanced Customization: You can further customize the native app experience using platform-specific code within the Capacitor project structure.

Nuxt.js and Capacitor: A Powerful Combination

By combining Nuxt.js and Capacitor, you can create high-quality mobile apps efficiently. Capacitor empowers you to deliver your Nuxt.js creations to a wider audience on mobile devices, all while maintaining a familiar development workflow.

Ready to dive deeper? Check out the official Nuxt.js documentation and Capacitor docs for detailed guides and tutorials to get your hands dirty and build your first native app with Nuxt.js!

(Comment for the detailed blog)

Localize Your Vue: Internationalization with Nuxt 3

Sarvesh S. Kulkarni — Mon, 25 Mar 2024 07:15:24 +0000

I'd be glad to create a blog post on Nuxt 3 internationalization, incorporating the best aspects of previous responses and addressing potential shortcomings:

Taking Your Nuxt 3 App Global: A Step-by-Step Guide to Internationalization

In today's interconnected world, building websites that cater to international audiences is essential. Nuxt 3, the powerful Vue.js framework, streamlines this process with its robust internationalization (i18n) capabilities. This comprehensive guide will walk you through setting up i18n in your Nuxt 3 application, making it a breeze to localize your content for different languages and regions.

Prerequisites:

A basic understanding of Nuxt 3 and Vue.js concepts.
Node.js and npm (or yarn) installed on your development machine.

1. Installation:
Begin by installing the @nuxtjs/i18n module in your Nuxt 3 project using either npm or yarn:



npm install -D @nuxtjs/i18n
# or
yarn add -D @nuxtjs/i18n

2. Configuration:

nuxt.config.ts (or nuxt.config.js):

Import the defineNuxtConfig function and the i18n module from
@nuxtjs/i18n. Configure the i18n module as follows:



export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n({
      // Your i18n configuration options go here
    })
});

3. Locale Settings:

Define the languages your application supports in the locales array: ```

i18n({
locales: [
{
name: 'English',
code: 'en',
file: 'locales/en.json'
},
{
name: 'French',
code: 'fr',
file: 'locales/fr.json'
},
{
name: 'Spanish',
code: 'es',
file: 'locales/es.json'
}
],
}),


- Set the default locale (the language your app loads first) using the defaultLocale option:

i18n({
locales: [
{
name: 'English',
code: 'en',
file: 'locales/en.json'
},
{
name: 'French',
code: 'fr',
file: 'locales/fr.json'
},
{
name: 'Spanish',
code: 'es',
file: 'locales/es.json'
}
],
defaultLocale: 'en',
}),


**4. Translation Files:**
- Create a locales directory in your project's root. Inside this directory, create a separate JSON file for each supported locale. For example:
 - locales/en.json
 - locales/fr.json
 - locales/es.json

- Add translation keys and their corresponding values in each language file:

// locales/en.json
{
"heading1": "Supercharge your Vue.js projects",
"desc1": "Nuxt.js is a powerful framework for building performant, SEO-friendly web applications with Vue.js. It provides a collection of features and conventions that streamline the development process, allowing you to focus on creating amazing user experiences."
}

// locales/fr.json
{
"heading1": "Boostez vos projets Vue.js",
"desc1": "Nuxt.js est un framework puissant pour créer des applications Web performantes et conviviales pour le référencement avec Vue.js. Il fournit un ensemble de fonctionnalités et de conventions qui rationalisent le processus de développement, vous permettant ainsi de vous concentrer sur la création d'expériences utilisateur étonnantes."
}

// locales/es.json
{
"heading1": "Potencia tus proyectos Vue.js",
"desc1": "Nuxt.js es un marco poderoso para crear aplicaciones web de alto rendimiento y compatibles con SEO con Vue.js. Proporciona una colección de características y convenciones que agilizan el proceso de desarrollo, permitiéndole concentrarse en crear experiencias de usuario increíbles."
}


**5. Using Translations in Components:**
 - Import the useI18n composable from @nuxtjs/i18n in your Vue 
 components:

            <v-col cols="3">
                <v-select label="Select Language" :items="['en', 'fr', 'es']" variant="outlined" v-model="locale"></v-select>
            </v-col>

        </v-row>

        <v-card class="mx-5" variant="outlined" elevation="3">
            <v-card-title class="text-center">
                {{ $t("heading1") }}
            </v-card-title>
            <v-card-text class="text-center">
                {{ $t("desc1") }}
            </v-card-text>
        </v-card>

    </form>
</div>

const { locale } = useI18n()


- Use the $t function provided by useI18n to access translations:

Output:



source code: nuxt3-i18n

Remember, the key to successful internationalization lies in understanding your audience and providing them with a seamless user experience, no matter their language or locale. With Nuxt 3, you’re well-equipped to do just that. So go ahead, take your projects to new heights and let your applications speak to the world.

Until next time, happy coding!

Squashing Migrations in Django for Beginners

Sarvesh S. Kulkarni — Tue, 19 Dec 2023 07:16:20 +0000

Django migrations: awesome for keeping track of changes, but sometimes they turn into a tangled mess. Enter the squash migration – your superhero sidekick for a tidier project. Think of it as Marie Kondo for your code!

Why Squash?

Imagine your migrations as a growing pile of clothes. Each change is a new shirt, and soon you have a mountain of confusing layers. Squashing is like folding everything neatly, making it easier to find what you need (and way less embarrassing for guests... I mean, deployments).

Squashing Superpowers:

Smaller History: A leaner migration history means a smaller project, making backups and deployments a breeze. You won't need to pack a suitcase for each update!
Easier Understanding: A clean history is like a well-labeled closet. You can easily see how your project evolved, making future tweaks and fixing bugs a walk in the park.
Improved Maintenance: Finding specific changes becomes a cinch, like spotting that perfect outfit for a specific occasion. No more rummaging through piles!

How to Squash (Without Breaking Something):

Pick Your Tool: Use Django's built-in squashmigrations option for quick merges, or Use the squashmigrations --squashed-name option if you want to set the name of the squashed migration rather than use an autogenerated one.. Just remember, with great power comes great responsibility (aka backups before every squash!).
Squash Selectively: Don't just dump everything together! Merge migrations that make sense together, like grouping all the changes to your user model into one "spruced-up-users" squashed migration.
Name Wisely: Don't leave your squashed migration a mystery. Give it a descriptive name that tells you exactly what's inside, like "combined-profile-picture-and-bio-updates."

$ ./manage.py squashmigrations myapp 0004
Will squash the following migrations:
 - 0001_initial
 - 0002_some_change
 - 0003_another_change
 - 0004_undo_something
Do you wish to proceed? [yN] y
Optimizing...
  Optimized from 12 operations to 7 operations.
Created new squashed migration /home/andrew/Programs/DjangoTest/test/migrations/0001_squashed_0004_undo_something.py
  You should commit this migration but leave the old ones in place;
  the new migration will be used for new installs. Once you are sure
  all instances of the codebase have applied the migrations you squashed,
  you can delete them.

Remember:
Squashing is powerful, but use it wisely. Once merged, changes are stuck together like conjoined twins. Be sure you're happy with the combination before hitting that squash button!
Test, test, test! After squashing, make sure everything still works like a charm.

Squash with Confidence:

Don't let messy migrations hold you back! With a little knowledge and these simple tips, you can squash your way to a cleaner, happier Django project. So go forth, fold (squash!), and enjoy the newfound organization!

Bonus Tip: Document your squashing process! Future you will thank you for the clear roadmap through your project's history.

24 Pull Requests: A Holiday Tradition for Open Source Contributors

Sarvesh S. Kulkarni — Mon, 04 Dec 2023 18:48:24 +0000

24 Pull Requests is a yearly initiative that encourages open source contributors around the world to send 24 pull requests between December 1st and December 24th. The goal of the project is to help people get involved in open source and make a positive impact on the world.

How to Participate

To participate in 24 Pull Requests, simply find an open source project that you're interested in and start contributing. You can find projects to contribute to on GitHub, GitLab, and other code hosting platforms. Once you've found a project, you can start by fixing bugs, adding new features, or writing documentation.

Benefits of Participating

There are many benefits to participating in 24 Pull Requests. Some of the benefits include:

Learn new skills: By contributing to open source projects, you can learn new skills and technologies.
Gain experience: Contributing to open source projects is a great way to gain experience and build your portfolio.
Make a difference: Your contributions can help make open source projects better and more useful for everyone.
Meet new people: You can meet new people from all over the world by contributing to open source projects.
Give back: Contributing to open source is a great way to give back to the community.

Tips for Success

Here are a few tips for success when participating in 24 Pull Requests:

Start small: Don't try to do too much too soon. Start by fixing small bugs or adding small features.
Ask for help: If you're stuck, don't be afraid to ask for help. Most open source communities are very welcoming and helpful.
Be patient: It takes time to become a good open source contributor. Don't get discouraged if you don't get positive feedback right away.
Have fun!: Contributing to open source should be fun. If you're not enjoying yourself, you're less likely to stick with it.

24 Pull Requests is a great way to get involved in open source and make a positive impact on the world. I encourage everyone to participate this year!

In addition to the benefits mentioned above, 24 Pull Requests is also a great way to learn about different open source projects and communities. By participating, you'll be exposed to a wide range of projects and people, which can help you find new projects to contribute to in the future.

So, what are you waiting for? Get started today and make a difference!

I hope this blog post has been helpful. If you have any questions, please feel free to leave a comment below.

Happy coding!

Setting Up Nuxt 3 with Vuetify 3: A Comprehensive Guide

Sarvesh S. Kulkarni — Thu, 16 Nov 2023 19:13:57 +0000

Nuxt 3 and Vuetify 3 are powerful tools that can help you build modern, responsive, and performant web applications. Nuxt 3 provides a framework for building Vue.js applications, while Vuetify 3 offers a comprehensive UI component library. Combining these two technologies allows you to create stunning and functional web apps with ease.

Prerequisites

Before you begin, ensure you have the following prerequisites:

Node.js: Install Node.js, which includes the npm package manager.
Vite: Install Vite, a front-end build tool used by Nuxt 3.
Basic Vue.js Knowledge: Familiarity with Vue.js concepts and syntax is recommended.

Creating a Nuxt 3 Project

Create a Project Directory: Create a new directory for your Nuxt 3 project.
Initialize Nuxt: Open a terminal window and navigate to the project directory. Run the following command to initialize a new Nuxt 3 project:

npx nuxi init nuxt-app

This command will create a basic Nuxt 3 project.

Installing Vuetify 3

Install the required Vuetify modules as dependencies:

npm i -D vuetify vite-plugin-vuetify
npm i @mdi/font

Creating a Vuetify Plugin

Create a Plugins Folder: Create a directory named plugins inside the Nuxt 3 project root.
Create the Vuetify Plugin: Inside the plugins directory, create a file named vuetify.ts.
Import Vuetify: Import Vuetify and its components using the following code:

import { createVuetify } from 'vuetify'

Configure And Export Vuetify : Create a Vuetify instance and configure its options:

   export default defineNuxtPlugin((nuxtApp) => {
   const vuetify = createVuetify({
    icons: {
      defaultSet: 'mdi',

    },
   })
   nuxtApp.vueApp.use(vuetify)
})

Integrating Vuetify with Nuxt 3

Import Vuetify Plugin And Enable Sass/SCSS Support: In the nuxt.config.js file, import the Vuetify plugin:

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  css: [
    'vuetify/lib/styles/main.sass',
    "@mdi/font/css/materialdesignicons.css",
  ],
  build: {
    transpile: ['vuetify']
  },
});

Use Vuetify Components: You can now use Vuetify components in your Vue.js templates. For example, to add a button:

<v-btn>Click Me</v-btn>

Running the Application

To start the Nuxt 3 development server, run the following command in the project directory:

npm run dev

This will start the server and open your application in the browser. You can now start developing your Nuxt 3 application with Vuetify 3.

Tutorial to Predict the Genre of Books using MindsDB [Mongo API]

Sarvesh S. Kulkarni — Thu, 27 Oct 2022 10:35:35 +0000

In this tutorial, we will be learning to:
👉 Connect a MongoDB database to MindsDB.
👉 Train a model to predict the genre of books based on the titles and descriptions.
👉 Get a prediction from the model given certain input parameters.

We will be using the Books genre dataset 📖 that can be downloaded from here. You are also free to use your own dataset and follow along the tutorial.

#️⃣Pre-requisites

This tutorial is primarily going to be about MindsDB so the reader is expected to have some level of familiarity with MongoDB Atlas.
In short, MongoDB Atlas is a Database as a Service(DaaS), which we will be using to spin up a MongoDB database cluster and load our dataset.
Download a copy of the Books genre dataset from here.
You are also expected to have an account on MindsDB Cloud. If not, head over to https://cloud.mindsdb.com/ and create an account. It hardly takes a few minutes. ⚡
We also need MongoDB Compass to load the dataset into the collection. It can be downloaded from here.

#️⃣About MindsDB

MindsDB is a predictive platform that makes databases intelligent and machine learning easy to use. It allows data analysts to build and visualize forecasts in BI dashboards without going through the complexity of ML pipelines, all through SQL. It also helps data scientists to streamline MLOps by providing advanced instruments for in-database machine learning and optimize ML workflows through a declarative JSON-AI syntax.
Although only SQL is mentioned, MongoDB is also supported.

#️⃣Dataset Overview

The dataset contains information about the title, genre and summary of books.

#️⃣Setting up a Cluster on MongoDB Atlas

Head over to https://cloud.mongodb.com/ and create a new project named booksdb and within it a new database cluster named cluster0. Typically, it takes a minute or two to provision a cluster. Once it is done, you should have something like this:
Click on "Connect" button. In pop-up modal, you will be asked to select a tool to interact with your cluster. For this tutorial I'm choosing MongoDB Compass for connection.
Next, you will be asked to choose the connection method.
After that, you will be asked to create a new database user. After providing a username and password, click on the "Create Database User" button.
In the next step, select "Connect using MongoDB Compass". Copy the connection string which should look like this:

mongodb://cloud.mindsdb.com/

And from Advanced Connection Option, select Authentication method as "Username/Password" and enter your MindsDB cloud credentials.

Now we will connect to our database from MongoDB Compass and load our dataset.

#️⃣Loading the dataset with MongoDB Compass

Head over to https://cloud.mindsdb.com/ and after login click on "Add data" to import data from csv file.

This imported data will be available in files database.
Open MongoDB Compass. Paste the connection string and click on "Connect". On successful authentication, you will be welcomed by this screen.
Now open Mongosh terminal in MongoDB Compass, enter the command below to insert a database in MindsDB.

db.databases.insertOne({
    name: "BooksDB", // name of database
    engine: "mongodb", // databaase engine to use,
    connection_args: {
        "port": 27017, // connection port
        "host": "mongodb://cloud.mindsdb.com:27017", // connection host
        "database": "files" // connecting database           
    }
});

We are now ready to train an ML model to predict the books_genre using MindsDB.

#️⃣Training the ML Model

Head over to MindsDB cloud to create predictor. Enter the command below and execute.

CREATE PREDICTOR mindsdb.books_genre_predictor
FROM files
(SELECT * FROM books)
PREDICT genre;

That's how simple training an ML model is with MindsDB. Now all you have to do is wait for a few minutes for the model to get trained after which you will be able to run queries and get predictions on the books_genre.

#️⃣Running Queries to get predictions

Once the status changes to COMPLETE, it means that our model is now ready and we can start getting predictions.

We can see that the model has an accuracy of 98.8%, which is impressive!
To start getting prediction, enter the query below in the terminal:

db.books_genre_predictor.find({title:"Yendi", summary:"Six months after he took control of his own territory in the criminal"})

Here we wanted to know the genre of a book with following details.

We can see that the model predicted with 99.9% confidence that the genre for the given book details is "fantasy".

You can play with the inputs and run a few more queries and observe the results.
Thank you for reading this article. If you liked it, please like and share it with others. If you want to learn more about MindsDB, visit their official documentation and/or talk to the team behind it on Slack.

See you in my next article, Happy Querying! 📉