Forem: Kita

Learning Three.js in 2024 🚀

Kita — Sun, 15 Sep 2024 06:45:59 +0000

I had the chance to dive into some web development where I wanted to add interactive 3D elements that could move and react to certain triggers. Naturally, this led me to explore Three.js — a super popular library for rendering 3D graphics on the web.

While learning Three.js, I went through a ton of blogs, tutorials, and resources, and I thought, “Why not summarize my journey and share a really cool example?” So, if you’re someone who wants to get started with Three.js, I’ve put together this guide just for you.

As we step into 2024, the need for immersive and interactive 3D experiences is skyrocketing. Whether it’s for e-commerce sites showing 3D models of products, educational platforms using 3D simulations, or even games — 3D technology is transforming the way we engage with digital content. And the best part? With Three.js, creating these experiences is easier than ever!

In this guide, I’ll take you step-by-step through Three.js, and by the end, you’ll have built a 3D scene with a floating astronaut in space. 🧑‍🚀🌌

Ready to dive in? Let’s get started!

Why Learn Three.js in 2024? 🔥

Three.js provides a simple yet powerful way to bring these 3D experiences to the web. Here’s why learning Three.js is a fantastic idea in 2024:

WebXR and WebGL: Virtual reality (VR) and augmented reality (AR) on the web are growing, and Three.js is WebXR-ready.
Cross-Browser Support: It works seamlessly across modern browsers, including mobile ones.
Lightweight 3D Creation: No need to learn complex WebGL. Three.js makes 3D creation as easy as writing JavaScript.
Growing Community: With more than a decade of active development, the library has an ever-growing collection of plugins and examples.

Setting Up: Your First Three.js Scene

Let’s start with the basics. The magic of Three.js starts with three core concepts: Scene, Camera, and Renderer. If you understand these, you’re already halfway there!

1. The Scene 🏙️

Think of the scene as your 3D canvas. It contains all the objects, lights, and cameras needed to create the final 3D rendering.

const scene = new THREE.Scene();

2. The Camera 📸

The camera is your “viewpoint” into the 3D world. In 2024, most developers use PerspectiveCamera, which simulates how human eyes see the world.

const camera = new THREE.PerspectiveCamera(
  75, // Field of view
  window.innerWidth / window.innerHeight, // Aspect ratio
  0.1, // Near clipping plane
  1000 // Far clipping plane
);
camera.position.z = 5; // Move the camera back so we can see the objects

3. The Renderer 🎨

The renderer converts the 3D scene and camera into a 2D image for the browser to display. In 2024, we typically use WebGLRenderer, which is optimized for modern browsers.

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); 
// Adds the canvas to the webpage

4. Creating a Simple 3D Object: A Cube 🟩

Let’s create our first 3D object: a cube. We define its geometry, give it a material, and combine them into a mesh.

const geometry = new THREE.BoxGeometry(); // Define the shape (cube)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
 // Apply a green color to the cube
const cube = new THREE.Mesh(geometry, material); 
// Combine the geometry and material into a 3D mesh
scene.add(cube); // Add the cube to the scene

5. Animating the Cube 🌀

3D is all about movement! Let’s make our cube rotate. To do this, we create an animation loop using requestAnimationFrame, which ensures smooth 60fps rendering.

function animate() {
  requestAnimationFrame(animate); // Keep looping the function for continuous animation

  cube.rotation.x += 0.01; // Rotate cube on the X axis
  cube.rotation.y += 0.01; // Rotate cube on the Y axis
renderer.render(scene, camera); // Render the scene from the camera's perspective
}
animate(); // Start the animation loop

Putting It All Together:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

Congrats! 🎉 You’ve now set up the basics of a 3D world ! 🥳

Adding Objects to the Scene 🛠️

Now that we have a scene, camera, and renderer, it’s time to add some 3D objects! We’ll start with something simple: a rotating cube.

const geometry = new THREE.BoxGeometry(); // Defines the shape
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 
// Adds color to the shape
const cube = new THREE.Mesh(geometry, material); 
// Combines the shape and color
scene.add(cube); // Adds the cube to the scene

Adding Animation:

Now let’s animate the cube so it spins! Real-time graphics need smooth animations, and we can achieve that with requestAnimationFrame.

function animate() {
  requestAnimationFrame(animate); // Keep looping through this function

  cube.rotation.x += 0.01; // Rotate the cube around the X axis
  cube.rotation.y += 0.01; // Rotate the cube around the Y axis

renderer.render(scene, camera); // Render the scene from the perspective of the camera

}
animate(); // Start the animation loop

And boom 💥 — You’ve just created your first animated 3D object in Three.js!

Taking It Up a Notch

Lights, Materials, and Shadows 🌟

3D graphics are nothing without light. The more realistic the lighting, the more impressive your 3D world becomes. Let’s explore:

Adding Lights 💡

Without light, even the best 3D models will look flat and lifeless. In Three.js, there are several types of lights:

AmbientLight: Provides soft global lighting that illuminates all objects equally.
DirectionalLight: Simulates sunlight, casting parallel light rays in a specific direction.

const ambientLight = new THREE.AmbientLight(0x404040, 2);
 // Soft light to brighten the scene
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize(); 
// Light from top-right corner
scene.add(directionalLight);

Better Materials for Realism 🎨

MeshStandardMaterial is the go-to material for creating objects that look realistic.

const material = new THREE.MeshStandardMaterial({ color: 0xff0051, metalness: 0.6, roughness: 0.4 });

Interactivity with OrbitControls 🕹️

What’s a 3D scene without interactivity? With OrbitControls, you can let users rotate, pan, and zoom in your 3D world.

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update(); // Make sure the controls stay in sync with the camera

Textures and Models: Bringing Realism to Life 🎨

loading 3D models and textures is key to building immersive experiences. Here’s how to load a 3D model of, say, a floating astronaut (because why not? 🤩):

Using the GLTFLoader:

const loader = new THREE.GLTFLoader();
loader.load('/path-to-your-model/astronaut.glb', function (gltf) {
  scene.add(gltf.scene); // Add the astronaut to the scene
});

Real-World Example: Floating Astronaut in Space 🌌🧑‍🚀

Let’s bring everything together with a complete example — a floating astronaut in space! This example demonstrates everything we’ve covered so far: 3D models, textures, lights, animations, and interactivity.

Key Aspects of the Code:

Astronaut Model:

The astronaut model (astronaut.glb) is loaded using useGLTF().
The model uses several textures (color, roughness, metalness, normal, and ambient occlusion).

Textures:

Color Texture: Adds base color to the astronaut model.
Roughness Texture: Determines how rough or smooth the surface of the astronaut is.
Metalness Texture: Controls how metallic the material looks.
Normal Texture: Adds surface detail to make the astronaut’s surface look more realistic.
Ambient Occlusion (AO): Adds shadows in crevices to give the astronaut model more depth.

Lighting:

Ambient Light: Adds overall brightness to the scene.
Directional Light: Illuminates the astronaut from one direction, simulating sunlight.
Spot Light: Adds focused light on the astronaut to emphasize key areas.

Post-Processing:

Bloom: A bloom effect is used to create a subtle glow, enhancing the overall visual appeal.

Controls:

OrbitControls: Allows the user to interact with the scene by zooming and panning around the astronaut.

Final Code for Floating Astronaut:

The code you provided implements a 3D floating astronaut in space using Three.js, React Three Fiber, and various textures. Below is an explanation of the code along with some minor improvements:

import * as THREE from 'three';
import React, { useRef, useEffect } from 'react';
import { Canvas, useFrame, useLoader } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';
import { TextureLoader, AnimationMixer, BackSide } from 'three';
import { EffectComposer, Bloom } from '@react-three/postprocessing';

const Astronaut = () => {
  const { scene, animations } = useGLTF('/astronaut.glb'); // Load the astronaut model
  const mixer = useRef<AnimationMixer | null>(null);

  useEffect(() => {
    scene.scale.set(0.3, 0.3, 0.3); // Scale down the astronaut
  }, [scene]);

  useFrame((state, delta) => {
    if (!mixer.current && animations.length) {
      mixer.current = new AnimationMixer(scene);
      mixer.current.clipAction(animations[0]).play();
    }
    if (mixer.current) mixer.current.update(delta);
  });

  return <primitive object={scene} />;
};

const SpaceBackground = () => {
  const texture = useLoader(TextureLoader, '/textures/space-background.jpg');
  return (
    <mesh>
      <sphereGeometry args={[100, 32, 32]} />
      <meshBasicMaterial map={texture} side={BackSide} />
    </mesh>
  );
};

const App = () => {
  return (
    <Canvas>
      <SpaceBackground />
      <ambientLight intensity={1.5} />
      <directionalLight position={[10, 10, 10]} intensity={2} />
      <Astronaut />
      <OrbitControls />
      <EffectComposer>
        <Bloom intensity={0.7} />
      </EffectComposer>
    </Canvas>
  );
};

