DEV Community: PO

Fetching Mock Data in Nuxt.js Using MockAPI.io

PO — Sun, 11 Aug 2024 09:07:37 +0000

Nuxt.js is a powerful framework built on top of Vue.js that makes it easy to create server-side rendered applications. One common task in web development is fetching data from an API. In this blog post, we'll walk through how to fetch mock data using MockAPI.io in a Nuxt.js application.

Step 1: Setting Up Your Nuxt.js Project

First, ensure you have Node.js and npm installed on your machine. Then, create a new Nuxt.js project by running the following commands:

npx nuxi@latest init <project-name>

Follow the prompts to set up your project. Once the setup is complete, navigate to the project directory and start the development server:

npm run dev

Your Nuxt.js application should now be running at http://localhost:3000.

Step 2: Setting Up MockAPI.io

Go to MockAPI.io and sign up for a free account. Once logged in, create a new project and add a new resource. For this example, let's create a resource called todos with fields like name, and isDone.

MockAPI.io will provide you with a base URL for your API. For example, it might look something like this:

https://33a5a112s2ae2d13eb211a75.mockapi.io/todos

Step 3: Fetching Data in Nuxt.js Using fetch

Delete app.vue

Since we're not going to cover app.vue and simply want to quickly show how to fetch data from an API, we don't need the app.vue so we can delete it.

Create a New Page

Create a new file called index.vue in the pages directory (create the directory if it doesn't exist):

Fetch Data Using `asyncData`

Open pages/index.vue and add the following code:


<template>
  <div>
    <h1>Todos</h1>
    <ul class="todo-list">
      <li v-for="todo in todos" :key="todo.id" class="todo-item">
        <p class="todo-name">{{ todo.name }}</p>
        <p class="todo-status" :class="{ done: todo.isDone }">
          {{ todo.isDone ? 'Done' : 'Not Done' }}
        </p>
      </li>
    </ul>
  </div>
</template>

<script setup>
const { data: todos } = await useFetch(
  'https://<your-project-id>.mockapi.io/api/v1/todos'
);
</script>

<style scoped>
.todo-list {
  padding: 0;
}

.todo-item {
  margin-bottom: 20px;
  text-transform: capitalize;
}

.todo-name {
  font-weight: bold;
}

.todo-status {
  font-size: 0.8em;
}

.done {
  color: green;
}
</style>

Navigate to http://localhost:3000 in your browser. You should see a list of todos fetched from MockAPI.io.

Conclusion

In this blog post, we've quickly set up a Nuxt.js project and fetched mock data from MockAPI.io. This is a simple yet powerful way to prototype and test your application without needing a real backend.

Thanks for reading!
Po.

How to Use Shadcn UI with a React Project

PO — Wed, 07 Aug 2024 07:46:35 +0000

Shadcn UI is a modern and flexible UI component library designed to work seamlessly with React. It provides a set of reusable components that can help you build beautiful and responsive user interfaces quickly. In this blog post, I'll walk you through the steps to integrate Shadcn UI into your React project.

Prerequisites

Before we begin, make sure you have the following installed on your machine:

Node.js (v12 or higher)
npm or yarn
A React project (created using Create React App, Vite, Next.js, or any other setup)

Step 1: Install Shadcn UI

First, you need to install Shadcn UI and its peer dependencies. You can do this using npm or yarn. Open your terminal and navigate to your React project directory, then run the following command:

# Using npm
npm install @shadcn/ui

# Using yarn
yarn add @shadcn/ui

Step 2: Using Shadcn UI Components

Shadcn UI provides a CLI tool to generate components easily. Let's use npx shadcn to add some components to our project.

Adding a Button Component

To add a Button component, run the following command:

npx shadcn add button

This command will generate a Button component in your project. You can now use it in your React components. Here's an example:

// src/App.js
import React from 'react';
import { Button } from '@shadcn/ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to Shadcn UI</h1>
        <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
      </header>
    </div>
  );
}

export default App;

Adding a Card Component

To add a Card component, run the following command:

npx shadcn add card

