DEV Community: Jeffrey Yu

5 Simple Steps to Start Contributing to Open Source

Jeffrey Yu — Sat, 06 Apr 2024 23:25:01 +0000

If you are a developer who wants to contribute to open source projects but doesn’t know where to start, congratulations! You’re not alone.

I was in the same situation. When I looked at interesting Github repos, I got intimidated by their complicated codebase, issues, and PRs that made no sense to me at first. I had no idea where to start contributing.

After getting stuck in the beginner dilemma for some time, I decided to spend 30 days breaking into open source. One month later, my result is 15 issues raised and 10 PRs merged to Rocket.Chat, the largest open-sourced communications platform with 38k+ Github stars. In this article, I will share 5 steps on how I did it, and I hope they will help you get started with open source.

1. Find the right project

The right open source project will make your contribution journey much easier. During your project hunt, look for the following things:

1. A tech stack you are familiar with

Learning a new technology could take months. Working with a familiar tech stack allows you to quickly understand the codebase and start making contributions. For me, I have been working with React and Node.js for the last two years, so Rocket.Chat is a good choice for me.

2. A project you have used

This is the best way of finding a project. By switching from a user to a contributor, you would get motivated to contribute and benefit users like yourself. You would have a quick start by being familiar with how the project works. Personally, I have used Rocket.Chat in my previous internship for internal team chat and I love the customization aspect, which sparked my interest in contribution.

However, be careful about the project's complexity. Many of the technologies we use are well-established and can be quite complex. Choosing a popular project like Python or React for your first contribution could be challenging. I would recommend starting with smaller projects, like NPM packages in the React ecosystem.

3. An active and responsive community

Check out the recent issues and PRs. Are they created frequently? Are maintainers / contributors responding to them in time? If so, the project has an active and responsive community. This suggests a healthy codebase that is actively maintained, and your future contributions will receive feedback and have an impact on the project.

4. Clear documentation and contribution guidelines

The documentation and contribution guidelines pave the way for you to onboard the project. The quality of these documents reflects if this community gives open arms to new contributors. If so, you are in the right place.

If you need some project ideas, check out this organization list by Google Summer of Code. These organizations are very welcoming to new contributors and propose new project ideas every year. You can search for projects with technology or topics you want to work with, e.g. JavaScript, AI.

2. Onboarding

Once you find the right project, it’s time for onboarding. Here is a list of TODOs:

1. Read documentation

Don’t go directly to the code! Trust me, reading the documentation might sound boring, but it will save you hours of time. Documentations usually include concept explanations and walk-through tutorials, which can help you quickly understand how the project works.

2. Read contribution guidelines

Make sure you follow the contribution guidelines, such as PR name format and review process. The guidelines could also include code style, testing requirements, language internationalization, etc. Following these guidelines ensures your contributions align with the community’s expectations and standards.

3. Set up the development environment

Follow the installation guidelines and set up your development environment. Try to use Docker to isolate the environment and update dependencies to the correct versions. Otherwise, you might end up saying, “It worked on my machine.”

3. Explore the codebase

After reading the documentation and understanding how the project works, you can get a taste of the code. When it comes to the larger codebases, I would not recommend jumping straight into the code and randomly opening 5x nested folders. This is like navigating through a maze with no direction.

Instead, pick a simple PR that you find understandable by its name and description. Trace through its implementation path (go from references to source definitions) to understand how this PR is implemented to achieve its goal from the inside out. Once you look at more PRs this way, you will understand how different parts of the codebase interact. You might even spot bugs or areas with room for improvement, and here come your chances of contribution.

4. Propose your first issue

If you check out other “beginner’s guides to open source”, they would direct you to work on issues labeled with “good first issue”. However, most of these issues are breadcrumbs left by the existing contributors and are usually flooded with beginners asking to be assigned.

Instead, I would recommend raising an issue by yourself. It can be a small bug or a potential feature enhancement that you found during codebase exploration, or while trying out the project as a user.

Don’t propose major changes - start small! The issue should be within your reach and you should have a decent plan on how to solve it. For example, my first issue is adding tooltips to the message toolbox - just a small UI enhancement. Once you have taken the first step, you will gradually take on bigger tasks.

If you are still stuck with coming up with an idea, look at recent issues / PRs and propose a follow-up or a similar fix / enhancement.

5. First PR!

Finally, it’s time to code. Follow your plan on how to solve the issue. When submitting your PR, follow the contribution guidelines and kindly ask a maintainer to review it. Once it goes through, you have successfully made your first PR! Congratulations 🎉

I hope this article helps you get started with open source. Let this be the beginning of a rewarding adventure. Happy coding!

How I Built a Simple HTTP Server from Scratch using C

Jeffrey Yu — Thu, 11 May 2023 15:08:00 +0000

You might wonder how web servers "serve" files, and how they deliver files that piece together a website that shows on your screen. Well, knowing how a web server is implemented is certainly a good way to "learn by building".