export default App;

Astronaut Model: The astronaut model is loaded using GLTFLoader, animated with AnimationMixer.
Space Background: A large textured sphere acts as the space backdrop.
Lighting: Ambient and directional lights make the astronaut stand out, while bloom adds a glowing effect.
Interactivity: Users can pan, zoom, and rotate using OrbitControls. Heres how the result looks like:

Wrapping Up 🌟

With Three.js, creating stunning 3D experiences has never been easier. Whether you’re interested in building games, interactive websites, or visualizing data in 3D, the possibilities are endless. In 2024, the web is more immersive than ever, and with Three.js, you can be a part of this exciting future.

GitHub Repository 📂

You can find the full source code for the floating astronaut in space project on GitHub. Feel free to explore, clone, and modify it to suit your needs.

GitHub Repository: 3D Floating Astronaut Project

Assets and Image Links 🌌

3D Astronaut Model: The astronaut model used in this project can be found on Sketchfab.
Animated Floating Astronaut in Space Suit (Sketchfab)
Background Image: The background space image is provided by Alex Myers from Pixabay.
Image by Alex Myers from Pixabay.

Happy coding, future 3D creator! 🚀

Mastering Axios: A Technical Guide to Building Your Food Delivery App🍔✨

Kita — Sun, 01 Sep 2024 05:56:29 +0000

In today’s world, efficient and reliable HTTP requests are the backbone of any web application, especially for something as critical as a food delivery app. In this guide, we'll explore how to use Axios to build and enhance a food delivery app by making seamless API requests, handling responses, managing errors, and much more.

1. Introduction to Axios

Axios is a promise-based HTTP client that is widely used for making HTTP requests in JavaScript applications. It works seamlessly in both the browser and Node.js environments. Here's why Axios is often chosen over other HTTP clients:

Why Choose Axios?

Promise-Based Interface: Axios leverages promises, making it easy to work with modern async/await syntax, leading to cleaner and more readable code.
Request and Response Interceptors: Provides hooks to run custom code or modify requests/responses globally.
Automatic JSON Data Handling: No need to manually parse or stringify JSON data—Axios does it for you.
Broad Browser Support: Axios is supported across all modern browsers and can be used in Node.js.

Installing Axios

To get started, you need to install Axios in your project:

npm install axios

Or if you prefer using yarn:

yarn add axios

After installation, you can import Axios in your JavaScript files:

import axios from 'axios';

With Axios installed and ready, let's move on to the core functionalities.

2. Making HTTP Requests

In a food delivery app, interacting with various APIs is crucial. Whether you’re fetching a list of restaurants, placing an order, or tracking delivery, Axios makes this easy.

Fetching Restaurant Data (GET Request)

Let’s start by fetching a list of restaurants. Here’s how you can make a simple GET request:

axios.get('https://api.foodapp.com/restaurants')
  .then(response => {
    console.log('List of Restaurants:', response.data);
    // Further processing or updating the UI
  })
  .catch(error => {
    console.error('Error fetching restaurant data:', error);
  });

In this example, Axios sends a GET request to the API endpoint to retrieve restaurant data. The then block handles the successful response, while the catch block captures and logs any errors that occur.

Placing an Order (POST Request)

When a user decides to place an order, you’ll need to send that order data to the server. Here’s how:

axios.post('https://api.foodapp.com/orders', {
  restaurantId: 42,
  items: [
    { id: 101, name: 'Margherita Pizza', quantity: 1 },
    { id: 202, name: 'Caesar Salad', quantity: 2 }
  ],
  userId: 301,
  deliveryAddress: '123 Main Street'
})
.then(response => {
  console.log('Order placed successfully:', response.data);
  // Redirect user to order confirmation page
})
.catch(error => {
  console.error('Error placing order:', error);
});

Here, we’re sending a POST request with the order details in the request body. This information is typically sent as JSON. The server processes the order and returns a confirmation in the response, which you can then use to update the UI.

Updating Order Status (PUT Request)

If you need to update an existing order, such as changing the delivery address or order items, you can use a PUT request:

axios.put('https://api.foodapp.com/orders/123', {
  deliveryAddress: '456 New Street'
})
.then(response => {
  console.log('Order updated successfully:', response.data);
})
.catch(error => {
  console.error('Error updating order:', error);
});

PUT requests are used to update resources on the server. In this case, the delivery address of an order is being updated.

3. Request Configuration: Customizing Your Requests

Axios allows you to configure your requests globally or per-request, giving you flexibility in how you interact with APIs.

Global Configuration

Instead of setting the same base URL or headers in every request, you can define them globally:

axios.defaults.baseURL = 'https://api.foodapp.com';
axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_TOKEN_HERE';
axios.defaults.timeout = 5000;  // Set a global timeout of 5 seconds

This configuration is applied to all requests, saving you from repetition and ensuring consistency across your app.

Per-Request Configuration

Sometimes, you might need to configure specific requests differently. For instance, you might want to override the global timeout for a particular request:

axios.get('/restaurants', {
  timeout: 10000  // Override global timeout for this request
})
.then(response => console.log('Restaurant data:', response.data))
.catch(error => console.error('Error fetching data:', error));

This flexibility allows you to tailor each request to the specific needs of your app.

4. Handling Responses: Processing Data Efficiently

After making a request, the response from the server needs to be handled appropriately. Axios provides a clean way to access not just the data, but also additional response details.

Inspecting the Response Object

The response object from Axios includes more than just data; it provides the status, headers, and more:

axios.get('/restaurants')
  .then(response => {
    console.log('Status:', response.status);  // HTTP status code
    console.log('Headers:', response.headers);  // HTTP headers
    console.log('Data:', response.data);  // Response data (restaurants)
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

This information can be crucial for tasks such as handling different HTTP statuses or logging response times.

Transforming Response Data

Sometimes, the data you receive isn’t in the exact format you need. Axios allows you to transform this data easily:

axios.get('/restaurants')
  .then(response => {
    const formattedData = response.data.map(restaurant => ({
      name: restaurant.name.toUpperCase(),
      cuisine: restaurant.cuisine,
      rating: `${restaurant.rating} stars`
    }));
    console.log('Formatted Restaurants:', formattedData);
  })
  .catch(error => {
    console.error('Error fetching or transforming data:', error);
  });

This transformation ensures that the data is in the most useful format for your application, reducing the need for additional processing later on.

5. Error Handling: Managing Failures Gracefully

Errors are inevitable, especially when dealing with network requests. Axios provides a robust mechanism for catching and handling these errors.

Basic Error Handling

Here’s how you can catch and handle errors in your Axios requests:

axios.get('/restaurants')
  .catch(error => {
    if (error.response) {
      console.error('Server responded with an error:', error.response.status);
    } else if (error.request) {
      console.error('No response received:', error.request);
    } else {
      console.error('Error setting up request:', error.message);
    }
  });

This code snippet handles different types of errors:

Response errors occur when the server responds with a status outside the 2xx range.
Request errors happen when the request is made but no response is received (e.g., network issues).
Setup errors occur before the request is even made (e.g., a misconfigured request).

Retrying Requests

Sometimes, you may want to automatically retry a failed request, especially for transient errors like network hiccups:

function retryRequest(config, retries = 3) {
  return axios(config).catch(error => {
    if (retries > 0) {
      console.log(`Retrying request... (${retries} retries left)`);
      return retryRequest(config, retries - 1);
    } else {
      return Promise.reject(error);
    }
  });
}

retryRequest({ url: '/restaurants' })
  .then(response => console.log('Data:', response.data))
  .catch(error => console.error('Final error after retries:', error));

This recursive function retries the request a specified number of times before finally throwing an error. It’s particularly useful for scenarios where temporary network issues are common.

6. Interceptors: Advanced Request and Response Handling

Interceptors allow you to run your code or modify requests and responses before they are handled by then or catch.

Request Interceptors

Let’s say you want to attach an authentication token to every request:

axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer YOUR_TOKEN_HERE';
  console.log('Request made with:', config);
  return config;
}, error => {
  return Promise.reject(error);
});

This interceptor automatically adds the authorization header to every outgoing request, ensuring that the user is authenticated for all API calls.

Response Interceptors

You can also use interceptors to handle responses globally:

axios.interceptors.response.use(response => {
  console.log('Response received:', response);
  return response;
}, error => {
  if (error.response.status === 401) {
    console.error('Unauthorized access - redirecting to login.');
    // Redirect to login or refresh the token
  }
  return Promise.reject(error);
});

This response interceptor checks for specific status codes, such as 401 Unauthorized, and allows you to take action,

such as redirecting to a login page.

7. Cancelling Requests: Handling User Navigation and Timeouts