This will generate a Card component. You can use it as follows:

// src/App.js
import React from 'react';
import { Button, Card } from '@shadcn/ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to Shadcn UI</h1>
        <Card>
          <h2>Card Title</h2>
          <p>This is a card component.</p>
          <Button onClick={() => alert('Button inside card clicked!')}>Click Me</Button>
        </Card>
      </header>
    </div>
  );
}

export default App;

Step 3: Customizing Components

Shadcn UI components are highly customizable. You can pass props to customize their appearance and behavior. For example, you can customize the Button component like this:

// src/App.js
import React from 'react';
import { Button, Card } from '@shadcn/ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to Shadcn UI</h1>
        <Card>
          <h2>Card Title</h2>
          <p>This is a card component.</p>
          <Button color="primary" size="large" onClick={() => alert('Button inside card clicked!')}>
            Click Me
          </Button>
        </Card>
      </header>
    </div>
  );
}

export default App;

Conclusion

In this guide, we've seen how to set up Shadcn UI in a React project and how to use its components. Shadcn UI makes it easy to build beautiful and responsive user interfaces with minimal effort. Explore the Shadcn UI documentation for more components and customization options.

Tips for Using Shadcn UI

Explore the Documentation: Always refer to the official Shadcn UI documentation for the most up-to-date information on components, customization options, and usage examples.
Component Customization: Shadcn UI components are designed to be highly customizable. Make use of props to adjust the appearance and behavior of components to fit your needs.
Theming: Utilize the theming capabilities of Shadcn UI to maintain a consistent look and feel across your application. Check the documentation for details on how to implement and customize themes.
CLI Tool: Use the npx shadcn CLI tool to quickly add components to your project. This can save you time and ensure that you are using the components correctly.

Thanks for reading!
Po.

Experimenting with Tailwind CSS: A Quick Guide

PO — Mon, 05 Aug 2024 08:54:44 +0000

Tailwind CSS is a utility-first CSS framework that has gained immense popularity among web developers for its flexibility and ease of use. With over 9.5 million weekly downloads on npm (5th August 2024), it's clear that Tailwind CSS is a favorite in the web development community. In this blog post, we'll explore how you can experiment with Tailwind CSS without setting up a local development environment. Instead, we'll use an online service to get started quickly.

Why Tailwind CSS?

Before we dive in, let's briefly discuss why Tailwind CSS is so popular:

Utility-First Approach: Tailwind CSS provides low-level utility classes that let you build custom designs without writing custom CSS.
Responsive Design: It makes creating responsive designs straightforward with its built-in responsive utilities.
Customization: Tailwind CSS is highly customizable, allowing you to extend or modify the default styles to fit your needs.

Getting Started with Tailwind CSS Online

To experiment with Tailwind CSS, we can use an online service like Play.tailwindcss.com. This playground allows you to write HTML and Tailwind CSS directly in your browser and see the results in real-time.

Step-by-Step Guide

Visit the Tailwind CSS Playground:
Open your browser and go to Play.tailwindcss.com.
Familiarize Yourself with the Interface:
The playground interface is divided into two main sections:
- Editor: Where you write your HTML and Tailwind CSS classes.
- Preview: Where you see the live output of your code.
Start Coding:
In the editor, you can start writing your HTML and apply Tailwind CSS classes. Here's a simple example to get you started:

   <div class="min-h-screen flex items-center justify-center bg-gray-100">
     <div class="bg-white p-8 rounded shadow-md">
       <h1 class="text-2xl font-bold mb-4">Hello, Tailwind CSS!</h1>
       <p class="text-gray-700">This is a simple example to demonstrate Tailwind CSS.</p>
       <button class="mt-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">Click Me</button>
     </div>
   </div>

Experiment with Different Classes:
Tailwind CSS offers a wide range of utility classes. Try changing the classes to see how they affect the design. For example, you can change the background color, padding, margin, and more.
Explore Tailwind CSS Documentation:
If you're unsure about which classes to use, the Tailwind CSS documentation is an excellent resource. It provides detailed information on all available classes and how to use them.

