DEV Community: Full-stack Software Engineer

Applying an Image on a 3D Model with React Three Drei’s Decal

Full-stack Software Engineer — Thu, 31 Oct 2024 14:15:00 +0000

Adding images or patterns to 3D models can bring your scene to life, especially if you’re building applications where customization, such as tattoo previews on mannequin models, is important. Here’s how you can achieve this using Decal from React Three Drei, a powerful set of helpers for React Three Fiber.

Prerequisites
Before we start, make sure you have a project set up with:

React Three Fiber for rendering 3D scenes with React
React Three Drei for additional 3D helpers like Decal
GLTF or OBJ model of a 3D object (e.g., mannequin or similar)

- Install Required Packages

If you haven’t yet, install @react-three/fiber, @react-three/drei, and three:

npm install @react-three/fiber @react-three/drei three

- Set Up the 3D Scene and Canvas

In your main App.js file, initialize the 3D scene. Here’s the basic setup for a Canvas component:

// App.js
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { Suspense } from 'react';
import { Loader } from '@react-three/drei';
import Experience from './components/Experience';

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Canvas>
        <Suspense fallback={null}>
          <Experience />
        </Suspense>
      </Canvas>
      <Loader />
    </div>
  );
}

export default App;

- Create the Canvas Component

The Canvas component will load the model and apply a decal to it. Let’s break it down into steps.

Load the Model
Use the useGLTF hook to load a 3D model. Make sure your model is placed in the public/models directory and is in .glb or .gltf format.
Apply the Decal Texture
Use the Decal component from @react-three/drei. This component will allow you to apply an image to the model.

- Building the Canvas Component

Now let’s dive into the Canvas component code.

// Experience.jsx
import React, { useRef } from 'react';
import { useGLTF, Decal, useTexture } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';

function Experience() {
  // Load the 3D model
  const { nodes } = useGLTF('/models/male_mannequin.glb');

  // Load the texture to be applied as a decal
  const decalTexture = useTexture('/textures/tattoo.png');

  // A ref for rotating the model (optional)
  const modelRef = useRef();

  // Rotate the model for some interaction
  useFrame(() => {
    modelRef.current.rotation.y += 0.01;
  });

  return (
    <group ref={modelRef} position={[0, -1.5, 0]}>
      {/* Mannequin model */}
      <mesh geometry={nodes.mannequin.geometry} castShadow receiveShadow>
        <meshStandardMaterial color="lightgrey" />

        {/* Decal component to apply the image */}
        <Decal 
          position={[0, 0.5, 0.6]}     // Adjust position based on your model's needs
          rotation={[Math.PI, 0, 0]}    // Adjust rotation for orientation
          scale={0.3}                   // Adjust size of the decal
          map={decalTexture}            // Pass the loaded texture here
        />
      </mesh>
    </group>
  );
}

export default Experience;

- Adjusting the Decal Properties

To make sure the decal appears exactly where you want it, experiment with these properties:

position: [x, y, z] coordinates to place the decal on the model. Adjust these based on the model’s geometry.
rotation: [x, y, z] values to orient the decal. Use radians, e.g., Math.PI for 180 degrees.
scale: Controls the size of the decal. Start small (e.g., 0.1 or 0.3) and increase as needed.

- Adding a Fallback or Error Boundary

If the model or texture is having trouble loading, wrap the Experience component in a fallback or error boundary.

<Suspense fallback={<LoadingScreen />}>
  <Experience />
</Suspense>

- Testing and Fine-Tuning

Run the app, and you should see the decal applied to the 3D model! Adjust the position, rotation, and scale to fit the decal exactly where you want it.

All set!

Configuring Vite for Development Over VPN 🚀

Full-stack Software Engineer — Mon, 07 Oct 2024 18:53:32 +0000

Vite is an amazing development tool with lightning-fast build times, hot-module reloading, and an intuitive configuration setup. However, working behind a VPN can sometimes cause issues when developing locally. Let’s walk through how to configure Vite to work seamlessly over a VPN.

Why the Issue with VPNs?