In some cases, you might want to cancel an HTTP request, for example, if the user navigates away from the page before the request completes.

Cancelling an Axios Request

Here’s how you can cancel a request using Axios:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/restaurants', {
  cancelToken: source.token
})
.then(response => {
  console.log('Restaurants data:', response.data);
})
.catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled:', thrown.message);
  } else {
    console.error('Request failed:', thrown);
  }
});

// Later, cancel the request
source.cancel('Operation canceled by the user.');

By using a cancel token, you can easily cancel the request if the user navigates away or if you determine that the request is no longer necessary.

8. Concurrent Requests: Efficiently Managing Multiple API Calls

In a food delivery app, you might need to fetch data from multiple endpoints simultaneously, such as restaurant details and current promotions.

Handling Multiple Requests

Axios makes it simple to perform concurrent requests using axios.all:

axios.all([
  axios.get('/restaurants/42'),
  axios.get('/promotions/current')
])
.then(axios.spread((restaurantResponse, promotionsResponse) => {
  console.log('Restaurant:', restaurantResponse.data);
  console.log('Promotions:', promotionsResponse.data);
}))
.catch(error => {
  console.error('Error with concurrent requests:', error);
});

In this example, two requests are made simultaneously, and their results are handled together, improving the efficiency of your application by reducing the overall loading time.

9. Axios and Authentication: Securing Your API Interactions

Authentication is a critical aspect of any application that handles sensitive data, such as user profiles and payment information.

Handling Login Requests

Here’s how you can manage user login and store the authentication token:

axios.post('/auth/login', {
  username: 'john_doe',
  password: 'securepassword123'
})
.then(response => {
  const token = response.data.token;
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  console.log('User logged in successfully.');
})
.catch(error => {
  console.error('Login failed:', error);
});

After a successful login, the token is stored and attached to all subsequent requests, ensuring that the user remains authenticated throughout their session.

Refreshing Tokens

For long-running sessions, you might need to refresh the authentication token. Here’s a simple way to handle token refresh:

axios.interceptors.response.use(response => {
  return response;
}, error => {
  const originalRequest = error.config;
  if (error.response.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true;
    return axios.post('/auth/refresh-token')
      .then(res => {
        if (res.status === 200) {
          axios.defaults.headers.common['Authorization'] = `Bearer ${res.data.token}`;
          originalRequest.headers['Authorization'] = `Bearer ${res.data.token}`;
          return axios(originalRequest);
        }
      });
  }
  return Promise.reject(error);
});

This interceptor checks for a 401 Unauthorized response and attempts to refresh the token before retrying the original request.

10. Customizing Axios: Tailoring Axios to Fit Your Application

In complex applications, you might need to create multiple Axios instances with different configurations.

Creating a Custom Axios Instance

For example, you might want a separate instance for making API calls related to user accounts:

const userApi = axios.create({
  baseURL: 'https://api.foodapp.com/users',
  timeout: 3000,
  headers: {'X-Custom-Header': 'userAPI'}
});

userApi.get('/profile')
  .then(response => console.log('User profile:', response.data))
  .catch(error => console.error('Error fetching user profile:', error));

This instance is configured with a specific base URL and timeout, making it easier to manage different types of requests in your app.

11. Using Axios with Async/Await: Simplifying Your Asynchronous Code

Async/await syntax is a powerful feature in JavaScript that simplifies working with asynchronous code, making it more readable and maintainable.

Fetching Data with Async/Await

Here’s how you can use async/await with Axios to fetch restaurant data:

async function fetchRestaurantData() {
  try {
    const response = await axios.get('/restaurants');
    console.log('Restaurant data:', response.data);
  } catch (error) {
    console.error('Error fetching restaurant data:', error);
  }
}

fetchRestaurantData();

This approach allows you to write asynchronous code that looks synchronous, making it easier to understand and debug.

12. Working with Cookies: Maintaining Session State

Cookies are often used to maintain session state, particularly in web applications that require user authentication.

Sending Cookies with Requests

If your backend uses cookies to manage sessions, you can ensure they’re sent with every request:

axios.defaults.withCredentials = true;

axios.get('/user/profile')
  .then(response => console.log('User profile:', response.data))
  .catch(error => console.error('Error fetching profile:', error));

By setting withCredentials to true, Axios will include cookies in cross-site requests, enabling session management.

13. Uploading and Downloading Files: Handling Media with Axios

In a food delivery app, you might need to upload images (e.g., restaurant logos) or download files (e.g., PDF menus).

Uploading an Image

Here’s how to upload an image file to the server:

const formData = new FormData();
formData.append('image', fileInput.files[0]);

axios.post('/restaurants/42/logo', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(response => console.log('Image uploaded successfully:', response.data))
.catch(error => console.error('Error uploading image:', error));

This code uses FormData to send a file along with the request, ensuring it’s handled correctly by the server.

Downloading a File

And here’s how to download a file, such as a PDF menu:

axios({
  url: '/restaurants/42/menu.pdf',
  method: 'GET',
  responseType: 'blob', // Ensures the response is treated as binary data
})
.then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'menu.pdf');
  document.body.appendChild(link);
  link.click();
})
.catch(error => console.error('Error downloading file:', error));

This method downloads the file and triggers a download in the user’s browser.

14. Axios Adapters: Extending Axios for Custom Use Cases

Axios adapters allow you to extend or modify how Axios handles requests, which can be useful in specialized scenarios.

Creating a Custom Adapter

Let’s say you want to log every request to a database for analytics purposes:

function loggingAdapter(config) {
  // Log request to database
  logRequestToDatabase(config);

  // Proceed with the default request handling
  return axios.defaults.adapter(config);
}

const customAxios = axios.create({
  adapter: loggingAdapter
});

customAxios.get('/restaurants')
  .then(response => console.log('Restaurant data:', response.data))
  .catch(error => console.error('Error fetching data:', error));

This adapter logs each request before proceeding with the default handling, allowing you to extend Axios’s behavior without modifying its core functionality.

15. Debugging and Logging: Keeping Your App Running Smoothly

Effective logging and debugging are essential for maintaining a robust application, especially when dealing with complex API interactions.

Logging Requests and Responses

Here’s how you can log all outgoing requests and incoming responses:

axios.interceptors.request.use(request => {
  console.log('Starting Request', request);
  return request;
});

axios.interceptors.response.use(response => {
  console.log('Response:', response);
  return response;
});

This setup logs the full details of every request and response, providing valuable insights during development and debugging.

Handling Errors in Debug Mode

For development, you might want to log additional details about errors:

axios.interceptors.response.use(
  response => response,
  error => {
    if (process.env.NODE_ENV === 'development') {
      console.error('Error response:', error.response);
    }
    return Promise.reject(error);
  }
);

This interceptor logs error details only in development mode, helping you diagnose issues without cluttering your production logs.

Conclusion

Axios is a powerful tool that can significantly streamline your HTTP requests, making your food delivery app more efficient, reliable, and easier to maintain. Whether you’re handling authentication, uploading files, or dealing with concurrent requests, Axios provides the flexibility and control needed to manage these tasks effectively.

With the concepts and examples covered in this guide, you’re now equipped to build and enhance your food delivery app, ensuring it’s robust and ready to handle real-world demands.

Happy coding🎉!

TypeScript Guide: Everything you need to know! Part -2

Kita — Sat, 17 Aug 2024 18:01:33 +0000

Welcome to Part 2 of our TypeScript journey! Now that you’re comfortable with the basics, it’s time to explore some of the more advanced concepts that can make your TypeScript skills truly shine. This guide will focus on practical techniques and best practices that you can start using in your daily coding routine.

Advanced Types
- Union and Intersection Types
- Literal Types
- Type Guards
Utility Types
- Partial, Pick, and Omit
- Record and Readonly
- ReturnType and Parameters
Generics: Supercharging Your Code
- Generic Functions
- Generic Constraints
- Generic Classes and Interfaces
Type Narrowing and Guards
- Typeof and Instanceof
- Custom Type Guards
Advanced Interfaces and Type Aliases
- Extending and Merging Interfaces
- Combining Type Aliases with Interfaces
Handling Asynchronous Code
- Typing Promises
- Async/Await with TypeScript
TypeScript Configurations and Best Practices
- Strict Mode and Compiler Options
- Organizing Types and Interfaces
- Avoiding Common Pitfalls

Advanced Types

TypeScript’s real power comes from its ability to handle complex types. These advanced types allow you to create more flexible and robust code.

Union and Intersection Types

Union Types let a variable be one of several types. They’re great when a value can have different forms.

type ID = string | number;
let userId: ID = 101; // Valid
userId = "abc123"; // Also valid

Intersection Types combine multiple types into one. They’re useful for merging object shapes.

interface Person {
  name: string;
}

interface Employee {
  employeeId: number;
}