Although implementing a web server in C sounds very basic and detailed at a ground level, but it might help you better understand how HTTP works, and how servers actually interacts with clients. Let's get started!

How Socket Works

Before building the web server, you need to know how a "socket" works.

If a program (or process) running on a host is like a house, a socket is like a door that lets mails go in and out. When a person in the house receives or delivers a letter, he or she can be agnostic to how the mail is being delivered in the outside world.

Using the socket network interface, our web server can use a set of functions from C standard package <sys/socket.h> and let our server "talk to" clients over the internet. Those clients are also using sockets to talk to us, so socket is basically like a consesus on how to talk with each other over the internet.

Set up Server Socket

To kick things off, I started by creating and configuring a socket for the server. I configured a few things:

AF_INET: use IPv4 (vs IPv6)
SOCK_STREAM: use TCP (vs UDP)
INADDR_ANY: the server accepts connections from any network interface

bind() binds the socket to a port (I'm using 8080 here) means the socket will listen to any clients trying to connect to the port 8080. listen() takes the maximum number of pending connections (I set it to 10).

Now, my server is all set up and ready to accept incoming client connections.

Handle Client Connections

With the server up and running, the next step is to handle incoming client connections. I used an infinite loop to continuously listen for new clients.

When a client connects, the server accepts the connection and creates a new thread to handle the client's HTTP request. This way, the server can handle multiple clients concurrently.

I defined a function handle_client() that handles an incoming request from a client. I only implemented GET here since it shows a good case on how server "serve" files to clients.

handle_client() receives the request data, extracts the requested file name, and decodes the URL (e.g. convert %20 to space). Then, it identifies the file extension, builds an HTTP response containing the requested file, and sends it back to the client.

Build HTTP Response

Inside handle_client(), I defined another function build_http_response() that constructs an HTTP response, containing a header and the actual file.

The function starts by building an HTTP header with the appropriate MIME type based on the file extension (e.g. if requesting.jpg, MIME type is image/jpeg). If the file doesn't exist, the function creates a 404 Not Found response. Otherwise, it retrieves the file's size and appends the 200 OK header to the response buffer.

Next, it reads the file content and appends it to the response buffer. The response buffer returned back to handle_client() is sent back to the client .I set BUFFER_SIZE to 1MB, meaning the server can handle any HTTP response with size up to 1MB.

A Working HTTP Server!

To wrap up, I hope this tutorial helps you better understand how servers actually interacts with clients.

Here is the github repo for the full code.

🌟 Special Giveaway

CodeCrafters has a coding challenge that guides you to build a HTTP server step-by-step in any language. Join using my referral link to get 40% off 🚀

How I built a simple healthcare Dapp using Solidity & React

Jeffrey Yu — Tue, 23 Aug 2022 15:18:00 +0000

Last weekend I attended NextStep Hacks, a hackathon sponsored by Ethereum. I was interested in blockchain for a long time, but this is my first time developing a blockchain project.

In two days, my teammate Akilesh and I learned the basics and built a simple healthcare Dapp, which ended up winning the 3rd place. Here I'll share how I built it and hopefully it will help you jump start with blockchain development ⏫

Inspiration

For decades, medical records are under the ownership of hospitals. It often it takes days to request a hospital to transfer a record, and sometimes impossible to transfer across countries.

When I arrived at US for college, I tried to transfer records of Covid vaccination from China, but rejected by local hospitals. I had to take two more dozes of Pfizer and suffering days of side effects like fever 😣

That's why we built MedChain - a blockchain-based electrical medical records (EMR) decentralized application (Dapp).

How it works

MedChain is powered by IPFS, where patients’ medical records are stored on the distributed file system, not owned by any centralized entity.

A patient or a doctor can access the patient's records by interacting with a smart contract on the Ethereum blockchain. Here is a graph showing how the Dapp works:

The client first connects with MetaMask, and uses smart contract to mint a patient or doctor block, registered by the wallet address.

The client can upload a record file to IPFS, which address is linked to a patient block in ETH chain. The client can get all record addressed stored in a patient block from smart contract, and get a record file by its address from IPFS.

Setup

We chose Truffle, a powerful development tool for Ethereum, and React since it's our most familiar frontend framework.

We used Truffle React Box as a boilerplate for this project. It already has React context set up to connect with MetaMask and interact with Truffle.

To get a local blockchain network running on my computer, I set up Ganache and imported test accounts to MetaMask.

Write smart contract

For this project, we only need one Solidity smart contract called EHR. First I defined structures for medical record, patient, and doctor.

Then functions to register user. A doctor can register itself and register patients.

Finally, functions to add and get records of a patient. Only a doctor can add records, but both doctor and patient can read records.

To deploy the contract, run truffle deploy and EHR.sol will be deployed as EHR.json.

Connect React with smart contract

Skipping writing components, the important part of this React project is iteracting with the smart contract.

With ETH context provided in the boilterplate, it sets up Web3.js initialization for me. You can find the same logic as the following:

Since the constants above are stored in context, I can use them easily in a register button component.

The same thing applies to register patient with the patient account as input.

Upload & Download record from IPFS

Another important part is uploading records to IPFS and pushing address to the smart contract. I used ipfs-http-client to handle this easily in React.

First I set up IPFS client using my Infura project. Infura is an infrastructure tool to use IPFS API.

After a doctor drags a file in the dropzone, FileReader reads it as a buffer and upload it to IPFS client.

Then I call addRecord contract method with the patient address and the hash returned by IPFS client. Lastly, call getRecords to refresh records.

Then a patient or doctor can download the record in one click.

Final product

You can check out our repo and our project on DevPost.

We hope our project help push revolutionizing the centralized ownership of medical records and let people own their health. Go blockchain 🚀

5 Good practices to scale your React projects easily

Jeffrey Yu — Sun, 07 Aug 2022 07:29:00 +0000

For most React developers, it's easy to just get our hands on writting new lines of code. However, we sometimes missed keeping them organized and planned for future use as the project scales.

Having a plan for scaling can help you:

Reuse and reduce development time
Organize project and prevent project reconstructions
Show you are good developer by taking consideration of the project and other devs :)