When you’re using a VPN, network requests and traffic are often tunneled through different gateways. This can affect how local development servers (like Vite) interact with your machine’s network interfaces. The most common issues are:

Host Binding: Vite defaults to localhost (127.0.0.1), which might not be accessible over the VPN.
Port Conflicts: Certain VPNs block or reserve specific ports.

Fixing Vite Configuration for VPNs

To solve these issues, you need to tweak the Vite configuration slightly. Luckily, Vite offers an easy way to modify how the dev server behaves.

1. Bind Vite to Your Local Network Interface

By default, Vite binds to localhost. You can configure Vite to bind to all network interfaces using the server.host option. This will allow devices connected to your local network (even over a VPN) to access your development server.

Edit your vite.config.js (or vite.config.ts if you're using TypeScript):

// vite.config.js
export default {
  server: {
    host: '0.0.0.0', // Bind to all available network interfaces
    port: 3000, // Default port, change if necessary
  },
};

2. Consider Changing the Port (if needed)

Some VPNs block certain ports or cause conflicts with ports you’re trying to use. If you notice connection issues, try using a different port. You can easily change the port in your vite.config.js:

// vite.config.js
export default {
  server: {
    host: '0.0.0.0',
    port: 8080, // Change to a different port, like 8080 or 5000
  },
};

3. Use HTTPS if Required

Some VPNs require secure communication over HTTPS. If that’s the case, you can enable HTTPS in Vite by generating SSL certificates or using self-signed ones.

// vite.config.js
import fs from 'fs';
import path from 'path';

export default {
  server: {
    host: '0.0.0.0',
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'path/to/your/ssl-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'path/to/your/ssl-cert.pem')),
    },
  },
};

4. Tweak Your Firewall or VPN Configuration

If you still face connectivity issues, ensure your VPN or firewall isn't blocking traffic on the port Vite uses. You might need to:

Allow traffic to the development server port (e.g., 3000) in your VPN’s settings.
Disable or adjust your firewall rules for local development.

Wrapping Up

Working with Vite over a VPN doesn’t have to be a hassle. By binding Vite to all network interfaces, tweaking the port, and potentially adding HTTPS support, you can keep your development environment smooth—even when working remotely behind a VPN.

Have any other tips or issues you encountered? Drop them in the comments below! 💬

Happy coding! 🎉

How to Send Messages via Telegram in a Next.js Application

Full-stack Software Engineer — Wed, 25 Sep 2024 20:30:43 +0000

Sending notifications or form submissions directly to your Telegram can be a very useful feature in a web application. For example, you might want to receive contact form submissions or system notifications instantly in your Telegram account or group. In this tutorial, we’ll show how to send messages directly to Telegram from a Next.js app using the Telegram Bot API.

What is the Telegram Bot API?

The Telegram Bot API allows developers to control bots and send messages via HTTP requests. A bot is an automated account on Telegram that can send and receive messages, and using it to notify you or your team of new submissions from your web app is a great use case.

Step 1: Setting Up Your Telegram Bot

To send messages via the Telegram Bot API, you first need to create a bot and get its Bot Token.

1.1 Create a Bot Using BotFather

Open Telegram and search for @botfather. BotFather is the official bot used to create and manage Telegram bots.
Start a chat with BotFather and type /start.
To create a new bot, type /newbot and follow the instructions:

Choose a name for your bot (e.g., MyNotificationBot).
Choose a username for your bot (must end with bot, like MyNotifBot_bot).

Once the bot is created, BotFather will give you a Bot Token. This token looks something like this:

123456789:ABCdefGhIJKlmNOPqrsTUVwxyz123456789

Save this token because you'll need it later.

1.2 Get Your Chat ID

The Chat ID is the ID of the user or group where the bot will send messages.

For a Personal Chat: Start a conversation with your bot in Telegram and send any message. Then, visit the following URL to get updates from the bot:

https://api.telegram.org/bot<YOUR_BOT_TOKEN>/getUpdates

Replace with your actual bot token. The JSON response will include a chat object that contains the id. This is your Chat ID.

For a Group Chat: Add your bot to a group, send a message, and use the same URL above to get the group Chat ID. Group Chat IDs typically start with a - (e.g., -987654321).