type EmployeeDetails = Person & Employee;

const emp: EmployeeDetails = {
  name: "Ankita",
  employeeId: 1234,
};

Literal Types

Literal types restrict a variable to a specific set of values. This is particularly handy for defining options or statuses.

type Direction = "up" | "down" | "left" | "right";
let move: Direction = "up"; // Can only be one of these four values

Type Guards

Type guards help TypeScript understand what type a variable has at runtime. They’re useful for narrowing down union types.

function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(`ID is a string: ${id.toUpperCase()}`);
  } else {
    console.log(`ID is a number: ${id.toFixed(2)}`);
  }
}

Utility Types

TypeScript provides several built-in utility types that simplify common transformations.

Partial, Pick, and Omit

Partial makes all properties in an object optional.

  interface User {
    name: string;
    age: number;
  }

  let partialUser: Partial<User> = { name: "John" };

Pick creates a new type by selecting specific properties from an existing type.

  type UserPreview = Pick<User, "name">;

Omit creates a new type by removing specific properties.

  type UserWithoutAge = Omit<User, "age">;

Record and Readonly

Record is used to define an object type with specific key-value pairs.

  type Role = "admin" | "user" | "guest";
  const userRoles: Record<Role, string> = {
    admin: "Admin",
    user: "User",
    guest: "Guest",
  };

Readonly makes all properties in an object immutable.

  const config: Readonly<User> = {
    name: "Jane",
    age: 28,
  };

ReturnType and Parameters

ReturnType extracts the return type of a function.

  function fetchUser(): User {
    return { name: "Ankita", age: 26 };
  }

  type UserType = ReturnType<typeof fetchUser>;

Parameters extracts the parameter types of a function as a tuple.

  type FetchUserParams = Parameters<typeof fetchUser>;

Generics: Supercharging Your Code

Generics allow you to create reusable components that work across a variety of types.

Generic Functions

Generics are perfect for functions that work with multiple data types.

function identity<T>(value: T): T {
  return value;
}

let num = identity<number>(42);
let word = identity<string>("TypeScript");

Generic Constraints

You can constrain generics to ensure they work only with specific types.

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

let person = { name: "John", age: 30 };
let name = getProperty(person, "name"); // Valid

Generic Classes and Interfaces

Generics can be used in classes and interfaces to make them more flexible.

class Box<T> {
  content: T;
  constructor(content: T) {
    this.content = content;
  }
}

let stringBox = new Box<string>("Hello");

Type Narrowing and Guards

TypeScript can infer the type of a variable using type guards and control flow analysis.

Typeof and Instanceof

Use typeof and instanceof to narrow down types in your code.

function padLeft(value: string | number, padding: string | number) {
  if (typeof padding === "number") {
    return " ".repeat(padding) + value;
  }
  if (typeof padding === "string") {
    return padding + value;
  }
}

Custom Type Guards

You can create your own type guards for more complex checks.

interface Dog {
  bark: () => void;
}

interface Cat {
  meow: () => void;
}

function isDog(pet: Dog | Cat): pet is Dog {
  return (pet as Dog).bark !== undefined;
}

Advanced Interfaces and Type Aliases

Interfaces and type aliases can be combined and extended in various ways to model complex data structures.

Extending and Merging Interfaces

Interfaces can be extended to add more properties:

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

Combining Type Aliases with Interfaces

You can combine interfaces and type aliases for maximum flexibility.

type Pet = Dog & { age: number };

Handling Asynchronous Code

Working with async code is a crucial part of modern development, and TypeScript makes it easier.

Typing Promises

Make sure your async functions are well-typed:

async function fetchData(): Promise<string> {
  return "Data fetched!";
}

Async/Await with TypeScript

TypeScript works smoothly with async/await patterns:

async function getUserData(): Promise<User> {
  const response = await fetch("/api/user");
  return await response.json();
}

TypeScript Configurations and Best Practices

TypeScript is highly configurable. Here’s how to set it up for success.

Strict Mode and Compiler Options

Enabling strict mode gives you the best type-checking experience:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

Organizing Types and Interfaces

Keep your types and interfaces organized in a separate file, especially in larger projects. Use folders and consistent naming conventions to make your codebase easy to navigate.

Avoiding Common Pitfalls

Overusing any: It’s tempting to use any when you hit a roadblock, but try to use it sparingly.
Ignoring Errors: Address TypeScript errors instead of bypassing them – they usually signal real issues in your code.
Not Using Type Inference: TypeScript can often infer types without you explicitly stating them. Don’t overdo type annotations where they’re unnecessary.

Conclusion

This guide covered some of the more advanced and practical features of TypeScript that can make your code cleaner, more robust, and easier to maintain. As you continue your journey, remember that TypeScript is all about striking the right balance between safety and flexibility.

Start incorporating these techniques into your daily coding, and you’ll soon find yourself writing better, more reliable code!

If you have any questions or need further tips, feel free to ask in the comments!

Happy coding! 🎉

TypeScript Guide: Everything you need to know! Part -1

Kita — Sat, 17 Aug 2024 17:30:39 +0000

If you've been coding in JavaScript and are curious about TypeScript, you're in the right place! This guide focuses on practical, real-world examples that you can start using in your projects right away without getting bogged down in too much theory.

What’s TypeScript, Really?

TypeScript is like JavaScript’s smarter sibling. It adds static typing to your code, which helps catch errors before they sneak into production. The best part? You can introduce it gradually – no need for a big overhaul!

Why Use TypeScript?

You might wonder if you really need to add another tool to your stack. The short answer is: Yes! TypeScript helps prevent common bugs, provides smarter code suggestions, and keeps large projects more maintainable. Plus, it’s flexible – you can start small and expand its use as needed.

Key Benefits:

Catch Errors Early: TypeScript flags potential issues while you write code, reducing runtime errors.
Enhanced Auto-Complete: Enjoy better autocompletion and real-time feedback, thanks to TypeScript’s understanding of your code.
Scalable Codebase: As your project grows, TypeScript helps keep everything organized and consistent.

Getting Started with TypeScript

Step 1: Install TypeScript

Getting started with TypeScript is quick. Install it using npm (either globally or in your project):

npm install --save-dev typescript

Step 2: Create Your First TypeScript File

Create a new file called app.ts (the .ts extension is for TypeScript). Here’s a simple example:

let greeting: string = "Hello, TypeScript!";
console.log(greeting);

Step 3: Compile and Run the Code

Compile your TypeScript file to JavaScript and run it:

npx tsc app.ts
node app.js

You should see "Hello, TypeScript!" in your console.

Types: The Basics

TypeScript introduces types that help make your code safer and easier to understand. Here’s an overview of the most common types you’ll use.

Numbers and Strings

Numbers and strings are the bread and butter of any program:

let age: number = 25;
let name: string = "John Doe";

Arrays

Arrays are easy to define and use:

