Tackling CORS Issues: My Backend Development Challenge and HNG Internship Journey

Folajimi Fadare — Sun, 30 Jun 2024 09:24:33 +0000

Introduction

Backend development is a journey filled with challenges and triumphs. Recently, while developing a recipe finder application, I encountered a significant roadblock: Cross-Origin Resource Sharing (CORS) issues. This blog post will explain how I overcame this problem and share my aspirations for the HNG Internship.

The Problem

My recipe finder app needed to fetch data from the Spoonacular API, but the browser blocked these requests due to CORS policy restrictions. This issue prevented the app from displaying essential recipe data, rendering it ineffective.

The Solution

To resolve the CORS issue, I implemented a proxy middleware in my React application. Here’s how I did it:

Understanding CORS:
CORS is a security feature that prevents unauthorized requests to different domains. Understanding this was crucial to finding a solution.
Setting Up http-proxy-middleware: I installed http-proxy-middleware in my React

project:npm install http-proxy-middleware --save

I then created a setupProxy.js file in the src directory and configured the proxy:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'https://api.spoonacular.com',
            changeOrigin: true,
            pathRewrite: { '^/api': '' },
        })
    );
};

Updating API Calls: I updated my API calls to use the proxy:

import axios from 'axios';

const BASE_URL = '/api/recipes/';

export const fetchRecipes = async (ingredients) => {
    try {
        const response = await axios.get(`${BASE_URL}findByIngredients`, {
            params: {
                ingredients,
                apiKey: 'your_spoonacular_api_key',
            },
        });
        return response.data;
    } catch (error) {
        console.error('Error fetching recipes:', error);
        return [];
    }
};

Testing: After configuring the proxy and updating the API calls, I tested the application thoroughly. The CORS issue was resolved, and the app successfully fetched and displayed the recipe data.

My Journey with the HNG Internship

I am excited to start my journey with the HNG Internship. The program offers hands-on experience and mentorship in software development, aligning perfectly with my career goals. Through the internship, I aim to enhance my skills, build a robust portfolio, and connect with industry experts.The HNG Internship emphasizes real-world projects and practical experience, bridging the gap between theoretical knowledge and industry requirements. This structured environment will allow me to apply my knowledge, learn new technologies, and collaborate with like-minded individuals.

Why I Want to Do the HNG Internship

The HNG Internship provides an invaluable platform to develop technical skills and gain insights into the tech industry. The mentorship and feedback from experienced developers will be crucial in shaping my career. I am eager to tackle new challenges, contribute to meaningful projects, and grow as a developer.

Conclusion

Solving the CORS issue in my recipe finder application was a significant milestone in my backend development journey. It reinforced the importance of perseverance and problem-solving. As I continue this journey with the HNG Internship, I am motivated to tackle new challenges and make meaningful contributions to the tech community.For more information about the HNG Internship and the opportunities it offers, visit HNG Internship and HNG Hire.

Thank you for reading, and I look forward to sharing more of my experiences as I progress through the HNG Internship!

Web Components vs. Vanilla JavaScript: A Niche Comparison in Frontend Technologies

Folajimi Fadare — Sun, 30 Jun 2024 08:54:00 +0000

In the world of frontend development, countless tools help developers create dynamic web applications. While ReactJS is popular—especially here at HNG—it's worth exploring other frontend technologies. Today, we'll compare Web Components and Vanilla JavaScript.

Web Components: Building Custom Elements Natively

Overview

Web Components allow developers to create reusable and encapsulated custom HTML elements. These components are supported natively by modern browsers, eliminating the need for external libraries or frameworks.

Key Features

Custom Elements: Define and use custom HTML tags.

Shadow DOM: Encapsulate component structure and styles, preventing conflicts.

HTML Templates: Create reusable template elements that can be cloned and rendered as needed.

Advantages

Reusability: Components can be used across projects and integrated with various frameworks.
Encapsulation: Shadow DOM ensures styles and scripts are scoped to the component.
Standards-Based: Supported natively by modern browsers for broad compatibility.

Challenges

Browser Support: Older browsers may require polyfills.
Complexity: The API can be more complex compared to high-level frameworks.
Tooling: Less mature ecosystem compared to popular frameworks like React or Vue.

Vanilla JavaScript: Mastering the Core Language

Overview

Vanilla JavaScript refers to using plain JavaScript without additional libraries or frameworks. It offers complete control over the browser's capabilities.

Key Features

Direct DOM Manipulation: Work directly with the DOM.

No Dependencies: No external libraries, reducing overhead.

Flexibility: Complete control over your code for optimized solutions.

Advantages

Performance: Highly efficient without framework overhead.

Core Understanding: Deepens knowledge of JavaScript.

Flexibility: Implement exactly what you need without constraints.

Challenges

Complexity for Large Projects: Managing state and updates can be challenging.

Boilerplate Code: More code for common tasks.

Maintenance: Harder to maintain consistency without framework conventions.

ReactJS at HNG

At HNG, ReactJS is the framework of choice due to its component-based architecture, extensive ecosystem, and active community. During my time at HNG, I look forward to mastering React, building robust applications, and collaborating with fellow developers.The HNG Internship is a fantastic opportunity to grow as a developer. Learn more about the program here and explore hiring opportunities here.

Conclusion

Web Components and Vanilla JavaScript offer unique benefits. Web Components provide a standards-based approach for reusable elements, while Vanilla JavaScript offers unmatched flexibility and performance. Exploring these technologies broadens our understanding and enhances our development skills.Feel free to reach out with any questions. Happy coding!

DEV Community: Folajimi Fadare

Tackling CORS Issues: My Backend Development Challenge and HNG Internship Journey

Introduction

The Problem

The Solution

My Journey with the HNG Internship

Why I Want to Do the HNG Internship

Conclusion

Web Components vs. Vanilla JavaScript: A Niche Comparison in Frontend Technologies

Web Components: Building Custom Elements Natively

Advantages

Challenges

Vanilla JavaScript: Mastering the Core Language

ReactJS at HNG

Conclusion