Benefits of Using the Tailwind CSS Playground

No Setup Required: You can start experimenting with Tailwind CSS immediately without any setup.
Real-Time Feedback: See the results of your changes instantly in the preview pane.
Shareable Links: You can share your Tailwind CSS experiments with others by generating a shareable link.

Boost Your Productivity with VSCode Extension

If you prefer working in a local development environment or want to speed up your workflow, consider installing the Tailwind CSS IntelliSense extension for Visual Studio Code (VSCode). This extension provides advanced features like autocompletion, syntax highlighting, and linting for Tailwind CSS.
Link: Official Tailwind CSS IntelliSense VSCode Extension

Conclusion

Experimenting with Tailwind CSS is easy and fun, especially when using an online service like the Tailwind CSS Playground. With its utility-first approach and extensive customization options, Tailwind CSS empowers you to create beautiful, responsive designs quickly. So, go ahead and give it a try!

Thanks for reading!
Po.

Using Redux Toolkit with React: A Simple Guide

PO — Sun, 04 Aug 2024 09:37:13 +0000

Redux Toolkit is the official, recommended way to write Redux logic. It provides good defaults for store setup out of the box, and includes the most commonly used Redux addons built-in. In this blog, we'll walk through the basics of integrating Redux Toolkit with a React application.

What is Redux Toolkit?

Redux Toolkit is a set of tools that helps simplify the process of writing Redux logic. It includes utilities to simplify common use cases like store setup, creating reducers, and writing immutable update logic.

Setting Up Redux Toolkit with React

Let's go through the steps to set up Redux Toolkit in a React application.

Step 1: Install Dependencies

First, you need to install the necessary packages. You can do this using npm or yarn.

npm install @reduxjs/toolkit react-redux

Step 2: Create a Redux Store

The store is the object that brings Redux to life. With Redux Toolkit, you can create a store using the configureStore function.

// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Step 3: Create a Slice

A slice is a collection of Redux reducer logic and actions for a single feature of your app. Redux Toolkit's createSlice function generates action creators and action types automatically.

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

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

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

Step 4: Provide the Store to Your React Application

To make the Redux store available to your React components, you need to use the Provider component from react-redux.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Step 5: Connect React Components to the Redux Store

To connect a React component to the Redux store, you can use the useSelector and useDispatch hooks from react-redux.

// src/components/Counter.jsx
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../features/counter/counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default Counter;

Step 6: Use the Connected Component in Your App

Finally, you can use the connected component in your application.

// src/App.js
import Counter from './components/Counter';

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;

Conclusion

By following these steps, you can set up Redux Toolkit in your React application to manage state in a predictable and maintainable way. Redux Toolkit simplifies many of the common tasks when working with Redux, making it easier to write and maintain your Redux logic.

Further Exploration

For those who want to dive deeper into Redux Toolkit and React, here are some valuable resources:

Redux Toolkit Documentation: The official documentation provides comprehensive guides and API references.
- Redux Toolkit Documentation
React Redux Documentation: Learn more about how to use Redux with React.
- React Redux Documentation
Redux Essentials Tutorial: A step-by-step tutorial to get you up and running with Redux Toolkit.
- Redux Essentials Tutorial
Redux Fundamentals Tutorial: A detailed tutorial covering the core concepts of Redux.
- Redux Fundamentals Tutorial

Thanks for reading!
Po.

Stop Watching Long Clone Tutorials

PO — Sat, 03 Aug 2024 06:46:25 +0000

As a self-taught developer, it's easy to fall into the trap of endlessly watching long clone tutorials. While these can be helpful, they often lead to passive learning and can hinder your progress. Here are some tips to help you become a more effective self-taught developer:

1. Search Up Only on the Feature You're Trying to Make or Implement

Instead of watching a 3-hour tutorial to build an entire application, focus on the specific feature you're trying to implement. This approach has several benefits:

Time Efficiency: You save time by learning only what you need.
Problem-Solving Skills: You develop the ability to solve specific problems, which is a crucial skill in software development.
Focused Learning: You gain a deeper understanding of the feature you're working on.