let scores: number[] = [90, 85, 88];
let names: string[] = ["Ankita", Shubham"];

Objects

Objects are crucial in any application. Here’s how you define them with types:

let person: { name: string; age: number } = {
  name: "Ankita",
  age: 26,
};

Functions

You can specify the types of function parameters and return values, making your functions more predictable:

function add(a: number, b: number): number {
  return a + b;
}

let sum = add(10, 20);
console.log(sum); // 30

Optional and Default Parameters

TypeScript makes it easy to handle optional parameters or set default values:

function greet(name: string = "Guest", greeting?: string): string {
  return `${greeting || "Hello"}, ${name}!`;
}

console.log(greet("Ankita")); // Hello, Ankita!
console.log(greet("John", "Hi")); // Hi, John!

Working with Interfaces

Interfaces allow you to define the structure of objects in your application. They’re especially useful when working with complex objects.

interface User {
  name: string;
  age: number;
  isAdmin?: boolean; // Optional property
}

let user: User = {
  name: "Ankita",
  age: 26,
};

Extending Interfaces

You can extend interfaces to build on top of existing ones. This is great when you have related entities:

interface Employee extends User {
  employeeId: number;
}

let employee: Employee = {
  name: "David",
  age: 35,
  employeeId: 1234,
};

TypeScript in Real Life: A Mini Project

Let’s build a simple task manager to demonstrate how TypeScript works in a practical scenario.

Step 1: Define the Task Interface

First, define a structure for tasks:

interface Task {
  id: number;
  title: string;
  completed: boolean;
}

Step 2: Create a Function to Add Tasks

Next, implement a function to add new tasks to your task list:

let tasks: Task[] = [];

function addTask(title: string): void {
  const newTask: Task = {
    id: tasks.length + 1,
    title,
    completed: false,
  };
  tasks.push(newTask);
}

addTask("Learn TypeScript");
addTask("Build a project");

Step 3: List the Tasks

You’ll likely want to display your tasks. Here’s a simple way to do it:

function listTasks(): void {
  tasks.forEach((task) => {
    console.log(`${task.id}: ${task.title} [${task.completed ? "✔" : "✖"}]`);
  });
}

listTasks();

Step 4: Mark a Task as Completed

Finally, you can add functionality to mark tasks as done:

function completeTask(id: number): void {
  const task = tasks.find((task) => task.id === id);
  if (task) {
    task.completed = true;
  }
}

completeTask(1);
listTasks();

This mini project is a great start to seeing how TypeScript can improve the quality and readability of your code.

TypeScript in React

React and TypeScript are a match made in heaven. Here’s how you’d type props in a functional React component:

interface Props {
  title: string;
}

const Header: React.FC<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

Typing hooks is also straightforward:

const [count, setCount] = useState<number>(0);

Adding TypeScript to your React projects helps you avoid common bugs and makes your components more predictable.

Conclusion

TypeScript is more than just a fancy addition to JavaScript – it’s a tool that makes your code more reliable and easier to manage. Whether you’re working on small projects or large-scale applications, TypeScript can help keep your code clean, bug-free, and maintainable.

The best way to learn TypeScript is to start using it! Add it to your next project, and see how it can make your code safer and more fun to work with.

Feel free to ask questions or share your experiences with TypeScript in the comments below!

Happy coding! 🎉

An Introduction to the Go Programming Language: Setup, Syntax, and Basic Concepts

Kita — Mon, 29 Apr 2024 08:20:26 +0000

Why Go?

Welcome to the world of Go, also known as Golang! Go is an open-source programming language developed by Google. It's designed for simplicity, efficiency, and performance. Go's popularity has been rising among developers due to its speed, concurrency capabilities, and ease of use. In this blog, we'll dive into the basics of Go, from setting it up to understanding its syntax and key concepts.

So, let's get started💻 ✨!

Setting Up Go

Before we dive into coding, let's set up Go on your computer. Here's a step-by-step guide to installing Go:

Download Go:
Visit the official Go website and download the latest version for your operating system (Windows, macOS, or Linux).

Install Go:
Follow the installation instructions for your OS. On Windows, run the installer. On macOS, you might need to use a package manager like Homebrew. On Linux, you can use your system's package manager or download a tarball and extract it.

Set Environment Variables:
After installation, you need to ensure your system recognizes the go command. Typically, the installer adds Go to your system's PATH variable. If it doesn't, you may need to add it manually.

To check if Go is installed correctly, open a terminal or command prompt and type Go version. You should see the installed version of Go.

Verify Installation:
Create a new directory for your Go projects (e.g., go_projects).

Inside this directory, create a new file called hello.go with the following code:

package main

import "fmt"

func main() {
    fmt.Println("Hello, Go!")
}

In the terminal, navigate to the directory where you created the hello.go file and run go run hello.go. If you see "Hello, Go!" in the output, your setup is successful!

Basic Syntax and Concepts

Now that you've set up Go, let's dive into some basic concepts and syntax:

Packages and Imports
In Go, code is organized into packages. The package main declaration indicates that this code is part of the "main" package, which is usually used for executable programs. You also import other packages to access additional functionality. For example, the fmt package provides functions for formatted input and output.

Variables and Data Types
Go is a statically typed language, meaning you must define the type of variables. Here's an example of variable declaration and some basic data types:

package main

import "fmt"

func main() {
    var age int = 26
    var name string = "Ankita"
    height := 5.5 // Shorthand for variable declaration

    fmt.Println("Name:", name)
    fmt.Println("Age:", age)
    fmt.Println("Height:", height)
}

Functions
Functions in Go are defined using the func keyword. Here's an example of a simple function that adds two numbers:

package main

import "fmt"

func add(x int, y int) int {
    return x + y
}

func main() {
    result := add(5, 10)
    fmt.Println("Result:", result)
}

Control Structures
Go has standard control structures like loops and conditionals. Here's an example of a for loop and an if-else statement:

package main

import "fmt"

func main() {
    // For loop
    for i := 0; i < 3; i++ {
        fmt.Println("i:", i)
    }

    // If-else statement
    age := 25
    if age < 18 {
        fmt.Println("You are a minor.")
    } else {
        fmt.Println("You are an adult.")
    }
}

Concurrency

One of Go's standout features is its support for concurrency through goroutines and channels.

Goroutines: Lightweight Concurrency

A goroutine is a lightweight thread of execution. Unlike traditional threads in other languages, goroutines are much more lightweight and can be created in large numbers without significant overhead.

Starting a Goroutine:
To start a goroutine, you simply prefix a function call with the go keyword. Here's a simple example:

package main

import (
    "fmt"
    "time"
)

func greet(name string) {
    fmt.Printf("Hello, %s!\n", name)
}

func main() {
    go greet("Ankita") // This runs in a new goroutine
    greet("Dev")      // This runs in the main goroutine

    time.Sleep(1 * time.Second) // Sleep to give the goroutine time to execute
}

In this example, "Ankita" is greeted in a separate goroutine while "Dev" is greeted in the main goroutine. The sleep ensures that the new goroutine has enough time to run before the program ends.

Why Use Goroutines?

Goroutines are useful when you want to run multiple tasks concurrently, such as handling web requests, performing background tasks, or processing data in parallel. They enable more responsive and scalable applications without the complexities of traditional multithreading.

Channels: Communication Between Goroutines
Channels in Go are like pipes that allow goroutines to communicate with each other. They provide a safe way to send and receive data between goroutines, ensuring proper synchronization and avoiding race conditions.

Creating a Channel
To create a channel, you use the make function and specify the data type the channel will carry:

// Create a channel that carries integers
ch := make(chan int)

Sending and Receiving Data
You send data into a channel using the <- operator, and you receive data from a channel the same way:

package main

import "fmt"

func main() {
    ch := make(chan int) // Create a channel for integers

    go func() {
        ch <- 42 // Send 42 into the channel
    }()

    result := <-ch // Receive the value from the channel
    fmt.Println("Received:", result)
}

In this example, we send the value 42 into the channel in a separate goroutine, then receive it in the main goroutine.

Buffered Channels
Channels can be either unbuffered or buffered. An unbuffered channel requires a receiver to be ready to receive data before it can be sent. A buffered channel allows data to be stored in the buffer, letting the sender continue even if there's no immediate receiver.

package main

import (
    "fmt"
)

func main() {
    ch := make(chan int, 2) // Create a buffered channel with a capacity of 2

    ch <- 10 // This doesn't block because the channel has space
    ch <- 20 // This doesn't block either

    fmt.Println(<-ch) // Receive the first value (10)
    fmt.Println(<-ch) // Receive the second value (20)
}

Buffered channels are useful when you need to decouple the sending and receiving processes. However, unbuffered channels are generally preferred for strict synchronization.

Closing a Channel
When you're done sending data into a channel, you can close it to indicate that no more data will be sent. Receivers can still read any remaining data in the channel, but they'll get a special value indicating the channel is closed when it's empty:

package main

import "fmt"

func main() {
    ch := make(chan int, 2)

    ch <- 1
    ch <- 2
    close(ch) // Close the channel

    // Read values until the channel is empty
    for val := range ch {
        fmt.Println("Received:", val)
    }
}

The range loop over a channel iterates over the channel's values until it's closed and empty.

Now you have a basic understanding of goroutines and channels in Go. These concepts form the backbone of Go's concurrency model, allowing you to create efficient, scalable applications with ease. By combining goroutines for lightweight concurrent execution and channels for safe communication, you can build powerful programs that make the most of modern multi-core processors.

Conclusion

Congratulations! You've learned the basics of the Go programming language, from setting it up to understanding key concepts like packages, variables, functions, control structures, and concurrency. Go is a versatile language that's great for building high-performance applications, server-side services, and more.

To continue your Go journey, I recommend exploring additional topics like structs, interfaces, and error handling. Go has a thriving community and excellent documentation, so you'll find plenty of resources to help you along the way.
Happy coding💡✨!

Understanding Skeleton Loaders: A Guide to Content Loading in React 🦴

Kita — Sat, 20 Apr 2024 08:05:41 +0000

In today's web development landscape, optimizing user experience is paramount. One common challenge developers face is dealing with loading times, especially when fetching data from external sources. To address this issue, skeleton loaders have emerged as a popular solution. In this blog post, we'll delve into what skeleton loaders are, how they enhance user experience, and how to implement them in a React application using the react-loading-skeleton library.

We'll also explore a real-world example using a Post List component that fetches data using Axios.

Let's dive into the understanding of the Skeleton loader💀!

Setting Up the Project

Before we dive into the implementation, make sure you have a React project set up. If not, you can quickly create one using the Create React App or any other React boilerplate. Once your project is set up, install the react-loading-skeleton library by running the following command in your terminal:

npm install react-loading-skeleton

Understanding Skeleton Loaders:

Skeleton loaders are UI placeholders that mimic the layout of content while data is being fetched or processed. They provide users with a visual indication that something is happening in the background, reducing perceived loading times and enhancing user engagement. Skeleton loaders typically consist of simple, grayscale shapes that resemble the structure of the actual content being loaded, such as text blocks, images, and buttons.

Basic Configuration with react-loading-skeleton:

Once Installation is complete then import the Skeleton component into your React components where you want to use skeleton loaders:

import Skeleton from "react-loading-skeleton";

Use the Skeleton component to create placeholders for your content:

<Skeleton height={100} width={200} />

This will render a skeleton loader with a height of 100 pixels and a width of 200 pixels.

Let's explore some of the commonly used props:

1.width: Specifies the width of the skeleton loader. You can provide a value in pixels or percentages.

<Skeleton width={200} /> // Width of 200 pixels
<Skeleton width={"50%"} /> // Width of 50% of the parent container

2.height: Specifies the height of the skeleton loader. You can provide a value in pixels.

<Skeleton height={20} /> // Height of 20 pixels

3.circle: When set to true, the skeleton loader will be displayed as a circle instead of a rectangle.

<Skeleton circle width={50} height={50} /> // Circle with a diameter of 50 pixels

4.count: Specifies the number of skeleton loaders to render. Useful when you want to create multiple placeholders for a list of items.

<Skeleton height={20} count={3} /> // Three skeleton loaders for text lines

5.duration: Specifies the duration of the animation for the skeleton loader. This prop accepts a value in seconds.

<Skeleton duration={1.5} /> // Animation duration of 1.5 seconds

6.color: Specifies the color of the skeleton loader. You can provide a color value in hexadecimal, RGB, RGBA, or CSS color name format.

<Skeleton color="#f0f0f0" /> // Light gray color

7.style: Allows you to apply custom styles to the skeleton loader using a JavaScript object.

<Skeleton style={{ borderRadius: "50%", width: 100, height: 100 }} /> // Circular skeleton loader with a width and height of 100 pixels

These are some of the commonly used props for customizing skeleton loaders in react-loading-skeleton. By leveraging these props, you can create skeleton loaders that match the design and layout of your application.

Real-world Example: Post List Component with Skeleton Loaders

Now, let's see how to integrate skeleton loaders into a Post List component that fetches data from an API using axios.

Here I am using Axios for API Integration, for installing use the following command:

npm install axios

as for API, we will be using the JSONPlaceholder API is a free online REST API that provides placeholder data in the form of JSON responses. It's commonly used for testing and prototyping applications without the need for a real backend. The API provides various endpoints for different resources such as posts, users, comments, etc.

Here's a shorter breakdown of the structure of the example:

PostList Page (PostList.tsx):

Fetches a list of posts from the JSONPlaceholder API using Axios.
Displays skeleton loaders while data is being fetched.
Renders PostCard components with fetched data or skeleton loaders.

PostCard Component (PostCard.tsx):

Represents a single post card.
Displays post data if available, otherwise displays skeleton loaders.

App Component (App.tsx):

Renders the PostList component.

CSS Styles (App.css):

Contains styles for components and skeleton loaders.

Axios:

Used to make HTTP requests to the JSONPlaceholder API.

Now lets See how the code is going to look like

create a file named as PostCard.tsx

import React, { useState, useEffect } from "react";
import axios from "axios";
import Skeleton from "react-loading-skeleton";

interface PostCardProps {
  post: {
    id: number;
    title: string;
    body: string;
  };
}

const PostCard: React.FC<PostCardProps> = ({ post }) => {
  const [imageUrl, setImageUrl] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    fetchImage();
  }, []);

  const fetchImage = () => {
    setLoading(true);
    axios
      .get("https://picsum.photos/200")
      .then((response) => {
        setImageUrl(response.request.responseURL);
        setLoading(false);
      })
      .catch((error) => console.error(error));
  };

  return (
    <div className="post-card">
      <div className="post-image">
        {loading ? (
          <Skeleton height={"50vh"} width={"30vw"} className="skeleton" />
        ) : (
          <img src={imageUrl} alt="Post" />
        )}
      </div>
      <div className="post-content">
        {loading ? (
          <React.Fragment>
            <Skeleton
              height={20}
              width={200}
              style={{ marginBottom: "10px", marginTop: "10px" }}
              className="skeleton"
            />
            <Skeleton height={60} count={3} className="skeleton" />
          </React.Fragment>
        ) : (
          <React.Fragment>
            <center>
              <h3>{post.title}</h3>
              <p>{post.body}</p>
            </center>
          </React.Fragment>
        )}
      </div>
    </div>
  );
};

