DEV Community: YGN

Discovering My Tech Stack

YGN — Wed, 07 Aug 2024 08:59:33 +0000

Introduction

Hi Everyone,

My name is Gagan. I am a student interested in technology. Back then, one year ago, I had many thoughts swirling around in my head, but I didn't know what to do next. I researched everything myself and learned the things that I wanted to do. This made me an actual learner, but this way takes a lot of time.

Okay, I will stop saying things like this from now on. The entire purpose of writing this blog today is to share my experience and knowledge with you—knowledge that nobody shares with you. Let's keep the other things aside and delve into the actual content.

Main Content

Suppose there's a person who wants to go into the tech field, especially as a Software Developer. At first, he has two options to take to reach what he wants:

DSA
DEVELOPMENT

If the person plans to go into a company like MAANG, then taking DSA is advantageous because companies like MAANG want problem solvers whom they can train and use for building their products.

The other option is DEVELOPMENT. Let's delve into development. When a person wants to go into development, the first thought is often to become a full-stack developer. They also need to decide what they want to develop—WEB, APP, DESKTOP, or GAME—each of which has a different learning path. Let's talk about web development first, and after that, we can deep dive into other frameworks.

If you choose WEB DEVELOPMENT, you want to start with HTML, CSS, and JS. After that, there is a twist: there are many full-stack development paths. These paths vary based on the programming language used:

JAVA FULL STACK
PYTHON FULL STACK
JAVASCRIPT FULL STACK

Choosing JAVA or PYTHON would be fine because there are fixed frameworks to learn. But if you want to take JAVASCRIPT FULL STACK, there are countless frameworks awaiting you. Choosing the best is somewhat tricky because each framework has its own advantages. The popular choices are ANGULAR, REACT, and VUE, but for beginners, REACT is a popular choice, and most companies accept REACT developers.

After learning REACT, the person realizes that this is not enough for a company to hire him, so he wants to upskill himself by shifting his codebase from JS to TS (Typescript). At this point, he has only completed the FRONTEND PART; there is a lot more in the backend. The popular choice is the MERN stack, which uses MongoDB for the database, EXPRESS JS for backend APIs, REACTJS for the frontend, and NODEJS for the runtime. Many people choose this stack because it has a good ecosystem, community support, and is widely used by companies.

But here’s the twist: many DEVELOPERS, including myself, say that the MERN STACK will die soon due to the release of many alternatives that work better than the MERN stack.

Now, I want to introduce my own stack. I call it the Next.js Edge Stack, which I chose myself without any support. I chose this stack because of its serverless capabilities and many performance benefits. This stack consists of:

Next.js - FRONTEND
HONOJS - BACKEND API
POSTGRES SQL (NEON) - DATABASE
DRIZZLE - ORM
UPSTASH REDIS - CACHING
CLOUDFLARE - API HOSTING
VERCEL - WEB HOSTING
BUN - RUNTIME ENVIRONMENT

You can check out my tech stack here: My Tech Stack. This is the most wonderful stack that took me a lot of time to find out. The major benefits of this stack are performance and serverless capabilities. I figured out that the person who learns this stack can easily shift to other developments like APP DEVELOPMENT via the T4 STACK, which consists of things similar to my stack. You can check out their tech stack here: T4 Tech Stack. You can use the EXPO router, which is very similar to the NEXTJS workflow and features, to create your desired APP.

But it’s not over yet—you can even develop desktop apps using Next.js. There is an amazing framework that I found; its name is TAURI. Check it out here: TAURI Guide.

Conclusion

Keep the fire burning, fellow coders! Your journey has just begun. 🚀

My Journey to Becoming a Next.js Developer (and Beyond)

YGN — Thu, 01 Aug 2024 07:32:10 +0000

Starting with Web Development: The JavaScript Jungle

Hey everyone, it's Gagan here! After a long break, I'm excited to share a personal story that might resonate with many of you aspiring developers. My journey started, as most web dev journeys do, with JavaScript. The sheer number of frameworks can be daunting! I, like many others, chose React as my starting point. I learned the core concepts and explored some useful libraries, feeling confident in my skills. However, research revealed the vast knowledge ocean waiting to be explored.

Diving Deeper: TypeScript, Next.js, and the Power of CSS Frameworks

Determined to dive deeper, I delved into TypeScript, solidifying my code with its type safety. This was just the beginning. The discovery of Next.js, a powerful framework built on React, was a game-changer. Its features impressed me, and I eagerly learned its nuances. Soon, I realized that plain CSS wasn't cutting it. Enter Tailwind CSS, a CSS framework that streamlined my styling process.

Full-Stack Adventures: Databases, APIs, and the Edge

Next.js boasts full-stack capabilities, meaning we can manage both frontend and backend aspects within the same codebase. Already familiar with SQL, I utilized it for my initial database interactions. But the quest for knowledge led me to explore Object-Relational Mappers (ORMs) as a better alternative to raw queries. Between Drizzle and Prisma, I opted for Drizzle's simplicity and SQL-like approach. For my database needs, I took advantage of a serverless database from NEON to avoid local setup hassles.

The desire to understand the backend world ignited my interest in REST APIs. After some research, I discovered building APIs using Express in Node.js, but Hono.js in the Edge Runtime also piqued my curiosity. The concept of Edge computing with Cloudflare deployment was fascinating. I even built a couple of basic projects in this environment, utilizing Upstash Redis for speed.

Personal Projects and the Internship Grind