2. Start Building Your Own Projects

One of the best ways to learn is by doing. Start building your own projects from scratch. This will:

Reinforce Learning: Applying what you've learned in a real-world context helps reinforce concepts.
Portfolio Development: You'll have tangible projects to showcase to potential employers or clients.
Creativity and Innovation: Building your own projects allows you to be creative and innovative, rather than just following along with a tutorial.

3. You Remember Concepts Better When You're Not Copying Others' Work

When you copy code from a tutorial, you might not fully understand what each line does. By figuring things out on your own, you:

Deepen Understanding: You gain a deeper understanding of the concepts and how they fit together.
Improve Retention: You're more likely to remember concepts when you've worked through them yourself.
Build Confidence: Successfully solving problems on your own builds confidence in your abilities.

4. Use Documentation and Official Resources

Official documentation and resources are often the best places to learn about a technology or framework. They provide:

Accurate Information: Official resources are more likely to be accurate and up-to-date.
Comprehensive Coverage: Documentation usually covers all aspects of a technology, from basic to advanced features.
Best Practices: Official resources often include best practices and guidelines for using the technology effectively.

5. Join Developer Communities

Being part of a developer community can provide support, inspiration, and opportunities for collaboration. Consider:

Online Forums: Join forums like Stack Overflow, Reddit, or specialized communities related to your technology stack.
Open Source Contributions: Contribute to open source projects to gain experience and connect with other developers.

6. Practice, Practice, Practice

Finally, the key to becoming a proficient developer is practice. The more you code, the better you'll get. Make it a habit to:

Code Regularly: Set aside time each day or week to code.
Challenge Yourself: Take on new challenges and push yourself out of your comfort zone.
Reflect and Iterate: Reflect on what you've learned and iterate on your projects to improve them.

By following these tips, you'll become a more effective self-taught developer and accelerate your learning journey. Stop watching long clone tutorials and start building, experimenting, and solving problems on your own.
All the best!

Thanks for reading!
Po.

Using Docker with Express (Node.js) Tutorial

PO — Fri, 02 Aug 2024 09:35:26 +0000

Docker is a powerful tool that allows developers to create, deploy, and run applications in containers. Containers are lightweight and portable. They ensure that your application runs in the same environment, regardless of where it is deployed.
In this tutorial, we'll walk through how to use Docker with an Express (Node.js) application.

Prerequisites

Before we start, make sure you have the following installed on your machine:

Step 1: Set Up a Node.js and Express Application

First, let's create a simple Node.js and Express application.

Create a new directory for your project:

mkdir node-docker-app
cd node-docker-app

Initialize a new Node.js project:
```
npm init -y
```
Install Express:
```
npm install express
```

Create an index.js file and add the following code:

// index.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
    res.send('Hello, Docker!');
});

app.listen(port, () => {
    console.log(`App running on http://localhost:${port}`);
});

Add a start script to your package.json:

"scripts": {
    "start": "node index.js"
}

You can test your application by running:

npm start

Visit http://localhost:3000 in your browser, and you should see "Hello, Docker!".

Step 2: Create a Dockerfile

A Dockerfile is a text document that contains all the commands to assemble an image. Create a file named Dockerfile in the root of your project and add the following content:

# Use the official Node.js image as the base image
FROM node:14

# Set the working directory
WORKDIR /usr/src/app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Expose the port the app runs on
EXPOSE 3000

# Command to run the application
CMD ["npm", "start"]

Step 3: Create a .dockerignore File

Create a .dockerignore file to prevent unnecessary files from being copied to the Docker image. Add the following content:

node_modules
npm-debug.log

Step 4: Build the Docker Image

Now, let's build the Docker image. Run the following command in the root of your project:

docker build -t node-docker-app .

This command builds the Docker image and tags it as node-docker-app.

Step 5: Run the Docker Container

Once the image is built, you can run it as a container:

docker run -p 3000:3000 node-docker-app