Step 2: Set Up a Next.js API Route

Now that you have your bot's token and chat ID, you can set up a Next.js API route to send messages via Telegram.

2.1 Create an API Route

In Next.js, you can create an API route to handle the message sending logic. In this case, we’ll send a POST request to the Telegram Bot API whenever someone submits a form on the website.

// pages/api/contact.js
import axios from 'axios';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email, message } = req.body;

    // Replace with your actual bot token and chat ID
    const botToken = process.env.TELEGRAM_BOT_TOKEN;
    const chatId = process.env.TELEGRAM_CHAT_ID;

    const telegramUrl = `https://api.telegram.org/bot${botToken}/sendMessage`;

    const text = `
      New message from ${name} \n
      Email: ${email} \n
      Message: ${message}
    `;

    try {
      // Send the message via the Telegram Bot API
      const response = await axios.post(telegramUrl, {
        chat_id: chatId,
        text: text,
      });

      if (response.data.ok) {
        return res.status(200).json({ success: true, message: 'Message sent successfully!' });
      } else {
        return res.status(500).json({ success: false, message: 'Failed to send message.' });
      }
    } catch (error) {
      console.error('Error sending message to Telegram:', error);
      return res.status(500).json({ success: false, message: 'Error sending message.' });
    }
  } else {
    return res.status(405).json({ message: 'Method not allowed' });
  }
}

Breakdown:

Telegram Bot Token and Chat ID: We use environment variables to store sensitive data like the bot token and chat ID.

POST Request to Telegram API: We send the message via the Telegram Bot API using the /sendMessage endpoint.

Axios: The axios library is used to make the HTTP request to Telegram's API.

2.2 Add Environment Variables

To avoid hardcoding sensitive data in your code, store your bot token and chat ID in environment variables. In your .env.local file, add:

TELEGRAM_BOT_TOKEN=your_bot_token
TELEGRAM_CHAT_ID=your_chat_id

Make sure to restart your development server after adding or updating the environment variables.

Step 3: Create a Contact Form

Now that the API route is ready, let's create a Contact Form component to allow users to submit messages.

"use client";
import { useState } from 'react';
import axios from 'axios';
import { toast } from 'react-toastify'; // Optional for notifications