Here are 5 lessons I learned from scaling my React projects. They help me to plan ahead for my projects while writting pretty React code.

1. Always start with state management

When a project was small, I jumped right into writing state for individual components. However, it got messy when I wanted to sync up states for several components and tried to to use props and callback functions.

Always start with a state mangement tool, whether it's Redux, Recoil, or context and hooks. Even if a project is small, you'll need Authenticaiton and Alert to be managed globally.

Besides, state management seperates logic from components. When handling backend calls, it serves like a controller/service layer between UI and database. State and actions in this layer can be reused across many components.

A tip here is always track waiting status for backend calls for conditional component rendering. It saves you from unnecessary errors and a nice loading spinner shown to the user.

2. Make your own component library

I found that even when I'm using a UI library like Material UI, I still need customization on props, logics, and styles for my project.

Create a custom components library allowed me to reuse them across pages and even exported to other projects.

Include styles, tests, types, and Storybook templates (recommended) for each custom component. A good practice is to organize the library in atomic design like the following.

custom-components
├── atoms
│   └── CustomButton
│       ├── CustomButton.tsx
│       ├── CustomButton.types.tsx
│       ├── CustomButton.styles.tsx  
│       ├── CustomButton.test.tsx
│       ├── CustomButton.stories.tsx
│       └── index.tsx
├── molecules
│   └── CustomDialog
└── organizations
    └── CustomTable

3. Define types

As we know, JavaScript is dynamic-typed language. When a project scales, props passed across components and functions increases.

If there is no type checking, many unnecessary errors involving edge cases like null and undefined could happen. Define types also increase readibility of code.

It's better to start with or migrate to TypeScript if possible, but define PropTypes also works.

4. Use global AND specific styles

Styling is always a big headache for frontend devs. We have to handle both unified styles and individual styles.

If a project has UI design provided like Figma, try to define styles in global theme first. It's better to define them in the theme provider of a UI library to easily make customization on defined palettes. The theme provider also handles light & dark themes for you.

For styles of individual components, try to include them in custom components library mentioned above. If they are specific to one component, include them in a styles file under that component.

The rule of thumb is to include styles at the top level needed for reuse.

5. Sync pages folder with routes

Previously, I made pages and components folders quite a mess, keeping two in only either one folder.

Then I learned that it's better to organize the pages folder in sync with the routes. This increases readability for other devs to understand the website structure, like the following.

pages
├── events
│   ├── index.tsx
│   └── event
│       ├── index.tsx
└── user
    └── index.tsx

events correspondes to /events, and event correspondes to /events/:id.

I'm having the same structure for the components folder to correspond components to a page where they are used. But you can also have a /components folder under each page, and make the components folder for other use.

These are my good practices on planning a React project for scale, and everyone has their own way. The two rules of thumb to conclude these good practices are:

1. Seperate & Reuse
2. Organize for readability

Happy coding! 🚀

Never forget your Leetcode solutions using Anki cards 🌟

Jeffrey Yu — Sat, 09 Apr 2022 10:15:44 +0000