This command maps port 3000 of the container to port 3000 on your host machine. You can now visit http://localhost:3000 in your browser and see your application running inside a Docker container.

Project Structure

node-docker-app/
├── Dockerfile
├── .dockerignore
├── package.json
├── package-lock.json
├── index.js
└── README.md

Further Exploration

This is just a quick tutorial on how to get Node.js running with Docker.
I suggest you to explore further:

Explore Docker Compose
- Learn how to use Docker Compose to manage multi-container applications.
Persist Data with Volumes
- Understand how to use Docker volumes to persist data outside of your containers.
Environment Variables and Configuration
- Learn how to pass environment variables to your Docker containers.
- Use configuration files to manage different environments (development, staging, production).
Docker Networking
- Explore Docker networking to understand how containers communicate with each other.
- Set up a network for your Node.js application and other services (e.g., databases).
Automate Builds with CI/CD
- Integrate Docker with your CI/CD pipeline to automate the building and deployment of your Node.js applications.
- Use tools like Jenkins, GitHub Actions, or GitLab CI/CD.
Monitor and Log Your Containers
- Implement logging for your Docker containers.
- Use monitoring tools like Prometheus and Grafana to keep track of your container performance.
Security Best Practices
- Learn about Docker security best practices.
- Implement measures to secure your Docker containers and images.
Deploy to Cloud Providers
- Explore deploying your Dockerized Node.js application to cloud providers like AWS, Azure, or Google Cloud.
- Use services like AWS ECS, Azure AKS, or Google Kubernetes Engine.
Explore Advanced Docker Features
- Look into advanced Docker features like multi-stage builds, Docker Swarm, and Kubernetes.
- Experiment with these features to enhance your Docker skills.

Thanks for reading!
PO.

How to Fetch Wikipedia Articles Using Node.js (Express, TypeScript, Axios)

PO — Thu, 01 Aug 2024 08:38:31 +0000

In this blog, we'll create a simple web app that fetches Wikipedia articles using Node.js. We'll use Express for the server, TypeScript for type safety, and Axios to make HTTP requests to the Wikipedia API. We'll also create a basic HTML page to display the fetched articles.

Step 1: Setting Up the Project

First, create a new directory for your project and navigate into it:

mkdir wikipedia-fetcher
cd wikipedia-fetcher

Initialize a new Node.js project:

npm init -y

Install the necessary dependencies:

npm install express axios
npm install --save-dev typescript @types/node @types/express ts-node

Create a tsconfig.json file in the root directory for TypeScript configuration:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  }
}

Step 2: Setting Up Express Server

Create a src directory and inside it, create an index.ts file:
In src/index.ts, set up a basic Express server:

import express from 'express';
import axios from 'axios';

const app = express();
const PORT = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