export default PostCard;

It defines a React component responsible for rendering a single postcard. It receives a post object as a prop containing the post's data (id, title, body). If the post data is available, it displays the post's title and body. If the post data is not available (while data is being fetched), it displays skeleton loaders for the post's title and body to provide a loading indicator.

2.After this, Let's work on the list view where our cards will be placed, for that in your views or screen folder create PostList.tsx:

import React, { useState, useEffect } from "react";
import axios from "axios";
import PostCard from "../components/PostCard";

const PostList: React.FC = () => {
  const [posts, setPosts] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((response) => {
        setPosts(response.data);
        setLoading(false);
      })
      .catch((error) => console.error(error));
  }, []);

  return (
    <div className="post-list-container">
      <div className="post-list">
        {loading ? (
          <div>Loading...</div>
        ) : (
          posts.map((post) => <PostCard key={post.id} post={post} />)
        )}
      </div>
    </div>
  );
};

export default PostList;

Our PostList.tsx is a React component responsible for fetching a list of posts from an API and rendering them. It uses Axios to make HTTP GET requests to the JSONPlaceholder API to fetch the posts. While the data is being fetched, it displays skeleton loaders to provide visual feedback to the user. Once the data is fetched successfully, it renders the PostCard components with the fetched data. If there is an error while fetching the data, it logs the error to the console.

3.Now finally lets style our list and post cards, here is example of App.css:

.heading {
  text-align: center;
  font-size: 2em;
  color: #333; 
  margin-bottom: 20px;
}
.post-list-container {
  justify-content: center;
  align-items: center;
  margin: 50px; 
  height: 100vh;
}

.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 20px;
}

.post-card {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  justify-content: center;

}

.post-image {
  height: 150px;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  align-items: center; 
  justify-content: center;
}

.post-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.post-content {
  justify-content: center;
  margin-bottom: 10px;
}

.skeleton {
  background-color: #d3d3d3;
  border-radius: 8px;
  display: flex;

}

.skeleton > div {
  margin-bottom: 10px;
}

The App.css file contains styles for the application's layout, postcards, and skeleton loaders. It defines:

Styles for the container of the post list, centering it both horizontally and vertically with a margin and setting its height to fill the viewport.
Styles for the grid layout of post cards, with columns automatically fitting the available space and a gap between items.
Styles for individual post cards, including padding, background color, border, border radius, and box shadow for a card-like appearance.
Styles for skeleton loaders, specifying their background color and border radius to match the design of the post cards.

Here is how the Skeleton loader looks while loading:

and here is how the cards look after loading:

Hope you will find this blog useful ✌🏽🎉

Conclusion:

we've unlocked the potential of skeleton loaders in React, transforming loading times into opportunities for user engagement and satisfaction. By implementing skeleton loaders with Axios and the JSONPlaceholder API, we've learned how to provide users with seamless loading experiences while fetching data asynchronously. Now equipped with this knowledge, you're ready to elevate the user experience of your React applications with confidence. Happy coding and may your apps shine brightly! ✨🚀

Happy Coding✌🏽✨!

For further exploration, feel free to check out the full code implementation on our GitHub repository: react_skeleton_loader. Happy coding and may your apps shine brightly! ✨🎉"

Understanding Redux: Simplified State Management in React

Kita — Tue, 09 Apr 2024 16:15:44 +0000

In React.js, managing state across components can become complex, especially as your application grows in size and complexity. Thankfully, Redux comes to the rescue as a predictable state container for JavaScript applications. In this blog post, we'll explore Redux using a simple example of managing user authentication and data.

Introduction to Redux:
Redux is a state management library for JavaScript applications, primarily used with React, although it can be used with any other JavaScript framework or library. It provides a centralized store to manage the state of your entire application, making it easier to maintain and reason about the state changes.

In Redux, several key components work together to manage the application state predictably and efficiently:

1. Actions:

Actions are plain JavaScript objects that represent something that has happened in the application. They typically have a type property indicating the type of action being performed and an optional payload property containing additional data associated with the action.
Actions are created by action creator functions, which are typically provided as utility functions to encapsulate the process of creating actions.

2. Reducers:

