DEV Community: Ubong Patrick

Why I Want to Be a Front-End Developer and How HNG Will Help Me Achieve My Goals

Ubong Patrick — Thu, 30 Jan 2025 06:31:54 +0000

My Motivation for Becoming a Frontend Developer

The world of technology has always fascinated me, especially how web applications come to life through intuitive and engaging interfaces. My journey into frontend development started with a deep interest in designing and building user-friendly experiences. Seeing how HTML, CSS, and JavaScript work together to create stunning and functional websites inspired me to dive deeper into frameworks like React.js and Next.js. The ability to bring ideas to life through code and design is what fuels my passion for frontend development.

Additionally, the demand for skilled frontend developers continues to rise. Companies are constantly looking for professionals who can create seamless and interactive user experiences. Learning frontend development not only aligns with my passion but also opens doors to exciting career opportunities.

How HNG Will Help Me Grow in the Field

The HNG Internship is an excellent opportunity to sharpen my skills, gain hands-on experience, and collaborate with talented developers. One of the main reasons I joined this internship is its structured learning approach, real-world projects, and mentorship from industry experts.

Through HNG, I will:

Work on real-life projects that simulate professional frontend development tasks.
Improve my skills in React.js, Next.js, and other relevant technologies.
Gain insights into best practices for writing clean and maintainable code.
Connect with a community of like-minded developers and mentors who can guide me in my career path.

By participating in this internship, I am confident that I will improve both my technical and soft skills, making me a better developer and team player.

My Goals for the Internship and How I Plan to Achieve Them

I have set clear goals for my time at HNG, and I plan to achieve them by staying consistent and committed to the learning process. Here are some of my key goals:

1. Master Frontend Technologies

I aim to enhance my knowledge of React.js, Next.js, and JavaScript. I will achieve this by actively participating in internship tasks and following industry best practices. For example, companies often Hire React.js Developers to build scalable web applications, and I want to develop the expertise required to meet such demands.

2. Build a Strong Portfolio

A solid portfolio is essential for career growth. I will contribute to open-source projects and document my work throughout the internship. Hosting my work on platforms like GitHub, Netlify, and Vercel will help showcase my skills.

3. Improve Collaboration and Problem-Solving Skills

Frontend development is not just about writing code—it involves working with teams, UI/UX designers, and backend developers. Through HNG, I will collaborate with other interns, participate in discussions, and learn effective problem-solving strategies.

4. Expand My Professional Network

Networking is crucial in the tech industry. HNG provides an excellent platform to connect with mentors, experienced developers, and fellow interns. I plan to take full advantage of this opportunity by engaging with the community and learning from their experiences.

Conclusion

Joining the HNG Internship is a significant step toward achieving my dream of becoming a skilled frontend developer. With its hands-on approach, mentorship, and real-world projects, I am confident that this experience will help me grow and refine my skills. By the end of the program, I aim to be proficient in building high-quality web applications and positioning myself for exciting career opportunities.

This journey is not just about learning to code; it’s about becoming a well-rounded developer ready to take on challenges and make an impact in the tech industry. I look forward to embracing every opportunity and making the most out of this internship.

Solving User Authorization Issues for Deposits in a Fintech Project

Ubong Patrick — Fri, 28 Jun 2024 15:27:24 +0000

The fintech world is constantly changing and securing financial transactions is of utmost importance. Recently, I faced a particularly challenging problem in a fintech project I was working on. The task was to ensure that only authorized users could make deposits into their accounts. Despite using JSON Web Tokens (JWT) for authentication and authorization, I ran into some significant roadblocks. Here's a personal account of how I tackled this issue and finally found a solution.

Imagine this: You’ve done a decent job building a fintech application using Node.js, Express, MongoDB, and JWT. You’re feeling pretty good about it, but then you realize that your user authorization isn't working as expected. Valid tokens aren’t being recognized, and worse, invalid tokens are slipping through the cracks. This isn’t just a bug; it’s a security nightmare waiting to happen. Frustration sets in as you try to figure out what went wrong.

These Are The Steps I Followed To Resolve The Issue
Step 1: Identifying the Root Cause
First, I needed to relax my mind and carefully identify why the JWT authorization was failing. This meant digging deep into the potential issues and these where the questions I asked myself:

Was the token generation process flawed?
Were tokens being stored and retrieved correctly?
Was the middleware for token verification functioning as intended?
Were the authorization checks in the deposit route properly configured?

Step 2: Correcting JWT Generation

Making sure to use a strong secret key and including necessary user information in the token payload was the first step toward regaining control.

Step 3: Storing and Retrieving Tokens
Next, I ensured that tokens were correctly sent to the client and stored securely. Tokens should typically be stored in HTTP-only cookies or local storage on the client side. Here's an example of how to set an HTTP-only cookie in Express:

Step 4: Implementing Token Verification Middleware
The next step was to verify tokens for protected routes. I implemented middleware to check if the token provided in the request header was valid. Here's how I did it:

Step 5: Implementing Authorization in the Deposit Route
With the token verification in place, I added the authorization check in the deposit route. This ensured that only authenticated users could make deposits. Here’s the implementation:

Step 6: Testing the Implementation
Finally, after implementing these steps, I tested the authorization flow rigorously:

Verified that valid tokens allowed access to the deposit route.
Ensured that invalid or expired tokens were correctly rejected.
Checked that unauthorized users couldn't make deposits.

When I saw everything working perfectly, it was a moment of great relief. The frustration and uncertainty I felt earlier were replaced with satisfaction and fulfilment. It was a reminder that persistence pays off and that every problem, no matter how daunting, has a solution if approached methodically.

Reflecting on this challenging yet rewarding experience, I eagerly anticipate the journey ahead with the HNG Internship. Known for pushing interns to their limits and fostering growth, this program offers invaluable real-world experience. My aim in joining HNG Internship is to refine my skills, engage in impactful projects, and learn from industry leaders.

Beyond coding, HNG promotes collaboration, innovation, and pushing boundaries. It's a chance to contribute to meaningful projects that drive change. Whether you're seeking talented developers or aiming to enhance your skills, explore HNG's hiring platform https://hng.tech/hire. Discover top talent ready to tackle complex challenges at https://hng.tech/internship, or Premium opportunities https://hng.tech/premium. Join us in shaping the future of tech!

Vue.js vs ReactJS: A Deep Dive into Two Frontend Titans

Ubong Patrick — Thu, 27 Jun 2024 13:24:44 +0000

Introduction
In the dynamic world of frontend development, picking the right framework is crucial. Today, we’ll dive into a comparison between Vue.js and ReactJS, two powerful JavaScript libraries. Understanding their differences and strengths will help you make the best choice for your next project.

Vue.js: The Progressive Framework
Vue.js, created by Evan You, is a progressive JavaScript framework that's become quite popular. Its main goal is to offer a flexible and adaptable way to build user interfaces. Vue.js is loved for its simplicity and ease of integration, making it a favorite among developers who appreciate a quick learning curve and smooth transitions.

Key Features of Vue.js:
Declarative Rendering: Vue.js lets developers declaratively render data to the DOM with simple template syntax.
Component-Based Architecture: Like other modern frameworks, Vue.js uses a component-based structure, promoting reusability and modularity.
Reactive Data Binding: Vue’s reactivity system ensures changes to data automatically reflect in the DOM, reducing manual DOM manipulation.
Single-File Components: Vue’s single-file components (.vue files) encapsulate HTML, CSS, and JavaScript, keeping things neat and organized.

ReactJS: The UI Library
ReactJS, developed by Facebook, is a JavaScript library designed for building user interfaces. It's known for its performance and flexibility, making it ideal for large-scale applications and complex UIs.

Key Features of ReactJS:
Virtual DOM: React’s virtual DOM efficiently updates the actual DOM by comparing the virtual DOM tree, minimizing performance issues.
JSX: React uses JSX, a syntax extension allowing you to write HTML within JavaScript, enhancing readability and maintainability.
Component-Based Architecture: Similar to Vue.js, React promotes reusable components, enabling developers to break down complex UIs into manageable parts.
Unidirectional Data Flow: React’s unidirectional data flow ensures predictable state management, simplifying debugging and enhancing stability.

Comparing Vue.js and ReactJS

Learning Curve:
Vue.js: Vue’s gentle learning curve is one of its best features. Its intuitive syntax and clear documentation make it accessible for both beginners and experienced developers.
ReactJS: React’s learning curve is steeper due to the need to understand JSX and the component lifecycle. However, once mastered, React offers powerful tools and patterns for building sophisticated applications.

Community and Ecosystem:
Vue.js: Vue has a growing, passionate community. Its ecosystem includes Vue Router for routing and Vuex for state management, providing a well-rounded development experience.
ReactJS: React boasts a massive community and extensive ecosystem. With numerous libraries and tools like Redux for state management and React Router for routing, React is ideal for large-scale projects.

Performance:
Vue.js: Vue’s performance is impressive, especially for smaller to medium-sized applications. Its reactivity system and efficient rendering ensure a smooth user experience.
ReactJS: React’s virtual DOM and fine-grained control over component updates give it a performance edge, particularly for complex and dynamic applications.

My HNG Journey with ReactJS
As an HNG Intern, I'm thrilled to dive deep into ReactJS. The HNG Internship program offers an incredible opportunity to learn and grow as a developer. With ReactJS, I look forward to building interactive and high-performance web applications that can handle real-world challenges. The hands-on experience and mentorship from industry experts at HNG are invaluable, and I'm excited to contribute to meaningful projects and collaborate with like-minded peers.

For those interested in learning more about the HNG Internship program, check out https://hng.tech/internship, https://hng.tech/hire and explore opportunities for hiring interns or joining the premium program at https://hng.tech/premium.

Conclusion
In the battle between Vue.js and ReactJS, there’s no definitive winner. Each has its strengths and is suited for different types of projects. Vue.js shines with its simplicity and ease of integration, making it ideal for smaller to medium-sized applications. ReactJS excels in performance and flexibility, perfect for large-scale and complex projects.

Choosing the right tool depends on your specific needs, team expertise, and project requirements. As for me, the journey with ReactJS at HNG is just beginning, and I can’t wait to see where it leads me!