Forem: Ram Goel

Multiple Environments in Frontend Applications

Ram Goel — Mon, 27 May 2024 13:49:47 +0000

In this blog, we'll explore how to set up and manage multiple environments in a frontend application using env-cmd.

What is `env-cmd`?

env-cmd is a utility that allows you to easily load environment variables from a file into your Node.js application. It supports loading multiple environment files, making it an excellent choice for managing different configurations for various environments.

Step-by-Step Guide to Setting Up Multiple Environments with `env-cmd`

1. Install `env-cmd`

First, you need to install env-cmd as a development dependency in your project:

npm install env-cmd --save-dev

2. Create Environment Files

Create separate environment files for each environment you want to manage. These files typically reside in the root of your project. For example, you can create the following files:

.env.development
.env.test
.env.production

Each file should contain the environment-specific variables:

.env.development

REACT_APP_API_URL=http://localhost:3000

.env.test

REACT_APP_API_URL=http://localhost:4000

.env.production

REACT_APP_API_URL=https://api.production.com

3. Configure Scripts in `package.json`

Modify the scripts section of your package.json to use env-cmd for running commands in different environments. This allows you to specify which environment file to load when starting your application or running build processes.

{
  "scripts": {
    "start:development": "env-cmd -f .env.development react-scripts start",
    "start:test": "env-cmd -f .env.test react-scripts start",
    "start:production": "env-cmd -f .env.production react-scripts start",
    "build:development": "env-cmd -f .env.development react-scripts build",
    "build:test": "env-cmd -f .env.test react-scripts build",
    "build:production": "env-cmd -f .env.production react-scripts build"
  }
}

4. Access Environment Variables in Your Code

In your application code, you can access these environment variables using process.env. For example, in a React component:

const apiUrl = process.env.REACT_APP_API_URL;

console.log(`API URL: ${apiUrl}`);

5. Running the Application

You can now start your application in the desired environment by running the corresponding script. For example, to start the application in the development environment:

npm run start:development

Or to build the application for production:

npm run build:production

Using env-cmd to manage multiple environments in your frontend application simplifies the process of handling different configurations. It allows you to maintain clean and organized environment variables, making your development, testing, and deployment processes more efficient. By following the steps outlined in this guide, you can set up and manage multiple environments effectively, ensuring your application performs consistently across all stages of development.

If you've liked this blog, connect with me on LinkedIn or X.

Building AI Content Ideas Generator with Next.js and GPT APIs

Ram Goel — Thu, 23 May 2024 09:26:21 +0000

In today's digital landscape, content creation has become a cornerstone for businesses and individuals alike. However, consistently generating fresh and engaging content ideas can be a challenging task. This is where AI-powered solutions come into play, offering innovative ways to spark creativity and streamline the content creation process. In this article, we'll explore how to build an AI content ideas generator using Next.js, a popular React framework, and GPT APIs, leveraging the power of natural language processing.

Understanding Next.js and GPT APIs

Before diving into the implementation, let's briefly discuss Next.js and GPT APIs.

Next.js: Next.js is a React framework that enables server-side rendering, static site generation, and routing for React applications. It provides a robust foundation for building performant and SEO-friendly web applications.

GPT APIs: GPT (Generative Pre-trained Transformer) APIs, such as OpenAI's GPT-3, are advanced natural language processing models capable of generating human-like text based on input prompts. These APIs have been trained on vast amounts of text data and can produce coherent and contextually relevant content across various domains.

Setting Up the Project

To begin, ensure you have Node.js and npm installed on your system. You can create a new Next.js project using the following commands:

npx create-next-app@latest my-ai-content-generator
cd my-ai-content-generator
npm install

Next, you'll need to sign up for access to a GPT API provider, such as OpenAI. Once you have obtained your API key, you can integrate it into your Next.js application.

Integrating GPT API

Create a new file called api/generateContent.js within your Next.js project directory. This file will contain the logic for interacting with the GPT API.

// api/generateContent.js
import OpenAI from 'openai';
const openai = new OpenAI('YOUR_API_KEY');
export default async function handler(req, res) {
 if (req.method === 'POST') {
 const { prompt } = req.body;
 try {
 const response = await openai.complete({
 engine: 'text-davinci-003', // Specify the GPT model
 prompt,
 maxTokens: 100, // Adjust as needed
 });
 res.status(200).json({ content: response.data.choices[0].text.trim() });
 } catch (error) {
 console.error('Error:', error);
 res.status(500).json({ error: 'An error occurred while generating content.' });
 }
 } else {
 res.status(405).json({ error: 'Method Not Allowed' });
 }
}

Creating the User Interface

Now, let's create a simple user interface for interacting with our content ideas generator. Modify the pages/index.js file as follows:

// pages/index.js
import { useState } from "react";
export default function Home() {
  const [inputText, setInputText] = useState("");
  const [generatedContent, setGeneratedContent] = useState("");
  const handleGenerateContent = async () => {
    const response = await fetch("/api/generateContent", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ prompt: inputText }),
    });
    const data = await response.json();
    setGeneratedContent(data.content);
  };
  return (
    <div>
      <h1>AI Content Ideas Generator</h1>
      <textarea
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        placeholder="Enter your content idea here…"
        rows={5}
        cols={50}
      />
      <button onClick={handleGenerateContent}>Generate Content</button>
      {generatedContent && (
        <div>
          <h2>Generated Content:</h2>
          <p>{generatedContent}</p>
        </div>
      )}
    </div>
  );
}

Conclusion

In this tutorial, we've explored how to build an AI content ideas generator using Next.js and GPT APIs. By leveraging the power of natural language processing, we can generate creative and contextually relevant content ideas with ease. This project serves as a testament to the transformative potential of AI in enhancing the content creation process. With further customization and refinement, you can tailor this solution to suit your specific requirements and unlock new avenues for content innovation.

Connect with me on Linkedin or X

How I got 2 Internships

Ram Goel — Mon, 31 Oct 2022 09:47:39 +0000

Which type of Internships?

I have done two internships in two startups in my 2nd Year of B.Tech, one is in ReactJS and the other one in React Native.

How I got the First One?

So my first internship was from linkedin, I got it because I have worked on a tech stack, which the company wants to implement on their project. It was of about 3 months and it was unpaid.

How I got Second One?

The Second one I got from college, it was a training of ReactJS of about 45 days for which we have to give about 1500 rupees, and after the training there will be an interview and those who qualify, will get an internship. I know react before I enrolled for that so I have enrolled so that I'll easily get an internship.
Same Happened, there was some assignments followed by a group interview. 3 of us get selected for the internship and I was one of them.

Some Tips for you

Make your Linkedin Profile Strong.
Do Solve Coding problems, but try to solve a real world problem.
Find out what work for you, what tech stack you love.
Explore if you're in first or second year.
Keep Trying, you'll find your way.

Bonus

Attendance matters but you are engineers, you know how to get "attendance without attending".

Me who writing this blog after bunking the class.

Thank you so much for Reading it. See you somewhere :)