But learning is only one piece of the puzzle. To showcase my skills, I embarked on personal projects. These projects became the foundation for my internship applications, landing me interviews for Next.js developer roles. However, the technical tasks for these internships proved overwhelming for someone just starting.

To meet the challenges, I had to learn new libraries on the fly. While I successfully completed projects like the "Image Generation Application" using OpenAI and Huggingface models, (link: Imaginify), the competition was fierce, and my submissions weren't quite enough.

The Reality Check: Saturation and the Need for a New Path

The internship experiences revealed a harsh truth: the web development landscape is becoming increasingly saturated. The competition is fierce, and the potential for growth and income doesn't align with my expectations. It was time to explore a different path.

After careful research, I realized that mastering Data Structures and Algorithms (DSA) is the key to unlocking a brighter future. DSA not only enhances problem-solving skills but also provides a deeper understanding of how systems work. It's a foundation that can lead to a more fulfilling and rewarding career.

Embracing the DSA Journey

I'm currently focused on diving deep into DSA. While the road ahead is challenging, I'm excited about the possibilities it holds. This journey has been a rollercoaster, filled with both triumphs and setbacks. I hope my experiences can offer valuable insights to those navigating the complex world of web development.

Thank you for reading!

Crafting the Digital Frontier: My Journey from HTML to REACT

YGN — Sat, 04 Nov 2023 16:30:27 +0000

My Introduction to the Web

I am a tech enthusiast exploring different things on my own. I first heard about web development on social media, and I noticed many people were passionate about it. I decided to venture into the world of web development and started by learning HTML and CSS. After mastering the basics of HTML and CSS, I took my first steps into the world of web development.

Learning HTML and CSS

Learning the fundamentals of HTML and CSS was my gateway into web development. These languages laid the foundation for understanding how websites are structured and styled. As I progressed, I began to appreciate the power of web development and became more interested in the field.

The Fascination with JavaScript

I soon discovered JavaScript, a versatile and essential language for web development. The dynamic nature of JavaScript captured my interest, and I was eager to explore its capabilities. I decided to delve deeper into JavaScript, from basic concepts to advanced topics.

My Introduction to JavaScript

My journey into JavaScript started with a desire to grasp both its fundamental and advanced concepts. I turned to YouTube for resources and found a comprehensive playlist called "Namaste Javascript" by the tutor Saini. Completing this playlist enhanced my understanding of JavaScript significantly.

You can watch the playlist here.

Learning from W3Schools

To solidify my knowledge, I explored the JavaScript documentation on W3Schools, a valuable resource for web developers. This resource helped me gain a more profound understanding of JavaScript's fundamentals.

You can access the W3Schools JavaScript documentation here.

Building on Prior Knowledge

My prior experience with C and C++ programming languages, where I learned functional and object-oriented programming, proved to be beneficial. These foundational skills made learning JavaScript more accessible and enjoyable.

Advanced JavaScript Concepts

As I progressed, I tackled advanced JavaScript concepts such as promises and callbacks. I found additional documentation and tutorials to master these topics, which expanded my skills even further.

Exploring React

I heard about the demand for React, a popular JavaScript framework. I decided to learn it but encountered challenges in the beginning. Eventually, I discovered Hitesh Choudhary's YouTube channel, which offered an excellent tutorial on React. This tutorial provided me with the knowledge and confidence to work with React effectively.

You can find Hitesh Choudhary's tutorials here.

Expanding Horizons

As I delved deeper into web development, I expanded my skill set by learning the following essential tools, libraries, and frameworks:

React Router: I mastered React Router to build single-page applications, enabling me to create dynamic and interactive web experiences. I learned React Router from the official documentation here.
Axios: I learned how to use Axios for efficient data fetching, making it easier to communicate with APIs and retrieve data for my applications. My initial exposure came from the npm documentation here.
Tanstack Query: I explored Tanstack Query for caching and data fetching, enhancing the performance and responsiveness of my web applications. I began my journey with Tanstack Query by watching a tutorial by Cosden Solutions here. To grasp the core concepts, I delved deeper into the topics of pagination, mutations, and infinite scrolling, as expertly explained by Cand Dev in their video series here.
Formik and Yup: To handle forms and ensure data validation, I acquired expertise in Formik and used Yup for form validation, creating seamless user interactions. I followed the official documentation for Formik here.
Framer Motion: I dived into Framer Motion to add captivating animations to my web projects, providing a visually appealing user experience. I explored this library as part of my web development journey.
Cypress: To ensure the quality and reliability of my applications, I gained proficiency in Cypress for comprehensive testing. My introduction to Cypress came from a tutorial by Cosden Solutions here, and I deepened my knowledge with a tutorial from FreeCodeCamp here.
Tailwind CSS: To further enhance my web development skills, I decided to explore a CSS framework. I chose to learn Tailwind CSS, and I found the official documentation to be an invaluable resource here.
Daisy UI: As I delved into the world of UI components for Tailwind CSS, I discovered Daisy UI, a fantastic resource for enhancing the user interface. You can explore Daisy UI here.

Conclusion

My journey into the world of web development has been a rewarding and enriching experience. From my early days with HTML and CSS to mastering advanced tools and libraries like React, Axios, Tanstack Query, Formik, Yup, Framer Motion, and Cypress, I've built a strong foundation. I've also broadened my horizons with Tailwind CSS and Daisy UI, giving me the power to create dynamic, user-friendly web applications.

This document is a testament to my learning journey, and I hope it inspires and guides others on their own path to web development excellence.