function ContactForm() {
  const [userInput, setUserInput] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setUserInput({ ...userInput, [name]: value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await axios.post('/api/contact', userInput);

      if (response.status === 200) {
        toast.success('Message sent successfully!');
        setUserInput({ name: '', email: '', message: '' });
      } else {
        toast.error('Failed to send message.');
      }
    } catch (error) {
      toast.error('Error sending message.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Your Name:</label>
        <input
          type="text"
          name="name"
          value={userInput.name}
          onChange={handleChange}
          required
        />
      </div>
      <div>
        <label>Your Email:</label>
        <input
          type="email"
          name="email"
          value={userInput.email}
          onChange={handleChange}
          required
        />
      </div>
      <div>
        <label>Your Message:</label>
        <textarea
          name="message"
          value={userInput.message}
          onChange={handleChange}
          required
        />
      </div>
      <button type="submit">Send Message</button>
    </form>
  );
}

export default ContactForm;

Breakdown:

useState: Handles form state for the user’s name, email, and message.

handleSubmit: Sends a POST request to your /api/contact endpoint with the form data.

axios: We use axios to send the form data to the server-side API route.

Step 4: Deploy Your Application

Once your contact form and API route are set up, you can deploy your app. If you’re using Vercel or Netlify, the deployment process is seamless. Don't forget to add your environment variables in your production settings.

For Vercel:

Navigate to the Project Settings.
Add your environment variables (TELEGRAM_BOT_TOKEN, TELEGRAM_CHAT_ID) in the Environment Variables section.

Conclusion

Integrating the Telegram Bot API with Next.js is an excellent way to receive notifications and contact form submissions without the need for complicated backend infrastructure. By leveraging Telegram's Bot API, you can automate messages and stay updated on user interactions instantly.

With this setup, you’ll have your contact form submissions sent directly to your personal or group Telegram chat. 🚀

If you have any questions or feedback, feel free to drop a comment below. Happy coding!

How to Send Emails via EmailJS in a Next.js Application

Full-stack Software Engineer — Wed, 25 Sep 2024 20:10:07 +0000

When creating a web application, sending emails is often necessary for contact forms, notifications, and other purposes. Setting up your own SMTP server may seem overwhelming, but there are services like EmailJS that can handle email sending without the need for a backend. In this guide, I will demonstrate how to integrate EmailJS into your Next.js project, allowing you to easily send messages from your client-side application.

What is EmailJS?

EmailJS allows you to send emails directly from JavaScript without needing any server infrastructure. It connects to popular email services like Gmail, Outlook, and others, making it easier to send transactional emails directly from the frontend.

Let’s get started!

Step 1: Setting Up EmailJS

First, head over to EmailJS and sign up for an account. Once signed in:

Go to the Email Services section and select your email service (e.g., Gmail).
Set up a new Email Template. This template defines the structure of your email, and you can customize the fields to capture name, email, and message from your contact form.
Get your Service ID, Template ID, and User ID from the EmailJS dashboard, as you’ll need these in the code.

Step 2: Install EmailJS SDK

To use EmailJS in your project, you’ll need the EmailJS SDK. You can install it via npm or yarn:

npm install @emailjs/browser
# or
yarn add @emailjs/browser

Step 3: Create the Contact Form

Let’s create a simple contact form that will allow users to send messages directly to your email. In Next.js, we can set up the form as a component.

Here’s an example of a Contact Form component:

"use client";
import { useState } from "react";
import { toast } from "react-toastify"; // For notifications
import emailjs from '@emailjs/browser';

function ContactForm() {
  const [userInput, setUserInput] = useState({
    name: "",
    email: "",
    message: ""
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setUserInput({
      ...userInput,
      [name]: value
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const serviceID = process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID;
    const templateID = process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID;
    const userID = process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY;

    try {
      const emailParams = {
        name: userInput.name,
        email: userInput.email,
        message: userInput.message
      };

      const res = await emailjs.send(serviceID, templateID, emailParams, userID);

      if (res.status === 200) {
        toast.success("Message sent successfully!");
        setUserInput({
          name: "",
          email: "",
          message: ""
        });
      }
    } catch (error) {
      toast.error("Failed to send message. Please try again later.");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Your Name:</label>
        <input
          type="text"
          name="name"
          value={userInput.name}
          onChange={handleChange}
          required
        />
      </div>
      <div>
        <label>Your Email:</label>
        <input
          type="email"
          name="email"
          value={userInput.email}
          onChange={handleChange}
          required
        />
      </div>
      <div>
        <label>Your Message:</label>
        <textarea
          name="message"
          value={userInput.message}
          onChange={handleChange}
          required
        />
      </div>
      <button type="submit">Send Message</button>
    </form>
  );
}

export default ContactForm;

Breakdown:

useState: Manages form state (name, email, and message).
emailjs.send: Sends the email to your email service via EmailJS.
toast: Displays a notification on success or failure (optional, but you can install react-toastify to manage notifications).

Step 4: Environment Variables

To avoid hardcoding sensitive data (like service ID, template ID, and user ID), store them in environment variables. Create a .env.local file in the root of your project:

NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_user_id

Note: Be sure to restart your development server after adding or updating environment variables.

Step 5: Deploy Your App

Now that your contact form is integrated with EmailJS, it’s ready to be deployed. If you’re using Vercel, deploying a Next.js app is straightforward:

Push your code to GitHub or any Git provider.
Head over to the Vercel dashboard, connect your GitHub repository, and deploy your app.

Don’t forget to add the environment variables in your Vercel settings to ensure the email functionality works in production!

Conclusion

Integrating EmailJS with Next.js makes it incredibly easy to send emails directly from your frontend application without needing a backend server. It’s perfect for contact forms, feedback forms, or any other scenario where you need to send emails.

If you have any questions or run into issues, feel free to drop a comment below. Happy coding! 🚀