Reducers are pure functions responsible for determining how the application's state changes in response to actions.
Reducers take the current state and an action as arguments and return a new state based on the action type.
Reducers must be pure functions, meaning they don't mutate the original state but instead return a new state object.

3. Store:

The store is a centralized container that holds the application's state.
It is created using the createStore function from Redux, which takes the root reducer as an argument.
The store provides several methods for interacting with the state, such as getState() to retrieve the current state, dispatch(action) to dispatch actions to the reducer, and subscribe(listener) to subscribe to changes in the state.

4. Provider (for React applications):

The Provider component from the react-redux library is used to provide the Redux store to the entire React component tree.
It accepts a store prop which should be the Redux store.
By wrapping the root component of the application with Provider, all components in the component tree can access the Redux store and dispatch actions.

These are the fundamental components of Redux that work together to manage the application state predictably and efficiently. Actions are dispatched to the store, reducers update the state based on the actions, and the updated state is then made available to connected components via the store.

Example Scenario:

Let's consider a scenario where we have a React application with user authentication. After a successful login, we want to store the user's details (such as username, email, etc.) and share it across multiple components.

Here's a flow diagram illustrating how Redux works in the context of managing user authentication and data in a React application:

In this diagram:

App Component: The top-level component of the application. It renders the LoginComponent and UserInfoComponent.
LoginComponent: Allows users to log in by dispatching the loginUser action to the Redux store.
Redux Store: The centralized store that holds the entire state tree of the application. It contains the User Reducer responsible for managing user authentication state.
User Reducer: A function that takes the current state and an action as arguments and returns the new state. It handles actions like LOGIN_USER and LOGOUT_USER to update the user's state in the store.
UserInfoComponent: Displays user information retrieved from the Redux store. It connects to the Redux store to access the user's state and renders the UI accordingly.

Actions dispatched by components are handled by reducers, and the updated state is made available to connected components through the Redux store.

Lets see the Implementation 🌊🚀

Setting up Redux:
To use Redux in a React application, we need to install the necessary packages:

npm install redux react-redux

1. Define Actions:
Actions are payloads of information that send data from your application to the Redux store. Let's define actions for logging in and logging out:

// actions.js
export const LOGIN_USER = 'LOGIN_USER';
export const LOGOUT_USER = 'LOGOUT_USER';

export const loginUser = (userData) => ({
  type: LOGIN_USER,
  payload: userData,
});

export const logoutUser = () => ({
  type: LOGOUT_USER,
});

2. Define Reducers:

Reducers specify how the application's state changes in response to actions. Let's create reducers for handling user authentication:

// reducers.js
import { LOGIN_USER, LOGOUT_USER } from './actions';

const initialState = {
  user: null,
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOGIN_USER:
      return {
        ...state,
        user: action.payload,
      };
    case LOGOUT_USER:
      return {
        ...state,
        user: null,
      };
    default:
      return state;
  }
};

export default userReducer;

3. Create Store:

We need to create a Redux store that holds the complete state tree of our application.

// store.js
import { createStore } from 'redux';
import userReducer from './reducers';

const store = createStore(userReducer);

export default store;

4. Connect Redux with React:

Finally, we connect Redux with our React application using the Provider component from react-redux.

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import LoginComponent from './LoginComponent';
import UserInfoComponent from './UserInfoComponent';

const App = () => {
  return (
    <Provider store={store}>
      <div>
        <h1>User Authentication Example with Redux</h1>
        <LoginComponent />
        <UserInfoComponent />
        {/* Other components */}
      </div>
    </Provider>
  );
};

export default App;

And you are Done :>

In this example, we explored how to manage user authentication and data using Redux in a React application.

Here's a summary of the key points:

Actions: We defined actions such as LOGIN_USER and LOGOUT_USER to represent user login and logout events. These actions encapsulate the data associated with the events, such as user information.
Reducers: Reducers are pure functions responsible for handling actions and updating the application state accordingly. We created a user reducer that handles the LOGIN_USER and LOGOUT_USER actions to update the user authentication state.
Store: The Redux store acts as a centralized container that holds the application state. We created a Redux store using the createStore function from Redux, passing in the root reducer.
Provider: The Provider component from the react-redux library was used to provide access to the Redux store to all components in the React component tree. By wrapping the root component with Provider, we ensured that all components could access the Redux store and dispatch actions.
Components: We had two main components: LoginComponent for user login and UserInfoComponent for displaying user information. LoginComponent dispatches the LOGIN_USER action when the user logs in, and UserInfoComponent connects to the Redux store to access user data.

Conclusion:
And there you have it! With Redux, managing user authentication in your React application is as smooth as butter on toast. 🍞✨ By defining actions, reducers, and creating a Redux store, we've built a robust system that handles user login and logout with ease. So, next time you're building an application and need to manage complex state like user authentication, don't sweat it—just Redux it! 🚀🔑

Happy Coding!! 🚀✨

React Context API: Simplified Explanation with Example

Kita — Tue, 09 Apr 2024 15:35:18 +0000

In the world of React.js, managing state between elements can sometimes be a daunting task, especially when dealing with deep elements or passing multilevel objects. This is where the React Context API comes into play. The React Context API provides a way to share information about objects without declaring the objects at each level of the tree. In this article, we will examine the React Context API with easy understand examples to better understand its concepts.

Understanding the React Context API:

At its core, React Context API allows you to create a global state that can be accessed by any component within the component tree, regardless of its level.

It has three main features:

Context: This is where the global state is defined. It serves as a container for the data you want to share across components.

Provider: The Provider component allows you to pass the data (state) down to all the components in the tree. It acts as the source of truth for the data.

Consumer: The Consumer component enables components to consume the data (state) provided by the Provider within the component tree.

Example Scenario:

Let's consider a scenario where a user logs into an application and we want to pass their details (such as username, email, etc.) to various child components after the login process. We can achieve this efficiently using React Context API.

In this diagram:

App Component: The top-level component of the application. It wraps child components with the UserProvider.

LoginComponent: Allows users to log in by providing their credentials. On successful login, it updates the user's data using functions provided by UserContext.

UserInfoComponent: Displays user information. It consumes the UserContext to access user data and render the UI accordingly.

UserContext: Context containing user data and functions for managing user authentication (login and logout).

UserProvider: Wraps the entire component tree and provides the UserContext to all child components. It manages the state of the user data and authentication status.

This diagram illustrates the flow of data and functionality through the components using React Context API for managing user authentication and sharing user details. Lets see the Implementation:

1. Implementing User Context:

In our example, we start by creating a UserContext using React's createContext function. This context serves as a container to hold the user's data, such as username, email, etc. Initially, the context has a default value of null because the user is not logged in initially.

We then create a UserProvider component, which is responsible for managing the user's data state and providing it to other components in the application. Inside the UserProvider, we use the useState hook to manage the user's data. We have functions like loginUser and logoutUser to update the user's data. We wrap the children components with UserContext.Provider and pass down the user's data and functions.

// UserContext.js
import React, { createContext, useState } from 'react';

// Create a context with default value (null)
const UserContext = createContext(null);

// Create a provider component
export const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const loginUser = (userData) => {
    setUser(userData);
  };

  const logoutUser = () => {
    setUser(null);
  };

  return (
    <UserContext.Provider value={{ user, loginUser, logoutUser }}>
      {children}
    </UserContext.Provider>
  );
};

export default UserContext;

2. Login Component:
The LoginComponent is a simple form where users can input their credentials (username and password) and initiate the login process. When the user clicks the login button, the handleLogin function is triggered. In this function, we simulate a login process (e.g., fetching user data from a server) and retrieve the user's details. Once we have the user's details, we call the loginUser function provided by the UserContext to update the user's data.

// LoginComponent.js
import React, { useContext, useState } from 'react';
import UserContext from './UserContext';

const LoginComponent = () => {
  const { loginUser } = useContext(UserContext);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    // Simulate login process and retrieve user data
    const userData = {
      username: username,
      email: 'example@email.com', // Example email
      // Add more user details as needed
    };

    // Login user and pass user data to context
    loginUser(userData);
  };

  return (
    <div>
      <input type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} />
      <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default LoginComponent;

3. Child Component Consuming User Context:
The UserInfoComponent is an example of a child component that consumes the user context. It displays the user's information such as username and email. It uses the useContext hook to access the UserContext and retrieve the user's data. If the user is logged in (user is not null), it displays a welcome message along with the user's details. Otherwise, it prompts the user to log in.

// UserInfoComponent.js
import React, { useContext } from 'react';
import UserContext from './UserContext';

const UserInfoComponent = () => {
  const { user } = useContext(UserContext);

  return (
    <div>
      {user ? (
        <div>
          <h2>Welcome, {user.username}!</h2>
          <p>Email: {user.email}</p>
          {/* Display other user details as needed */}
        </div>
      ) : (
        <p>Please log in to view user info.</p>
      )}
    </div>
  );
};

