<![CDATA[Bill's Thoughts and Ramblings]]>https://blog.billpair.comRSS for NodeMon, 20 Apr 2026 12:34:18 GMT60<![CDATA[A Step-by-Step Guide to Building a Full-Stack TypeScript Weather App with Node.js, React, and Tailwind CSS]]>https://blog.billpair.com/a-step-by-step-guide-to-building-a-full-stack-typescript-weather-app-with-nodejs-react-and-tailwind-csshttps://blog.billpair.com/a-step-by-step-guide-to-building-a-full-stack-typescript-weather-app-with-nodejs-react-and-tailwind-cssSun, 09 Apr 2023 16:35:37 GMTIn this guide, I will walk you through building a full-stack TypeScript weather app using Node.js, React, and Tailwind CSS. This app will fetch weather data from a third-party API, display the current weather, and provide a forecast for the next five days.

Prerequisites:

Before we begin, make sure you have the following installed on your system:

  1. Node.js and npm (latest LTS version recommended)

  2. A code editor like Visual Studio Code

  3. A basic understanding of TypeScript, React, and Node.js

Step 1: Set up the project structure

First, let's create a new folder for our project and navigate into it:

mkdir weather-app
cd weather-app

Next, create a client folder for the React app and a server folder for the Node.js server:

mkdir client server

Step 2: Set up the Node.js server

Navigate to the server folder and initialize a new Node.js project with TypeScript:

cd server
npm init -y
npm install typescript ts-node @types/node --save-dev
npx tsc --init

Edit the tsconfig.json file to enable the "esModuleInterop" option:

{
  "compilerOptions": {
    "esModuleInterop": true,
    ...
  }
}

Install Express, Axios, and their respective types:

npm install express axios
npm install @types/express @types/axios --save-dev

Create a file named index.ts in the server folder and set up a basic Express server:

import express from 'express';

const app = express();
const PORT = process.env.PORT || 3001;

app.get('/', (req, res) => {
  res.send('Hello from the weather app server!');
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Add a start script to the server/package.json file:

"scripts": {
  "start": "ts-node index.ts"
}

Test the server by running npm start. You should see the message "Server is running on port 3001".

Step 3: Set up the React app

Navigate to the client folder and create a new React app using the create-react-app template:

cd ../client
npx create-react-app . --template typescript

Install the necessary dependencies:

npm install axios react-query tailwindcss@latest postcss@latest autoprefixer@latest

Initialize Tailwind CSS:

npx tailwindcss init

Add the following to your tailwind.config.js file:

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Configure PostCSS by creating a postcss.config.js file in the client folder:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Import the Tailwind CSS styles in the src/index.css file:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Step 4: Fetch and display weather data

Now, let's fetch the weather data from a third-party API, such as OpenWeatherMap. Sign up for a free account and get your API key.

In the server/index.ts file, add an endpoint to fetch weather data using Axios:

import axios from 'axios';

// Replace YOUR_API_KEY with your actual API key from OpenWeatherMap
const API_KEY = 'YOUR_API_KEY';

app.get('/weather/:city', async (req, res) => {
  const city = req.params.city;

  try {
    const response = await axios.get(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`
    );
    res.json(response.data);
  } catch (error) {
    res.status(500).send('Error fetching weather data');
  }
});

In the client/src folder, create a new file named useWeather.ts to fetch weather data using React Query:

import { useQuery } from 'react-query';
import axios from 'axios';

const fetchWeather = async (city: string) => {
  const response = await axios.get(`/weather/${city}`);
  return response.data;
};

export const useWeather = (city: string) => {
  return useQuery(['weather', city], () => fetchWeather(city));
};

Create a new WeatherCard.tsx component to display the weather data:

import React from 'react';

interface WeatherCardProps {
  weatherData: any;
}

const WeatherCard: React.FC<WeatherCardProps> = ({ weatherData }) => {
  return (
    <div className="bg-white p-6 rounded-md shadow-md">
      <h2 className="text-xl font-bold">
        {weatherData.name}, {weatherData.sys.country}
      </h2>
      <p className="text-gray-600">{weatherData.weather[0].description}</p>
      <p className="text-4xl font-bold">
        {Math.round(weatherData.main.temp)}°C
      </p>
    </div>
  );
};

export default WeatherCard;

Now, update the src/App.tsx file to fetch and display the weather data using the useWeather hook and WeatherCard component:

import React, { useState } from 'react';
import './App.css';
import WeatherCard from './WeatherCard';
import { useWeather } from './useWeather';

function App() {
  const [city, setCity] = useState('London');
  const { data, isLoading, isError } = useWeather(city);

  const handleSearch = () => {
    // Add your search logic here
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Weather App</h1>
        <input
          type="text"
          placeholder="Search by city"
          value={city}
          onChange={(e) => setCity(e.target.value)}
        />
        <button onClick={handleSearch}>Search</button>
        {isLoading && <p>Loading...</p>}
        {isError && <p>Error fetching weather data</p>}
        {data && <WeatherCard weatherData={data} />}
      </header>
    </div>
  );
}

export default App;

You now have a basic full-stack TypeScript weather app using Node.js, React, and Tailwind CSS. You can expand this app by adding a five-day forecast, error handling, and user input validation.

What would you add or change? Sign off in the comments!

]]><![CDATA[How I Went from Salaried to Freelancing Making 4x More My First Year]]>https://blog.billpair.com/how-i-went-from-salaried-to-freelancing-making-4x-more-my-first-yearhttps://blog.billpair.com/how-i-went-from-salaried-to-freelancing-making-4x-more-my-first-yearSat, 04 Sep 2021 14:28:44 GMTThat's right. It's not clickbait. And I'm gonna tell you exactly what I did.

Time for a little history lesson. I've been a developer in Greece for over a decade. Although I've been able to earn a comfortable living for local standards, I always felt a lot left on the table. Around the middle of 2019, I started scouting and occasionally interviewing through some remote work platforms. At that point, I realized around what my rate should be (roughly 2x what I was making), but I'd also have to cover my own expenses, such as taxes, social security, accredited accountants, etc.

With all that taken into account, I was still ahead but not by much. So I opted to stay at my then-current position since I was happy and was still learning a ton, especially React Native, which was ramping up to be one of the hottest technologies in the world.

Roughly a year later, after getting turned down for a raise, I aggressively started the process of getting incorporated (that's a requirement in the EU), as well as looking at job postings on both remote work platforms, as well as directly through LinkedIn and StackOverflow (hugely underrated work platform for devs, by the way).

What I found out after hitting the global market was sobering. Competition is fierce, and the level required is much higher than locally. However, I was determined to break into the worldwide market. I got rejected. A LOT. But what I figured out was that I was casting too broad a net.

Specificity over generalization

Once I started going after positions that focused on my strengths (Frontend, React and React Native), I saw much greater traction and success. Eventually, I landed on a job posting that lacked a lot of details but seemed intriguing enough. I got on a call with a recruiter from Braintrust and eventually, I was onboarded on the platform.

Braintrust is very talent-oriented, so I had to submit a proposal with my rate, along with some details about me and my background. A couple of days later I got on a call with an engineering manager, then a code pairing interview and then 2 cultural and team fit interviews. Overall, the process was very painless and lasted just 2 weeks. 3 hours after that final interview I got the confirmation mail that I was accepted and that changed everything.

I was able to quit my regular job, start working my own hours, and truly experience what it's like to work in a large, diverse team with great engineering challenges.

Hint: If you wanna learn which company that is, subscribe and it will be revealed in a future post

The journey wasn't easy but it was 100% worth it. I firmly believe that if you consider yourself an engineer of value, sooner or later going after contract and consulting work will be the only option. I've also found that it's probably the best way to avoid burnout. Engineers tend to want to have meaning in their work because the matter of survival is solved relatively early on. This way you get to pick the projects you work on and how frequently you want to work on something else. It's also great that you get to pick how much you earn and not expect the salary proposition from a recruiter or company HR that doesn't actually have your best interests at heart.

At Braintrust, you get to decide on your own rate after seeing the range that clients offer.

Disclaimer: I know I'm singing the praises of Braintrust but I am not being paid to do so. I am a proud member of that community and believe that it's a great avenue for freelancers looking to break into the global scene.

]]><![CDATA[What Makes an Engineer Attractive to High-End Clients?]]>https://blog.billpair.com/what-makes-an-engineer-attractive-to-high-end-clientshttps://blog.billpair.com/what-makes-an-engineer-attractive-to-high-end-clientsSun, 29 Aug 2021 13:20:51 GMTSo, you're a senior engineer. You feel that you offer a top-shelf skillset. But you're having a really hard time booking high-end clients or jobs. This guide's for you.

Focus on what you want

I've found that I achieved much greater success once I started focusing on roles I wanted and, conversely, the skillset required. So, when I stopped looking for "full-stack", "frontend", "javascript" and focused on React and React Native roles specifically, I found that I was getting significantly more replies and moving through the interview process with much greater success. If you want to have a high success rate, you need to learn to pick your battles.

First impressions

Iron out your own personal pitch and present yourself as a top-level professional from the get-go. This starts with your proposal letter or cover letter when submitting your CV. For example, this is what I'd write for a Senior React Native Engineer role:

With over a decade of professional experience in several key web technologies, such as Ruby on Rails, Django, HTML5, SASS, as well as 3 years of dedicated experience on React Native, with 4 apps published and being used by thousands of users worldwide, I believe I'd be a great fit for your team. I also bring experience as a team lead and have extensive remote work experience, having worked primarily remote for the past 3 years. I can also help architect high-level solutions with other teams, to achieve optimal results. If there's anything you'd like to go in-depth on, feel free to reach out to me.

Beyond that, when you get some face-to-face or Zoom time with the client, make sure you are in a well-lit environment, with a clean background and professional attire. I'm not necessarily talking about a button-down shirt, but a nice polo shirt goes a long way.

Remember that most interviews are about feel, more so than skill level. Be positive, talk clearly, and try to have an actual conversation with the interviewer. A great skill to develop is to eliminate filler phrases and sounds from your speech pattern, such as "umm", "eeeeh", "like" and so on. It's much better to take longer pauses between sentences than try to talk quickly and fumble over yourself.

Be prepared

Do some research on the company before your first interview. If you don't know what they do, a simple look at their website should fill in some gaps. Extra points if you can actually find out what their tech stack is, so you can have a bit more context about the role and how everything fits together. Don't go overboard and cyberstalk your interviewer though!

Turn the tables

Most interviewees take on a very passive role during the interview and just answer questions and when the interviewer on the other side inevitably asks "So, any questions?", they draw a blank. Another part of "being prepared" is trying to figure out where you might fit and how you can improve things after you come on board. Nobody hires a senior engineer to move buttons around with CSS. You are hired to solve real problems and even find problems and suggest high-level solutions. So ask how the teams work together. What would be required of you? How do they see you improving things? Are there some best practices that they may not be utilizing? Be memorable.

Relax

I know the pressure of getting a highly demanding job or contract may be overwhelming. But when you're looking at the global market, there are countless positions that you'd fit in. Relax and be your best self and don't let the pressure crush you and limit your potential. One way of achieving that is playing the numbers game. Before I landed my position at a prestigious California tech company from my home in Greece (more on that in a future post), I had applied to dozens, probably close to 50 positions. I hadn't utilized everything I'm outlining here, so my success rate was pretty low initially, but I didn't put all my eggs in one basket.

Eventually, I had 3 offers and I picked the one I'm at currently. Rejecting a client or company is never easy but it's better to have the options than have the one position be sink or swim.

For now, this should give you a leg up on most interviews and fellow engineers. Also, be sure to check out my other post and the most important skill for a senior engineer.

Until next time, peace.

]]><![CDATA[It's Okay to Suck]]>https://blog.billpair.com/its-okay-to-suckhttps://blog.billpair.com/its-okay-to-suckSun, 22 Aug 2021 17:30:21 GMTIt's honestly fine.

I have over 11 years of professional web development experience and a Computer Engineer degree and when I started a new position at a big company about 2 months ago, I sucked.

It took me 2 weeks to build a single screen in their React Native app. But you know what? I accepted that it's impossible for me to just slot in a completely new code base and team and just hit the ground running. So I asked questions and scheduled calls with the engineers that actually built all that stuff to better understand everything.

And I did my best to code up to their standards. And my PR review still needed a bunch of minor changes.

But nobody minded. In fact, my engineering manager commended my communication skills and proactive attitude.

I know that my experience is not gonna be the same for everyone but for a lot of people, they accept that new hires take a while to get going.

Don't know who needs to hear this but it's better to ask questions and risk looking like a fool than struggle with something for days that someone else could help resolve in minutes.

Almost everyone I know suffers from Impostor Syndrome, which is roughly the feeling that you are where you are because of trickery and you'll soon be found out and fired because everyone else seems to be doing better than you. I'm saying "almost everyone" because impostors don't suffer from it. However, you need to trust the people that hired and manage you and trust that they, in fact, know better. If you were honest in your interviews, you didn't trick anyone. You might take longer or shorter periods to learn than your peers. But you might have something they lack.

Perhaps, you are a master of communication.

It's okay to suck because everyone feels the same way. The trick is to try to suck a little bit less day by day.

]]><![CDATA[The Most Important Skill for a Senior Engineer]]>https://blog.billpair.com/the-most-important-skill-for-a-senior-engineerhttps://blog.billpair.com/the-most-important-skill-for-a-senior-engineerFri, 20 Aug 2021 08:27:42 GMTWe live in the era of constantly new and emerging technologies. It feels like every other week there's a new, hot Javascript framework that is definitely gonna be the next big thing.

Personally, I've gone from jQuery to vanilla JS to Angular to Vue.js and now to React and React Native, hopefully for good. I don't particularly enjoy hopping from one to the other and RN allows me to build powerful mobile apps and React, along with its new, favorite baby, Next.js, allows you to build amazing web apps with very little busy work.

(If it's not clear, I highly recommend getting into Next.js)

But after a few years, the tech stuff becomes more-or-less expected from a senior engineer. You expect them to be up to date with the latest, established tech or, at the very least, be able to learn it rather quickly. I've hopped onto projects and frameworks with little prior knowledge, but the fact that I have more than a decade of experience allowed me to get up to speed pretty fast.

So, beyond that, what is actually the best skill a senior engineer could have?

Communication

This might seem boring or cliche but it is 100% true. Ask any good manager and they'll confirm that. An engineer being able to articulate complex tasks to other engineers and non-engineers and break them down to easily digestible chunks is worth their weight in gold. In fact, it's been the one consistent praise I've gotten in my performance reviews. Being easy to work with and likeable will take you much farther than knowing all the ins and outs of Javascript, Python, React etc. And it all comes down to communication skills.

Now, communication, on its own, is hard to pin down as a concept and skill. So, I'd break it down like so:

  • Mastery of the language - If you are a non-native English speaker, improving that as much as possible will pay dividends
  • Nuance - Able to convey in text subtlety and emotion, so you don't appear cold and detached
  • Positive attitude - Do not transfer your frustration to the other person and always try to have a positive spin on things
  • Asynchronous communication - Able to transfer as much useful information in as few back-and-forths as possible. I will expand on that at a later post

Beyond communication, overall soft skills are what separate engineers from upper level management. So, if that's your career goal, I'd focus on those, along with your hard skills. I will go into that as well at a later date.

Until next time, peace!

]]>