app.get('/api/wiki', async (req, res) => {
  const { query } = req.query;
  if (!query) {
    return res.status(400).send('Query parameter is required');
  }

  try {
    const response = await axios.get(`https://en.wikipedia.org/api/rest_v1/page/summary/${query}`);
    res.json(response.data);
  } catch (error) {
    res.status(500).send('Error fetching Wikipedia article');
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Step 3: Creating the HTML Page

Create a public directory in the root directory and inside it, create an index.html file:
In public/index.html, add the following basic HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wikipedia Article Fetcher</title>
</head>
<body>
    <h1>Wikipedia Article Fetcher</h1>
    <input type="text" id="searchQuery" placeholder="Enter search term">
    <button onclick="fetchArticle()">Fetch Article</button>
    <div id="articleContent">
        <h2 id="articleTitle"></h2>
        <p id="articleExtract"></p>
        <p><strong>Last Updated:</strong> <span id="articleLastUpdated"></span></p>
        <p><strong>Page ID:</strong> <span id="articlePageID"></span></p>
        <p><strong>Length:</strong> <span id="articleLength"></span> characters</p>
        <p><a id="desktopLink" href="" target="_blank">Read more on Wikipedia (Desktop)</a></p>
        <p><a id="mobileLink" href="" target="_blank">Read more on Wikipedia (Mobile)</a></p>
    </div>

    <script>
        async function fetchArticle() {
            const query = document.getElementById('searchQuery').value;
            const response = await fetch(`/api/wiki?query=${encodeURIComponent(query)}`);
            const data = await response.json();

            document.getElementById('articleTitle').innerText = data.title;
            document.getElementById('articleExtract').innerText = data.extract;
            document.getElementById('articleLastUpdated').innerText = new Date(data.last_updated).toLocaleString();
            document.getElementById('articlePageID').innerText = data.pageid;
            document.getElementById('articleLength').innerText = data.length;
            document.getElementById('desktopLink').href = data.content_urls.desktop.page;
            document.getElementById('mobileLink').href = data.content_urls.mobile.page;
        }
    </script>
</body>
</html>

Step 4: Running the Application

To run the application, add the following script to your package.json:

"scripts": {
  "start": "ts-node src/index.ts"
}

Now, start the server:

npm start

Open your browser and navigate to http://localhost:3000. You should see a simple form where you can enter a search term to fetch Wikipedia articles.

Project Structure

wikipedia-fetcher/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   └── index.ts
├── .gitignore
├── package.json
├── tsconfig.json
└── README.md

Conclusion

In this post, we learned how to fetch and display Wikipedia articles using the MediaWiki API. This is just the beginning, and there's a lot more you can explore on your own. Here are some ideas for further exploration:

Search Suggestions: Implement a feature that provides search suggestions as the user types.
Error Handling: Improve error handling to provide more user-friendly messages.
Styling: Enhance the styling of the HTML page using CSS.
Pagination: Add pagination to handle multiple search results.
Caching: Implement caching to reduce the number of API calls for frequently searched terms.
Advanced Queries: Explore more advanced queries using the MediaWiki API. You can find more information here.

Let me know if you have any questions!
Thanks for reading!
PO.

DEV Community: PO

Fetching Mock Data in Nuxt.js Using MockAPI.io

Step 1: Setting Up Your Nuxt.js Project

Step 2: Setting Up MockAPI.io

Step 3: Fetching Data in Nuxt.js Using fetch

Delete app.vue

Create a New Page

Fetch Data Using asyncData

Conclusion

How to Use Shadcn UI with a React Project

Prerequisites

Step 1: Install Shadcn UI

Step 2: Using Shadcn UI Components

Adding a Button Component

Adding a Card Component

Step 3: Customizing Components

Conclusion

Tips for Using Shadcn UI

Experimenting with Tailwind CSS: A Quick Guide

Why Tailwind CSS?

Getting Started with Tailwind CSS Online

Step-by-Step Guide

Benefits of Using the Tailwind CSS Playground

Boost Your Productivity with VSCode Extension

Conclusion

Using Redux Toolkit with React: A Simple Guide

What is Redux Toolkit?

Setting Up Redux Toolkit with React

Step 1: Install Dependencies

Step 2: Create a Redux Store

Step 3: Create a Slice

Step 4: Provide the Store to Your React Application

Step 5: Connect React Components to the Redux Store

Step 6: Use the Connected Component in Your App

Conclusion

Further Exploration

Stop Watching Long Clone Tutorials

1. Search Up Only on the Feature You're Trying to Make or Implement

2. Start Building Your Own Projects

3. You Remember Concepts Better When You're Not Copying Others' Work

4. Use Documentation and Official Resources

5. Join Developer Communities

6. Practice, Practice, Practice

Using Docker with Express (Node.js) Tutorial

Prerequisites

Step 1: Set Up a Node.js and Express Application

Step 2: Create a Dockerfile

Step 3: Create a .dockerignore File

Step 4: Build the Docker Image

Step 5: Run the Docker Container

Project Structure

Further Exploration

How to Fetch Wikipedia Articles Using Node.js (Express, TypeScript, Axios)

Step 1: Setting Up the Project

Step 2: Setting Up Express Server

Step 3: Creating the HTML Page

Step 4: Running the Application

Project Structure

Conclusion

Fetch Data Using `asyncData`