export default UserInfoComponent;

4. Wrapping Components with Provider:
Finally, in the App component, we wrap our application's components with the UserProvider. This ensures that the UserContext is available to all components within the component tree, allowing them to access the user's data and authentication state.

// App.js
import React from 'react';
import { UserProvider } from './UserContext';
import LoginComponent from './LoginComponent';
import UserInfoComponent from './UserInfoComponent';

const App = () => {
  return (
    <UserProvider>
      <div>
        <h1>User Authentication Example</h1>
        <LoginComponent />
        <UserInfoComponent />
        {/* Other components consuming user context */}
      </div>
    </UserProvider>
  );
};

export default App;

By using React Context API, we can efficiently manage user authentication and access user data across various components in our application without the need for prop drilling. This approach leads to cleaner and more maintainable code, as components can focus on rendering UI based on the provided context rather than handling state management directly.

Conclusion:
React Context API is like the superhero of state management, swooping in to save the day by effortlessly passing data through your component tree without the hassle of prop drilling! With just a few lines of code, you can share global state like a boss, making your application more organized and your codebase cleaner. 🦸‍♂️💥 So, next time you find yourself drowning in a sea of props, remember: React Context API has got your back! 🌊🚀

Big O Notation: Understanding Time and Space Complexity

Kita — Sat, 03 Feb 2024 13:41:13 +0000

Comprehending algorithm efficiency is essential in the fields of computer science and algorithm analysis. When describing the time and space complexity of an algorithm’s performance, Big O Notation is a useful tool. We will examine the fundamentals of Big O Notation, consider its applicability to algorithm analysis, and offer useful Python examples in this blog.

What is Big O Notation?
Big O Notation is a mathematical notation used to describe the upper bound on the growth rate of an algorithm’s time and space complexity. It provides a high-level overview of how an algorithm’s performance scales with input size.

Time Complexity
Time complexity represents the amount of time an algorithm takes to complete, as a function of the input size. It is often expressed in terms of the “Big O” notation, denoted as O(f(n)), where f(n) is a mathematical function describing the growth rate.

Space Complexity
Space complexity measures the amount of memory space an algorithm uses in relation to the input size. Similar to time complexity, it is expressed using the Big O notation as O(f(n)).

Analysing how the resource requirements — time and space — increase with increasing input size is necessary to determine an algorithm’s time and space complexity. The method for determining both time and spatial complexity is as follows:

Calculating Time Complexity:

Identify Basic Operations:

Identify the fundamental operations performed in the algorithm. These are typically the operations that contribute the most to the overall running time.

Count Operations:

Count the number of basic operations performed as a function of the input size (usually denoted as ‘n’).

Express as a Function:

Express the count of operations as a mathematical function of ’n’. Ignore constants and lower-order terms, focusing on the dominant term.

Determine Big O Notation:

Identify the highest-order term in the function, which represents the algorithm’s time complexity. Express it using Big O notation.

Calculating Space Complexity:

1.Identify Memory Usage:

Identify the memory usage of the algorithm. This includes variables, data structures, and any additional space requirements.

Count Space Usage:

Count the number of memory units used (in terms of ’n’) during the execution of the algorithm.

Express as a Function:

Express the count of memory units as a mathematical function of ’n’. Similar to time complexity, ignore constants and lower-order terms.

Determine Big O Notation:

Identify the highest-order term in the function, representing the algorithm’s space complexity. Express it using Big O notation.

Example:
Consider the following Python function:

def example_algorithm(arr):
    total = 0
    for i in range(len(arr)):
        total += arr[i]
    return total

Time Complexity Calculation:

Basic Operation: Addition inside the loop.

Count Operations: The loop runs ’n’ times, where ’n’ is the length of the input array.

Express as a Function: f(n)=n (linear time complexity).
Big O Notation: O(n).

Space Complexity Calculation:

Memory Usage: Two integer variables (‘total’ and ‘i’).

Count Space Usage: Constant space usage, independent of the input size.

Express as a Function: f(n)=1 (constant space complexity).
Big O Notation: O(1).

Hope you will find it easy to understand ❤

.
.
.

Let’s explore some common time and space complexities with practical examples in Python:

Constant Time Complexity (O(1))

def constant_example(lst):
    return lst[0]

# Time complexity: O(1)
# Space complexity: O(1)

Linear Time Complexity (O(n))

def linear_example(lst):
    for item in lst:
        print(item)def quadratic_example(lst):
    for i in lst:
        for j in lst:
            print(i, j)

# Time complexity: O(n^2)
# Space complexity: O(1)

# Time complexity: O(n)
# Space complexity: O(1)

Quadratic Time Complexity (O(n²))

def quadratic_example(lst):
    for i in lst:
        for j in lst:
            print(i, j)

# Time complexity: O(n^2)
# Space complexity: O(1)

Logarithmic Time Complexity (O(log n))

def binary_search(arr, target):
    low, high = 0, len(arr) - 1
    while low <= high:
        mid = (low + high) // 2
        if arr[mid] == target:
            return mid
        elif arr[mid] < target:
            low = mid + 1
        else:
            high = mid - 1
    return -1

# Time complexity: O(log n)
# Space complexity: O(1)

Big O Cheat Sheet

Here’s a quick reference cheat sheet for common time complexities:

Tips for Analysing Complexity

Simplify Expressions: Focus on the dominant term and coefficients in Big O expressions.
Worst-case Scenario: Analyse the algorithm’s performance in the worst-case scenario.
Ignore Constants: Disregard constant factors; Big O describes the growth rate, not precise times or sizes.
Use Built-in Functions Wisely: Leverage built-in functions and libraries with known complexities.
To sum up, becoming proficient in Big O Notation is an important ability for any programmer. It helps you to choose and create algorithms with greater knowledge, which eventually results in software solutions that are more scalable and effective. Have fun with coding!

Conclusion:

To sum up, becoming proficient in Big O Notation is an important ability for any programmer. It helps you to choose and create algorithms with greater knowledge, which eventually results in software solutions that are more scalable and effective. Have fun with coding <3!

Forem: Kita

Learning Three.js in 2024 🚀

Why Learn Three.js in 2024? 🔥

Setting Up: Your First Three.js Scene

1. The Scene 🏙️

2. The Camera 📸

3. The Renderer 🎨

4. Creating a Simple 3D Object: A Cube 🟩

5. Animating the Cube 🌀

Putting It All Together:

Adding Objects to the Scene 🛠️

Adding Animation:

Taking It Up a Notch

Lights, Materials, and Shadows 🌟

Adding Lights 💡

Better Materials for Realism 🎨

Interactivity with OrbitControls 🕹️

Textures and Models: Bringing Realism to Life 🎨

Using the GLTFLoader:

Real-World Example: Floating Astronaut in Space 🌌🧑‍🚀

Key Aspects of the Code:

Astronaut Model:

Textures:

Lighting:

Post-Processing:

Controls:

Final Code for Floating Astronaut:

Wrapping Up 🌟

GitHub Repository 📂

Assets and Image Links 🌌

Mastering Axios: A Technical Guide to Building Your Food Delivery App🍔✨

1. Introduction to Axios

Why Choose Axios?

Installing Axios

2. Making HTTP Requests

Fetching Restaurant Data (GET Request)

Placing an Order (POST Request)

Updating Order Status (PUT Request)

3. Request Configuration: Customizing Your Requests

Global Configuration

Per-Request Configuration

4. Handling Responses: Processing Data Efficiently

Inspecting the Response Object

Transforming Response Data

5. Error Handling: Managing Failures Gracefully

Basic Error Handling

Retrying Requests

6. Interceptors: Advanced Request and Response Handling

Request Interceptors

Response Interceptors

7. Cancelling Requests: Handling User Navigation and Timeouts

Cancelling an Axios Request

8. Concurrent Requests: Efficiently Managing Multiple API Calls

Handling Multiple Requests

9. Axios and Authentication: Securing Your API Interactions

Handling Login Requests

Refreshing Tokens

10. Customizing Axios: Tailoring Axios to Fit Your Application

Creating a Custom Axios Instance

11. Using Axios with Async/Await: Simplifying Your Asynchronous Code

Fetching Data with Async/Await

12. Working with Cookies: Maintaining Session State

Sending Cookies with Requests

13. Uploading and Downloading Files: Handling Media with Axios

Uploading an Image

Downloading a File

14. Axios Adapters: Extending Axios for Custom Use Cases

Creating a Custom Adapter

15. Debugging and Logging: Keeping Your App Running Smoothly

Logging Requests and Responses

Handling Errors in Debug Mode

Conclusion

TypeScript Guide: Everything you need to know! Part -2

Table of Contents

Advanced Types

Union and Intersection Types

Literal Types

Type Guards

Utility Types

Partial, Pick, and Omit