I believe many of you like me, fall into the trap that after I solved a leetcode problem, soon forgets it and never recall it during the interview :(

Then I thought, why can't I have a tool that keeps track of my forgetting curve after I solved a problem? If you don't know about forgetting curve, it's basically how much percentage I still remember a solution as days goes by. If I review the solution after a certain period of days, I get a remembered-percentage boost.

And I found Anki, which just suits for this purpose. Here's how you can set up Anki cards to never forget your Leetcode solutions again.

Download

Click here to download Anki. It supports mac, windows, linux, ios, andriod, and web browsers. You can sync Anki cards across all platforms. (And it's open sourced!)

Create Anki cards

First, click Create Deck and input your new Deck name.

Click Add on the top navbar and a new card. Paste your leetcode problem, link, and description into Front. Then paste your solution into Back, which you will see after you flip the card, just like Quizlet.

Start practicing with your Anki cards

Click Learn besides your deck and see the cards to study or review for today. Read the problem description and have some time to think about what the solution might be.

If you want to code out your solution, click the leetcode link and write it down. It's always a good practice to recode a solution in order to remember it clearly.

You can set a timer on the bottom right to track how long you've spent with this problem. Once you're done, click Show Answer to see the correct solution.

Compare your thought-out solution or wrote solution with the answer. Select how difficult you think the solving process is, and Anki will prompts the card back for you to review within a certain days, based on the selected difficulty.

Here's how I usually examine my solving process:

Easy: Had a clear idea what the solution is like after reading the problem. The thought-out solution is closed to the answer.
Good: Took a while to think or code the solution. Received a solution similar to the answer, with a few things neglected.
Hard: Can't figure out a working solution until seeing the answer, or my solution is not the best way to solve the problem like the answer does.

The review period will increase after you select easy or good for a second time, third time, ... until you finally master the problem. You can change the options for a deck to customize your practice speed.

How many cards to learn or review in a day
How many days to review the cards after selecting easy, good, or hard.

Hope Anki cards would be helpful for you! Happy leetcoding :)

How I built my portfolio as a chatbot using Next.js

Jeffrey Yu — Thu, 31 Mar 2022 10:08:09 +0000

Many developer portfolios out there are boring, so are my previous ones. I think a new portfolio as a chat bot would be interesting, as it creates interactive user experience and adds more fun by talking to "me". The website is live and I'd to share how I built it using Next.js.

react-chatbot-kit

I used react-chatbot-kit to implement chatbot messages and follow-up options. I followed this tutorial to set it up.

In react-chatbot-kit, config configures settings like initial messages and widgets (custom components that come with a message). ActionProvider creates bot messages with widgets. MessageParser parses user messages and calls certain actions in ActionProvider.

// index.js
import Chatbot from 'react-chatbot-kit';
...
<Chatbot
  config={config}
  actionProvider={ActionProvider}
  messageParser={MessageParser}
/>

Greetings & Jokes

First, the chatbot greets and asks how's the user doing today. The good mood option leads to my portfolio sections and the bad mood one leads to a joke.

// config.js

const getMoodOptions = (actionProvider) => {
  return [
    {
      text: 'Doing great! Tell me about yourself',
      handler: () => actionProvider.handleGoodMood(),
      id: 1,
    },
    {
      text: 'Having a bad day...',
      handler: () => actionProvider.handleBadMood(),
      id: 2,
    },
  ];
};

const config = {
  initialMessages: [
    createChatBotMessage(
      "Hi, I'm Jeffrey. Nice to meet you! I How are you doing today?",
      { widget: 'moodOptions' }
    ),
  ],
widgets: [
    {
      widgetName: 'moodOptions',
      widgetFunc: ({ actionProvider }) => (
        <Options actionProvider={actionProvider} getOptions={getMoodOptions} />
      ),
    },
  ]
}

// ActionProvider.js

class ActionProvider {
  constructor(createChatBotMessage, setStateFunc) {
    this.createChatBotMessage = createChatBotMessage;
    this.setState = setStateFunc;
  }

  handleGoodMood() {
    const message = this.createChatBotMessage(intro, {
      widget: 'personalOptions',
    });
    this.updateChatbotState(message);
  }

  async handleBadMood() {
    const jokeData = await (
      await fetch('https://v2.jokeapi.dev/joke/Any?type=single')
    ).json();
    const message = this.createChatBotMessage(
      `Let me tell you a joke: ${jokeData.joke}`,
      {
        widget: 'jokeOptions',
      }
    );
    this.updateChatbotState(message);
  }
}

Portfolio sections

After the user is entertained by jokes, he or she can choose to see my experience, projects, skills, or blogs. I built widget cards for each section and add them to config and ActionProvider like the previous greeting.

I add the section cards in the sidebar so that the user can browse my portfolio even without using the chatbot. I'm also adding AI response to user message add more fun to the website :)

You can check out the code for this website here.

How to setup React global alert popup in 10mins

Jeffrey Yu — Sun, 20 Mar 2022 07:09:42 +0000

It's annoying to add alert popup in every component after an action. A global alert popup not only make your life easier, but also improves user experience. A nice alert popup give users a clear feedback as a result of their actions and any server reponse.

Here's how you can set up global alert popup in React in 10 minutes using context hook.

Create AlertContext

Our alert context has two states: text and type. text is the displayed message on the alert, and type is the "severity" of the alert (success / info / warning / error).

The context has one action: setAlert(). It takes in text and type as parameters and set them to the state. After a set time period, the state will be set back to empty.

// AuthContext.js
import { createContext, useState } from 'react';

const ALERT_TIME = 5000;
const initialState = {
  text: '',
  type: '',
};

const AlertContext = createContext({
  ...initialState,
  setAlert: () => {},
});

export const AlertProvider = ({ children }) => {
  const [text, setText] = useState('');
  const [type, setType] = useState('');

  const setAlert = (text, type) => {
    setText(text);
    setType(type);

    setTimeout(() => {
      setText('');
      setType('');
    }, ALERT_TIME);
  };

  return (
    <AlertContext.Provider
      value={{
        text,
        type,
        setAlert,
      }}
    >
      {children}
    </AlertContext.Provider>
  );
};

export default AlertContext;

Don't forget to wrap the context provider around your app components.

// index.js
ReactDOM.render(
  <AlertProvider>
   <App />
  </AlertProvider>,
  document.getElementById('root')
);

Custom useAlert hook

Create a custom useAlert hook to access state and actions in AlertContext.

// useAlert.js
import { useContext } from 'react';
import AlertContext from '../contexts/AlertContext';

const useAlert = () => useContext(AlertContext);

export default useAlert;

Popup Component

Next, we create a popup component that displays the alert with text and type from useAlert. The popup will appear once setAlert passes text and type to AlertContext, and will disappear after the set time period.

I use Alert from MaterialUI to make it look nicer.

// AlertPopup.js
import { Alert } from '@mui/material';
import useAlert from '../../hooks/useAlert';

const AlertPopup = () => {
  const { text, type } = useAlert();

  if (text && type) {
    return (
      <Alert
        severity={type}
        sx={{
          position: 'absolute',
          zIndex: 10,
        }}
      >
        {text}
      </Alert>
    );
  } else {
    return <></>;
  }
};

export default AlertPopup;

Put AlertPopup on top of your app components so it's visible anywhere.

//route.js
const routes = [
  {
    path: '/',
    element: (
      <AlertPopup />
      <Dashboard />
    ),
    children: [ ... ]
  }
]

Use it in your components

Call setAlert on action feedbacks in your components to show the alert popup.

const { setAlert } = useAlert();
...
<Button onClick={setAlert('Edit success!', 'success')}>
  Edit
</Button>

It's always nice to use alert to show server response to the user.

try {
  const res = await axios.post('api/user/login');
  setAlert('Login success!', 'success');
} catch(err) {
  setAlert(err.message, 'error');
}

Set up JWT authentication in MERN from scratch

Jeffrey Yu — Thu, 17 Mar 2022 23:06:25 +0000

Nearly every web project needs user authentication. In this article I will share how I implement auth flow in my MERN stack projects. This implementation can be applied in every project that registers users with email and password.

How it works

First of all, JSON Web Token is a popular library that provides functions to create a unique, encrypted token for a user's current login status, and verify if a token is invalid and not expired.

The app's authentication flow is demonstrated below:

When a user clicks register or login, the correponding Express route returns a jwt token. The token gets stored in the browser localStorage so that a user can come back three days later without login again.

Every protected route in Express (that needs user's login status) has an auth middleware. React puts the localStorage token in the x-auth-token header when calling these protected routes.

In the middleware, jwt verifies if the token in the header is valid and hasn't expired. If so, it processes to the route; if not, Express returns 403 and React prompts the user back to the login page.

Express register route

The register route receives email and password in the request body. If the user with the email doesn't exist, it creates a new user with the password hashed by bcrypt, and stores it into the Mongoose User model. Finally it returns a signed jwt token.

const express = require('express');
const router = express.Router();
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const User = require('../models/User');

router.post('/user', async (req, res) => {
    const { email, password } = req.body;

    try {
      // check if the user already exists
      user = await User.findOne({ email });
      if (user) {
        return res.status(400).json({ msg: 'Email already exists' });
      }

      // create new user
      user = new User({
        email,
        password,
      });

      // hash user password
      const salt = await bcrypt.genSalt(10);
      user.password = await bcrypt.hash(password, salt);
      await user.save();

      // return jwt
      const payload = {
        user: {
          id: user.id,
        },
      };

      jwt.sign(
        payload,
        process.env.JWT_SECRET,
        { expiresIn: '7 days' },
        (err, token) => {
          if (err) throw err;
          res.json({ token });
        }
      );
    } catch (err) {
      console.error(err.message);
      res.status(500).send('Server error');
    }
  }
);

Express login route

The login route also receives email and password. If the user with the email exists, it compares the hash password and returns a signed token if succeeds.

router.post('/user/login', async (req, res) => {
    const { email, password } = req.body;

    try {
      // check if the user exists
      let user = await User.findOne({ email });
      if (!user) {
        return res.status(400).json({ msg: 'Email or password incorrect' });
      }

      // check is the encrypted password matches
      const isMatch = await bcrypt.compare(password, user.password);
      if (!isMatch) {
        return res.status(400).json({ msg: 'Email or password incorrect' });
      }

      // return jwt
      const payload = {
        user: {
          id: user.id,
        },
      };

      jwt.sign(
        payload,
        process.env.JWT_SECRET,
        { expiresIn: '30 days' },
        (err, token) => {
          if (err) throw err;
          res.json({ token });
        }
      );
    } catch (err) {
      console.error(err.message);
      res.status(500).send('Server error');
    }
  }
);

Express get user info route

Since login and register only returns a token, this route returns the user info given the token.

router.get('/user/info', auth, async (req, res) => {
  try {
    const user = await UserModel.findById(req.user.id).select('-password');
    res.status(200).json({ user });
  } catch (error) {
    res.status(500).json(error);
  }
};

Express auth middleware

The auth middleware verifies the token exists and is valid before preceeds to a protected route.

const jwt = require('jsonwebtoken');

module.exports = function (req, res, next) {
  // Get token from header
  const token = req.header('x-auth-token');

  // Check if no token
  if (!token) {
    return res.status(401).json({ msg: 'No token, authorization denied' });
  }

  // Verify token
  try {
    jwt.verify(token, process.env.JWT_SECRET, (error, decoded) => {
      if (error) {
        return res.status(401).json({ msg: 'Token is not valid' });
      } else {
        req.user = decoded.user;
        next();
      }
    });
  } catch (err) {
    console.error('something wrong with auth middleware');
    res.status(500).json({ msg: 'Server Error' });
  }
};

Then in every protected route, add the auth middleware like this:

const auth = require('../middleware/auth');
router.post('/post', auth, async (req, res) => { ... }

React auth context

I use useReducer to store auth status and user info, and use useContext to provide the reducer state and actions including login, register, and logout.

The login and register actions store the token returned from axios requests in localStorage and calls the user info route with the token.

On reducer state init or change, the user info route will be called to make sure the user info is in the reducer and the axios auth header is set if the user is logined.

import { createContext, useEffect, useReducer } from 'react';
import axios from 'axios';

const initialState = {
  isAuthenticated: false,
  user: null,
};

const authReducer = (state, { type, payload }) => {
  switch (type) {
    case 'LOGIN':
      return {
        ...state,
        isAuthenticated: true,
        user: payload.user,
      };
    case 'LOGOUT':
      return {
        ...state,
        isAuthenticated: false,
        user: null,
      };
  }
};

const AuthContext = createContext({
  ...initialState,
  logIn: () => Promise.resolve(),
  register: () => Promise.resolve(),
  logOut: () => Promise.resolve(),
});

export const AuthProvider = ({ children }) => {
  const [state, dispatch] = useReducer(authReducer, initialState);

  const getUserInfo = async () => {
    const token = localStorage.getItem('token');

    if (token) {
      try {
        const res = await axios.get(`/api/user/info`);
        axios.defaults.headers.common['x-auth-token'] = token;

        dispatch({
          type: 'LOGIN',
          payload: {
            user: res.data.user,
          },
        });
      } catch (err) {
        console.error(err);
      }
    } else {
      delete axios.defaults.headers.common['x-auth-token'];
    }
  };

  // verify user on reducer state init or changes
  useEffect(async () => {
    if (!state.user) {
        await getUserInfo();
    }
  }, [state]);

  const logIn = async (email, password) => {
    const config = {
      headers: { 'Content-Type': 'application/json' },
    };
    const body = JSON.stringify({ email, password });

    try {
      const res = await axios.post(`/api/user/login`, body, config);
      localStorage.setItem('token', res.data.token);
      await getUserInfo();
    } catch (err) {
      console.error(err);
    }
  };

  const register = async (email, password) => {
    const config = {
      headers: { 'Content-Type': 'application/json' },
    };
    const body = JSON.stringify({ email, password });

    try {
      const res = await axios.post(`/api/user/register`, body, config);
      localStorage.setItem('token', res.data.token);
      await getUserInfo();
    } catch (err) {
      console.error(err);
    }
  };

  const logOut = async (name, email, password) => {
    try {
      localStorage.removeItem('token');
      dispatch({
        type: 'LOGOUT',
      });
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <AuthContext.Provider value={{ ...state, logIn, register, logOut }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

I put useContext in customized hook - just a good practice to access to context easily.

import { useContext } from 'react';
import AuthContext from '../contexts/FirebaseAuthContext';

const useAuth = () => useContext(AuthContext);

export default useAuth;

React guest & user guard

Guard components are simple auth navigation components that wrap around other components. I use guard components so that the auth navigation logic is seperated from individual components.

Guest guard navigates unlogined user to login and is wrapped around protected pages.

import { Navigate } from 'react-router-dom';
import useAuth from '../hooks/useAuth';

const GuestGuard = ({ children }) => {
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }
  return <>{children}</>;
};

<GuestGuard>
  <PostReview />
</GuestGuard>

User guard navigates logined user to home page and is wrapped around login and register pages.

const UserGuard = ({ children }) => {
  const { isAuthenticated } = useAuth();

  if (isAuthenticated) {
    return <Navigate to="/dashboard" />;
  }
  return <>{children}</>;
};

<UserGuard>
  <Login />
</UserGuard>

This is how to setup JWT auth in MERN from scratch. The user and email registration would work well for small-scale projects, and I would recommend implementing OAuth as the website scales.

How I structure my React projects

Jeffrey Yu — Fri, 25 Feb 2022 18:18:24 +0000

Finding the correct path to import a component is always a big headache in React development. Laying out a proper structure for your React project ahead helps you and your team in many ways through the development process:

A better understanding of how files are connected and work together
Easier maintenance as the project scales, avoiding restructuring and modifying all the routes and import paths
Higher productivity (better readability, finding the source of bugs, etc.)
A clear organization that cures your OCD

Here is how I put my React project into a clean and practical structure.

Src

src
├── components
├── pages
├── slices
├── utils
├── App.js
├── index.js
├── routes.js
└── store.js

As common, App.js and index.js are entries of the React project, routes.js and store.js are entries of React-router and Redux. The four folders above are the essential lego bricks that hold up the project code.

Components

components
├── guards
│   └── AuthGuard.js
├── layout
│   └── NavBar
│       ├── components
│       │   ├── NavItem.js
│       │   └── NavSection.js
│       └── index.js
├── modules
│   └── cards
│       ├── ItemCard.js
│       └── UserCard.js
└── widgets
    └── buttons
        ├── PrimaryButton.js
        └── SecondaryButton.js

/components contains global components and atomic or modular components.

Global components like AuthGuard.js and NavBar are parent components of all pages in the router. For example, AuthGuard.js wraps around components that need authentication, checks if the user is authenticated, and jumps to the login page if not.

Atomic components like PrimaryButton.js are the smallest UI components that will be reused in modules and pages. Modular components like UserCard.js are modules that contain multiple widgets as a component to serve a specific function, which are reused in more than one page.

Pages

pages
├── Login.js
└── account
    ├── index.js
    ├── profile
    │   ├── components
    │   │   ├── ProfileCover.js
    │   │   └── ProfileDetail.js
    │   └── index.js
    └── settings
        ├── components
        │   ├── AccountSettings.js
        │   └── NotificationSettings.js
        └── index.js

/pages contains pages shown on the website. It should be structured in a similar way as the router to give you a better understanding of how the real website would be browsed. This is also similar to the Next.js approach.

For example, the outer folder /account is an entrance on the navbar, which includes two pages profile and settings. Each page folder has an index.js (the page itself), and contains modules that made up this page in the /components folder.

A clear way for me to organize code is that only reusable components are in /components, while components built for a specific page are under /pages/[page-name]/components.

It’s important to separate the components in pages once you find them reusable. It’s even better if you are taking a bottom-up approach and build the components first if you find them potentially reusable.

Slices

slices
├── itemSlice.js
└── userSlice.js

Now for the logic side. I use Redux Toolkit which allows me to handle Redux actions and reducers easily in one place called a “slice”. It also comes with many useful middlewares like createAsyncThunk.

For example, the userSlice.js handles user authentication like this:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';
import setAuthToken from '../utils/setAuthToken';

// login action
export const login = createAsyncThunk('users/login', async (email, password) => {
  const config = {
    headers: { 'Content-Type': 'application/json' },
  };
  const body = JSON.stringify({ email, password });

  try {
    const res = await axios.post('/api/user/login', body, config);
    await localStorage.setItem('token', res.data.token);
    return res.data;
  } catch (err) {
    console.log(err.response.data);
  }
});

const userSlice = createSlice({
  name: 'userSlice',
  initialState: {
    loading: false,
    user: null,
  },
  reducers: {},
  extraReducers: {
    // login reducers
    [login.pending]: (state) => {
      state.loading = true;
    },
    [login.fulfilled]: (state, action) => {
      state.user = action.payload.user;
      setAuthToken(action.payload.token);
      state.loading = false;
    },
    [login.rejected]: (state) => {
      state.loading = false;
    },
  },
});

export default userSlice.reducer;

/slices basically contains all the Redux Toolkit slices. You can think of /slices as a central place that governs the global state and the specified functions to modify it. Each slice that handles an aspect of the app’s global state should be separated into one file.

Utils

utils
├── objDeepCopy.js
└── setAuthToken.js

Lastly, /utils contains files that deal with logic to fulfill a certain function. They are functional pieces commonly used in many places in the project.

For example, setAuthToken.js gets a token and set or delete the x-auth-token axios header. It’s used in userSlice.js above.

There are other structures based on different tech stacks. For example, you might want to have /contexts and /hooks folders if you are using useContext and useReducers instead of Redux.

This is only one possible structure style among many options, and definitely not the best one. After all, the best React project structure is the one that fits your development style, and you will finally find the one suitable after many adjustments.

4 Reasons why I start using Tailwind CSS in every project

Jeffrey Yu — Tue, 15 Feb 2022 15:02:33 +0000

I used to use UI frameworks a lot — Bootstrap, Material UI, Ant Design… Yes they are convenient and I only need to write a few lines of CSS in a whole project.

But the problem is: you can see a website is clearly built upon Bootstrap, like many others out there. UI frameworks have components so strictly defined that it’s hard to customize them to the unique styles of my website. They make my website doesn’t look like “mine”, but coming out of a popular template that everyone is using.

Once I picked up Tailwind CSS last year, I started using it in every project of mine, and reconstructing existing projects with it. Although it’s a CSS framework, it allows me to write customizable styles as simple as those UI framworks, while acting the same as coding in plain CSS. Here are 4 reasons why I love using it and why it’s so easy to use.

Easy inline styling

Instead of writing blocks of plain CSS and adding annoying selectors to HTML elements, Tailwind lets you add styles on HTML elements directly. It’s like style attribute in JSX but with a more concise syntax.

For example, a styled avatar in regular HTML and CSS is

<img src="image.png">
img {
  width: 6px,
  height: 6px,
  border-radius: 100%
}

whereas in Tailwind is

<img src="image.png" class="w-6 h-6 rounded-full">

Predefined property value

Tailwind sets the value of a CSS property in several predefined formats so that your UI follows a certain pattern. This avoids inconsistent property value over different components, and saves time for you to define global patterns for the properties.

Highly customizable

Although Tailwind has predefined property value, it allows you to customize your own property value.

// tailwind.config.js
module.exports = {
  theme: {
    borderRadius: {
      'none': '0',
      DEFAULT: '4px',
      'large': '12px'
    }
  }
}

A more common use case is to globally define a style class, like the CSS selector. This saves you from writing the same style for different components, reusing it in various scenarios.

// index.css
@layer component {
  .hover-transition {
    @apply transition duration-200 ease-out;
  }
}
// myComponent.html
<div class="w-10 h-6 hover-transition"> hover me </div>

Handle responsiveness easily

When CSS first comes out, it didn’t incorporate responsive styles for different screen sizes. Media queries were not introduced to CSS until 2012, yet its syntax is still tedious for devs to write a whole responsive application.

button {
  hidden
}
@media screen and (min-width: 768px) {
  button {
    width: 12px
  }
@media screen and (min-width: 1024px) {
  button {
    width: 16px
  }
}

Tailwind incorporates easy responsive styling to just add a prefix of screen size in front of each property.

<button class="hidden md:w-12 lg:w-16"> hit me </button>

Makes life much easier, right?

Understanding how virtual DOM works in React

Jeffrey Yu — Sun, 13 Feb 2022 10:44:41 +0000

DOM

To understand virtual DOM, we must know how DOM works.

When you enter a URL in the browser, the browser requests the specified server send back files, including HTML, CSS, and JS files. Just like where you need to compile a C file with a compiler before running, the browser first renders HTML into a DOM (Document Object Modal) tree using the HTML parser.

DOM is a tree structure where each node is an HTML element, HTML attribute, plain text, comments, etc. You can check out how HTML gets translated into DOM using this tool.

The browser then binds CSS styles and JS events with specified nodes in the DOM tree, paints the render tree, and finally displays the real web page you see on the screen.

For example, JS can access nodes in the document with functions like document.getElementById()

Virtual DOM

When for example, the text value in a <p> tag changes, the browser re-renders the HTML into a new DOM containing all original nodes with the updated value. This is time-consuming. React, on the other hand, first converts HTML into a JS object as a virtual DOM.

For example,

<div id="app">
  <p class="text">hello world!!!</p>
</div>

would be


{
  tag: 'div',
  props: {
    id: 'app'
  },
  chidren: [
    {
      tag: 'p',
      props: {
        className: 'text'
      },
      chidren: [
        'hello world!!!'
      ]
    }
  ]
}

Since the browser only understands the traditional DOM, React must render the virtual DOM into DOM first. We can write a simple version of render() in the React library.

function setProps (element, props) {
  Object.entries(props).forEach(([key, value]) => {
    element.setAttribute(
      key === 'className' ? 'class' : key,
      value
    )
  })
}

function render(vdom) {
    if (typeof vdom === 'string' || typeof vdom === 'number') {
        return document.createTextNode(vdom);
    }
    const { tag, props, children } = vdom
    const element = document.createElement(tag);
    setProps(element, props);

    children.map(render).forEach(element.appendChild.bind(element));

    vdom.dom = element;
    return element;
}

When a property in the JS object (a component in the virtual DOM) changes, React uses a diff algorithm to compare the new virtual DOM with the old one, and only re-renders the updated nodes.

Although computing diff and rendering virtual DOM to DOM is slower than directly rendering HTML to DOM, the cost of re-rendering the whole DOM is usually much larger than updating the necessary nodes.

As a result, React gives better re-render performance using virtual DOM than plain HTML and JS with the traditional DOM. The virtual DOM is a perfect design for React in modern web projects where state changes and components re-renders happen a lot.