DEV Community: Hasan

Master Full Stack Development by walking through the Commit History of an Open Source Project

Hasan — Tue, 20 Jan 2026 17:37:00 +0000

I built a full-stack project from scratch with nearly 100 commits. Every single commit tells a story of how the application evolved, bugs that were fixed, and architecture decisions that were made.
Instead of just showing the final code, I created a comprehensive tutorial that explains the "why" behind every commit from start to finish. This is designed to be a deep-dive learning resource for anyone wanting to understand project architecture or learn how to contribute to open source effectively.

Start learning: https://youtu.be/942PSbDTXgo?si=1mEnbDFr-LerOzO9

Tech Stack: TypeScript with Monorepo, Node.js, React.js, TanStack, PostgreSQL and many more.

The one React and TypeScript project you should try as a beginner who wants to build with Gen AI

Hasan — Thu, 24 Apr 2025 08:29:27 +0000

Building a reddit assistant Chrome extension with Typescript, React, WXT Framework and free Gemini Api. This
Will help you to learn how you can implement gen Ai in your React project which also help to build Chrome extension ehich eveunaly a usefull tool any reddit user can use. And from dev it's also huge learning crub as begginer. Here is the full video you can watch.

https://youtu.be/w7lcCg03Zgo?si=RnIQkXobM-7KOcPd

DeepSeek R1 + Ollama: 5 Free Open-Source AI Tools You Can Run Locally

Hasan — Mon, 03 Feb 2025 08:33:47 +0000

Been messing around with DeepSeek R1 + Ollama, and honestly, it's kinda wild how much you can do locally with free open-source tools. No cloud, no API keys, just your machine and some cool AI magic.

Page-Assist Chrome Extension - https://github.com/n4ze3m/page-assist (any model with any params)
Open Web-UI LLM Wrapper - https://github.com/open-webui/open-webui (any model with any params)
Browser use – https://github.com/browser-use/browser-use (deepseek r1:14b or more params)
Roo-Code (VS Code Extension) – https://github.com/RooVetGit/Roo-Code (deepseek coder)
n8n – https://github.com/n8n-io/n8n (any model with any params)
A simple RAG app: https://github.com/hasan-py/chat-with-pdf-RAG (deepseek r1:8b)
Ai assistant Chrome extension: https://github.com/hasan-py/Ai-Assistant-Chrome-Extension (GPT, Gemini, Grok Api, Ollama added recently)

Full installation video: https://youtu.be/hjg9kJs8al8?si=rillpsKpjONYMDYW

Anyone exploring something else? Please share- it would be highly appreciated!

Deepseek R1 Locally | Top 5 Free Open-Source Tools | Ollama | Automation | RAG

Hasan — Sat, 01 Feb 2025 14:19:01 +0000

In this video, we explore the power of Deepseek R1 and demonstrate how you can run free open-source tools locally on your machine. Using Ollama, we'll dive into LLM wrappers, AI-driven automation tools, browser automation, coding extensions, and showing a simple RAG (Retrieval-Augmented Generation) app—all without spending a penny!

You'll learn how to set up these tools locally, take full advantage of their free features, and enhance your workflow with browser automation, AI models, and more. Whether you're into coding, AI, or workflow optimization, this video covers everything you need to boost your productivity using free and open-source technologies.

Time break:
00:00:35 Short Explanation
00:03:00 Ollama Installation
00:06:53 1st Tool (LLM Wrapper Chrome Extension)
00:10:41 2nd Tool (LLM Wrapper Web Ui)
00:20:11 3rd Tool Browser Automation (Alternative of Open Ai Operator Agent)
00:26:59 4th Tool VS Code Extension
00:28:34 5th Tool Comlpex workflow automation (Zapier alternative)
00:39:20 6th Tool Simle Custom RAG App

Join My Discord Channel to request new AI-related video ideas and discuss tools: https://discord.gg/gjUEzqcTSz

My Open-Source AI Tools Source Code:
AI Chrome Extension Assistant: https://github.com/hasan-py/Ai-Assistant-Chrome-Extension
Simple RAG App: https://github.com/hasan-py/chat-with-pdf-RAG

Watch the AI Assistant Full Video here: https://youtu.be/troznI6r17I?si=BbNYnI7c_9qqzfRL

Watch me on Youtube:
https://youtu.be/hjg9kJs8al8?si=g4ZAOZMj-Smd22yP

Build an Ai Assistant Chrome Extension | Javascript | GPT | Gemini | Grok

Hasan — Sun, 26 Jan 2025 16:39:46 +0000

In this tutorial, I’ll walk you through a Chrome extension that I’ve built. This is a code explanation video. The source code is attached below. This extension allows you to select any text from any webpage and instantly leverage GPT, Gemini, and Grok APIs to perform a variety of tasks like summarizing, code review, or generating responses, all with just a few clicks!

But that’s not all. Along the way, I’ll dive into the core fundamental concepts you need to know to build your own Chrome extension. Whether you’re a beginner or looking to enhance your skills, this video will help you learn how to:

Create and structure a Chrome extension.
Integrate APIs like GPT, Gemini, and Grok.
All with JavaScript

Breakdown:

Intro: 0:00
First project preview: 00:01:41
Second project preview: 00:02:34
Basic Chrome extension dev flow: 00:05:13
First project start: 00:11:20
Second project start: 00:29:00
Popup Explanation: 00:42:58
Background script explanation: 01:01:02
Content script explanation: 01:25:15

Source code? It's free! Check out on the discord ⬇️⬇️⬇️
👥 Join the community: https://discord.com/invite/WD4HATYP

TDD: No, Not Test-Driven Development; Let’s Talk Technical Design Documents

Hasan — Sat, 11 Jan 2025 14:34:42 +0000

Do you know about TDD?

Wait, I’m not talking about Test-Driven Development (the one where you write tests before writing code). I mean Technical Design Documents.

You’ve probably heard of them in passing or maybe even written one. But do you really know how important they are? Let’s dive into what TDDs are, why they’re essential, and how they can save you hours of frustration (and debugging).

What Even is a Technical Design Document?

Think of a Technical Design Document (TDD) as the blueprint of your project.
It’s a detailed, written description of:

What you’re building.
Why you’re building it.
How you’re going to build it.

Sounds boring? Maybe. But trust me it’s far from unnecessary.

A TDD gives your team a single source of truth

It’s like having a map before you start a road trip

Everyone knows the destination.
Everyone knows the route.
Fewer detours, fewer fights, and no one asks, “Are we there yet?”

Why You Need a TDD (Even if You Think You Don’t)

Let me guess, you’re thinking:
Why waste time writing a TDD when I can just start coding? Here’s the thing: skipping a TDD is like jumping into a pool without checking if there’s water. Sure, you might be fine, but there’s a good chance you’ll regret it.

Here’s What Happens Without a TDD:

Miscommunication: Your team isn’t aligned.
Unnecessary work: You end up building things nobody asked for.
Scope creep: The project grows into a monster you can’t tame.

And What Happens With a TDD?

Everyone knows what’s being built.
You avoid rework and save time.
The project stays on track (and your sanity stays intact).

So, the question isn’t, “Why write a TDD?” it’s Why wouldn’t you?

When Do You Write a TDD?

The best time to write a TDD? Right at the start of the project.

Here’s what it focuses on:

System design: What’s the architecture going to look like?
Purpose: Why are we building this, and who benefits?
Documentation: How can this guide the team through development?

Starting with a TDD feels like extra work upfront, but it pays off massively when your team has clear goals and direction.

5 Reasons Why TDD is a Game-Changer

Still not convinced? Let me hit you with five reasons why TDDs are worth the effort:

Clarity: Forces you to deeply think through the solution.
Communication: Keeps everyone on the same page.
Focus: Helps prevent unnecessary features from creeping in.
Quality: Encourages better planning, leading to better code.
Time-saving: Reduces back-and-forth, rework, and debugging.

How to Write a TDD Example (Without Overthinking It):

A TDD doesn’t have to be complicated. Here’s a quick checklist to get you started:

✅ System Overview: What’s the high-level idea?
✅ Functional Requirements: What must the system do?
✅ Non-Functional Requirements: How should it perform (speed, scalability, etc.)?
✅ Architecture Diagram: A simple visual map of the system.
✅ Tech Stack: What tools and frameworks are we using?
✅ Testing Plan: How do we ensure everything works as expected?

You don’t need to write a novel; just make sure it’s clear enough for the team to understand and use.

Why Skipping TDD Feels Good (But Isn’t Worth It)

Skipping a TDD can feel great in the moment. You get to dive straight into coding no boring documentation, no wasted time, just raw problem-solving, right?

Wrong.

Here’s the reality:

No TDD = confusion, delays, and frustration.
No roadmap = wandering aimlessly.
No clear plan = way more work later.

TDDs might feel like they’re slowing you down, but they’re actually doing the opposite.

The TDD Cheat Sheet

Let me leave you with a little cheat sheet for your next project:

Start with a TDD, no matter how tempting it is to skip it.
Keep it simple—focus on clarity over perfection.
Treat it as your project’s lifeline—not just a formality.

Writing a TDD isn’t just about extra work or good documentation practices. It’s about setting your project up for success from day one.

So, next time you start a project, ask yourself:

Do I want to spend hours debugging later, or minutes planning now?

Your call.

Written by Hasan with 💚

Follow me on X: https://x.com/hasan_py
Want to see what I'm building? https://www.youtube.com/@hasan-py

Learn Playwright Automation | E2E Test | Typescript | Auth, Maps, CRUD, GitHub Actions

Hasan — Mon, 02 Dec 2024 01:10:50 +0000

In this tutorial, I’ll walk you through how I added Playwright test code to a Game Review App! This app includes key features like authentication, CRUD operations, and map rendering, and I’ll guide you step-by-step in implementing Playwright tests for all these functionalities.

Breakdown:

Topic: 00:00:10
Video Overview: 00:01:52
Why Playwright: 00:02:45
Project Overview: 00:05:10
Playwright Installation: 00:08:23
Playwright Report: 00:11:40
Playwright Configuration: 00:13:33
Basic Testing and Playwright Tools: 00:16:38
Playwright Ui Mode: 00:18:01
Folder Structure: 00:24:46
Setup Git Action: 00:28:25
Start Writing Test Code: 00:42:34
Refactor Test Code with Fixtures and Custom Fixture: 02:42:45
Test Generator: 03:25:25

Here’s what you’ll learn throughout this tutorial:

How to set up Playwright in an existing project 🛠️
How to configure Playwright with environment variables ⚙️🔑
Majorly used essential Playwright methods and how to use them effectively 📜✨
Working with fixtures, mocking APIs, and handling API responses in Playwright 🔄💻🌐
How to run all Playwright tests with a single command ▶️🚀
Integrating Playwright tests into GitHub Actions to automate test execution on every push 🤖🔄
Finally, using the Playwright Test Generator to create automated test code effortlessly ⚡📋

By the end of this video, you’ll feel confident about adding Playwright testing to your applications and setting up continuous integration with GitHub Actions.

Let’s dive in! 🚀

Watch the full video on YouTube: https://youtu.be/_aMElkcTepM

Learn Cypress Automation | E2E Test | Full-Stack App | Typescript | Auth Maps CRUD GitHub Actions

Hasan — Wed, 09 Oct 2024 19:18:51 +0000

In this Tutorial, I’m going to walk you through how I added Cypress test code to a full-stack game review app! This app includes important features like authentication, CRUD operations, and map rendering, and I’ll be showing you step-by-step how I implemented Cypress tests for all of these functionalities.

Throughout this tutorial, you’ll learn:

How to set up Cypress in an existing project
How to configure Cypress with environment variables
Majorly used essential Cypress methods
Working with fixtures, mocking APIs, and handling API responses in Cypress
How to run all Cypress tests with a single command
Finally, integrating Cypress tests into GitHub Actions to automate test running on every push.

By the end of this video, you'll be confident in adding Cypress testing to your full-stack apps and setting up continuous integration with GitHub Actions.

Watch the full tutorial video from YouTube:

Learn the Linked List Data Structure by Building a Blockchain in JavaScript

Hasan — Sun, 09 Jun 2024 18:24:05 +0000

Overview

Building a blockchain from scratch is an excellent way to understand both the intricacies of blockchain technology and fundamental data structures like linked lists. In this article, we’ll explore how to create a simple blockchain using JavaScript, highlighting how the blockchain resembles a singly linked list.

Now the question is what is a Blockchain?

A blockchain is a decentralized digital ledger. What that means? You can say it's a database that records transactions. Now what is transaction here? You can say it's data. That's mean blockchain store the data across many computers in a way that ensures security, transparency, and immutability means can't manipulate the data. Each block in a blockchain contains a cryptographic hash of the previous block, a timestamp, and transaction data. Still don't understand what is blockchain? Learn more

How it's related to Linked Lists?

A linked list is a linear data structure where each element, known as a node, points to the next element in the sequence. In a singly linked list, each node contains data and a reference (or pointer) to the next node in the list.

In blockchain, each block is like a node in a linked list:

Data: Contains transaction details.
Pointer: Holds the hash of the previous block.

This creates a chain of blocks, where each block points to its previous block, forming a linked list.

Let's build a Blockchain in JavaScript

You need nodejs latest version in your pc. So Download it.

Step 1: Program setup

Now create a file name blockchain.js. Our code will be here.

We need a cryptographic library that called crypto-js. This library is for generating hash. So hash means, You can give a data and a secret key to an algorithm and it will encrypt it. The encrypted result will be long form of string so that nobody can understand what is the data. Meaning we can abstract our data by encrypting it. And when we need to see the data we will decrypt it using the same algorithm with a secret key we provided on encryption time.

Now open the terminal and install it by this command:

npm install crypto-js

Step 2: Setting Up the Block Class

First, we need a Block class that will represent each block in our blockchain.

const SHA256 = require("crypto-js/sha256");

class Block {
  constructor(index, timestamp, data, previousHash = "") {
    this.index = index;
    this.timestamp = timestamp;
    this.data = data;
    this.previousHash = previousHash;
    this.hash = this.calculateHash();
  }

  calculateHash() {
    return SHA256(
      this.index +
        this.previousHash +
        this.timestamp +
        JSON.stringify(this.data)
    ).toString();
  }
}

SHA-256: We are using this algorithm
Block Class: Each block has an index, timestamp, data, the hash of the previous block, and its own hash. You can say it's the node of the linked lists.
calculateHash(): Generates a SHA-256 hash based on the block’s properties.

Step 2: Creating the Blockchain Class

Next, we need a Blockchain class to manage the chain of blocks.

class Blockchain {
  constructor() {
    this.chain = [this.createGenesisBlock()];
  }

  createGenesisBlock() {
    return new Block(0, "10/06/2024", "Genesis Block", "0");
  }

  getLatestBlock() {
    return this.chain[this.chain.length - 1];
  }

  addBlock(newBlock) {
    newBlock.previousHash = this.getLatestBlock().hash;
    newBlock.hash = newBlock.calculateHash();
    this.chain.push(newBlock);
  }

  isChainValid() {
    for (let i = 1; i < this.chain.length; i++) {
      const currentBlock = this.chain[i];
      const previousBlock = this.chain[i - 1];

      if (currentBlock.hash !== currentBlock.calculateHash()) {
        return false;
      }

      if (currentBlock.previousHash !== previousBlock.hash) {
        return false;
      }
    }
    return true;
  }
}

Blockchain Class: Manages the chain of blocks means the list.
createGenesisBlock(): Creates the first block in the blockchain.
getLatestBlock(): Retrieves the latest block in the chain.
addBlock(newBlock): Adds a new block to the chain, setting its previous hash to the hash of the current latest block, then recalculates its own hash.
isChainValid(): Validates the integrity of the blockchain by checking hashes.

Now what is validation means here: Let's suppose we have a database and we want to add some data into it, so before that what we do? we prepare and validate the data. So same situation here. We must have to validate our block before it insert to the blockchain. Here isChainValid() function actually validate our block.

Step 3: Adding and Validating Blocks

In this step, we will create an instance of our Blockchain class, add some blocks to it, and then validate the chain to ensure its integrity.

Let's break down the code and explain each part in detail.

Creating a Blockchain Instance First, we create a new instance of our Blockchain class. This instance will start with a single block, the genesis block, which is automatically created by the constructor of the Blockchain class

let myBlockchain = new Blockchain();

Adding Blocks Next, we add new blocks to our blockchain. Each block contains an index, a timestamp, and some data. When a new block is added, its previousHash property is set to the hash of the latest block in the chain, and its own hash is calculated using the calculateHash method.

myBlockchain.addBlock(new Block(1, "11/06/2024", { amount: 4 }));
myBlockchain.addBlock(new Block(2, "12/06/2024", { amount: 8 }));

Validating the Blockchain After adding blocks, we can validate the entire blockchain to ensure its integrity. The isChainValid method checks if all the blocks in the chain are valid by comparing their hashes and the previousHash values.

console.log("Blockchain valid?", myBlockchain.isChainValid());

Displaying the Blockchain
Finally, we can display the blockchain by converting it to a JSON string and logging it to the console.

console.log(JSON.stringify(myBlockchain, null, 4));

Now open the terminal and run the program:

node blockchain.js

This will output a neatly formatted representation of the entire blockchain, showing all the blocks and their properties.

Now let's understand how this blockchain relates to linked lists

This blockchain can be thought of as a specialized type of linked list. Both data structures store a sequence of elements (blocks in blockchain, nodes in linked list) where each element contains a reference to the next (and in some cases, the previous) element. Let's explore how the concepts align and then illustrate this with some examples.

Similarities Between Blockchain and Linked Lists

Sequential Storage:

Linked List: Each node points to the next node in the sequence.
Blockchain: Each block points to the next block through the previousHash property, forming a chain.

References:

Linked List: Nodes have pointers or references to the next node.
Blockchain: Blocks have a previousHash that references the hash of the previous block.

Addition:

Linked List: New nodes are added by adjusting the pointers of the existing and new nodes.
Blockchain: New blocks are added by setting the previousHash of the new block to the hash of the latest block, then appending it to the chain.

Traversal:

Linked List: You can traverse from the head (or any starting node) to the end by following the next pointers.
Blockchain: You can traverse from the genesis block to the latest block by following the previousHash references.

Differences Between Blockchain and Linked Lists

Immutability:

Linked List: Nodes can be changed freely.
Blockchain: Once a block is added, it is immutable; any change to a block would invalidate the entire chain from that block onwards.

Data Security:

Linked List: No inherent security features.
Blockchain: Each block contains a cryptographic hash that ensures data integrity and security.

Consensus Mechanisms:

Linked List: No need for consensus; nodes are managed centrally.
Blockchain: Often part of a decentralized system requiring consensus mechanisms (like Proof of Work or Proof of Stake) to validate new blocks.

Example: Linked List Implementation

Let's see a simple linked list implementation in JavaScript:

class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
  }

  add(data) {
    const newNode = new Node(data);
    if (!this.head) {
      this.head = newNode;
    } else {
      let current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = newNode;
    }
  }

  print() {
    let current = this.head;
    while (current) {
      console.log(current.data);
      current = current.next;
    }
  }
}

// Usage
let list = new LinkedList();
list.add(1);
list.add(2);
list.add(3);
list.print();

This structure is consisting of a sequence of elements called nodes. Each node contains two parts:

Data: The value stored in the node.
Next: A reference (or pointer) to the next node in the sequence.

Here’s a simple visual representation of a linked list:

[Data|Next] -> [Data|Next] -> [Data|Next] -> null

In this structure, the first node is called the head, and the last node points to null, indicating the end of the list. Linked lists are dynamic, meaning they can grow and shrink in size as elements are added or removed.

Our blockchain:

const crypto = require("crypto-js");

class Block {
  constructor(index, timestamp, data, previousHash = "") {
    this.index = index;
    this.timestamp = timestamp;
    this.data = data;
    this.previousHash = previousHash;
    this.hash = this.calculateHash();
  }

  calculateHash() {
    return crypto
      .SHA256(
        this.index +
          this.previousHash +
          this.timestamp +
          JSON.stringify(this.data)
      )
      .toString();
  }
}

class Blockchain {
  constructor() {
    this.chain = [this.createGenesisBlock()];
  }

  createGenesisBlock() {
    return new Block(0, "10/06/2024", "Genesis Block", "0");
  }

  getLatestBlock() {
    return this.chain[this.chain.length - 1];
  }

  addBlock(newBlock) {
    newBlock.previousHash = this.getLatestBlock().hash;
    newBlock.hash = newBlock.calculateHash();
    this.chain.push(newBlock);
  }

  isChainValid() {
    for (let i = 1; i < this.chain.length; i++) {
      const currentBlock = this.chain[i];
      const previousBlock = this.chain[i - 1];

      if (currentBlock.hash !== currentBlock.calculateHash()) {
        return false;
      }

      if (currentBlock.previousHash !== previousBlock.hash) {
        return false;
      }
    }
    return true;
  }
}

// Usage
let myBlockchain = new Blockchain();
myBlockchain.addBlock(new Block(1, "11/06/2024", { amount: 4 }));
myBlockchain.addBlock(new Block(2, "12/06/2024", { amount: 8 }));
console.log(JSON.stringify(myBlockchain, null, 4));

Now what's happening blockchain as a linked list here:

Genesis Block: The genesis block is analogous to the head node of a linked list. It’s the first block (node) and does not reference any previous block.
Adding Blocks: Similar to adding nodes to a linked list, new blocks are linked to the chain by referencing the hash of the previous block (node).
Traversal and Validation: Just like traversing a linked list to perform operations, we traverse the blockchain to validate the integrity of the chain.

Conclusion

By building a blockchain from scratch, we can see how its underlying structure is similar to a linked list. Each block in the blockchain contains a reference to the previous block, forming a chain of blocks similar to nodes in a linked list. However, the blockchain adds layers of security and immutability through cryptographic hashing, making it a robust structure for maintaining an immutable ledger of transactions. And there are also some others linked list as well as.

5 Easy-Peasy Things in JavaScript That Beginners Often Confuse

Hasan — Wed, 10 Apr 2024 10:53:01 +0000

Overview

Navigating through JavaScript as a beginner can often lead to confusion, especially when certain concepts sound strikingly similar. In interviews, it's not uncommon to mistake one for another. Let's revisit these concepts to ensure clarity and understanding.

Nullish Coalescing Operator with Logical OR (||) and Logical AND (&&)

Nullish Coalescing

const name = "";
const defaultName = name ?? "Unknown";
console.log(defaultName); // Output: "''" (empty string)

The nullish coalescing operator (??) is used to provide a default value if a variable is null or undefined, but not for other falsy values like 0 or ''. So if you used || for checking 0 or string it's gonna give you false always so used ?? instead

Logical OR (||) and Logical AND (&&):

const age = 25;
const hasLicense = true;

// Using logical OR
const canDrive = age >= 16 || hasLicense;
console.log(canDrive); // Output: true

// Using logical AND
const canVote = age >= 18 && hasLicense;
console.log(canVote); // Output: true

The logical OR (||) and logical AND (&&) operators are used to perform boolean logic operations. The OR operator returns true if at least one of the operands is true, while the AND operator returns true only if both operands are true. Sometimes you mess up with like which side will be true or false but just think clearly left first and then go for right and then combine both condition for the result 😕

Type Coercion and Template literals

Type Coercion

Implicit vs. Explicit Coercion:
Beginners may not be aware that type coercion can occur implicitly (automatically) or explicitly (manually). Implicit coercion happens automatically when JavaScript expects one type but receives another, while explicit coercion involves using built-in functions like Number(), String(), or Boolean() to convert values to specific types.
Loose vs. Strict Equality: JavaScript has
both loose equality (==) and strict equality (===) operators. Beginners may not understand the difference between them and inadvertently use loose equality for comparison, leading to unexpected results due to type coercion. Strict equality (===) checks both value and type, while loose equality (==) performs type coercion before comparison.
Truthy and Falsy Values: JavaScript treats
certain values as either "truthy" or "falsy" in conditional contexts. Beginners may find it confusing that non-boolean values like numbers, strings, objects, and even functions can be evaluated as either true or false depending on their coercion context. For example, an empty string ("") coerces to false, while a non-empty string coerces to true.
Implicit Conversion During Arithmetic
Operations: During arithmetic operations, JavaScript automatically converts operands to a common type before performing the operation. This can lead to unexpected results if beginners are not aware of how different types are coerced in mathematical expressions. For example, adding a string and a number may result in concatenation rather than addition.
Coercion in Comparison Operators:
Comparison operators (<, >, <=, >=) also involve type coercion when comparing values of different types. Beginners may find it confusing that JavaScript converts values to a common type before performing comparisons, potentially leading to unexpected outcomes.

Template literals

const name = "John";
console.log(`Hello, ${name}!`); // Output: "Hello, John!"

Template literals provide an easy way to interpolate variables and expressions into strings. You maybe used this syntax a lot but on the interview you often forget about this name 😆

Default Parameter Values, Spread Operator, and Rest Operator

Default Parameter Values

function greet(name = "World") {
  console.log(`Hello, ${name}!`);
}
greet(); // Output: "Hello, World!"
greet("John"); // Output: "Hello, John!"

Default parameter values allow you to specify default values for function parameters.

Rest Operator:

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // Output: 15

The rest parameter syntax allows us to represent an indefinite number of arguments as an array. Sometimes you mixed up this with Spread Operator.

Spread Operator

const numbers = [1, 2, 3, 4, 5];
console.log(...numbers); // Output: 1 2 3 4 5

The spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected.

Optional Chaining and Destructuring Assignments

Destructuring Assignments:

// Destructuring an Object
const person = { name: "John", age: 30 };
const { name, age } = person;
console.log(name, age); // Output: "John 30"

// Destructuring an array
const colors = ["red", "green", "blue"];

// Extracting values from the array into separate variables
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor); // Output: "red"
console.log(secondColor); // Output: "green"
console.log(thirdColor); // Output: "blue"

Destructuring assignments allow you to extract values from objects or arrays into distinct variables. Sometimes you confused about it's gonna only work for object. But not It's also gonna work for array.

Optional Chaining

const person = {
  name: "John",
  address: {
    city: "New York",
  },
};
console.log(person.address?.city); // Output: "New York"

Optional chaining allows you to safely access nested properties of an object without causing an error if a property is null or undefined. You used it often but forget about it's name.

Callbacks, promises (ES6), and async/await (ES7)

Callbacks:

Callbacks are functions passed as arguments to other functions, which are then invoked at a later time, usually after an asynchronous operation completes.

Confusion Points:

Callback Hell: When dealing with multiple nested callbacks, also known as "callback hell," code can become difficult to read and maintain due to the pyramid-like structure.
Error Handling: Error handling with callbacks can be cumbersome, especially when dealing with multiple asynchronous operations, as errors must be passed through each callback in the chain.
Scope and Context: Beginners may struggle with understanding scope and context within callback functions, leading to unexpected behavior or variable scoping issues.

Promises:

Promises are objects representing the eventual completion or failure of an asynchronous operation. They provide a cleaner alternative to callbacks for handling asynchronous code.

Confusion Points:

Promise Chaining: Chaining multiple promises using .then() can sometimes be confusing, especially when handling errors or passing data between promises.
Error Handling: Beginners may find error handling with promises challenging, particularly understanding when and where to use .catch() to handle errors in promise chains.
Understanding Promise States: Novices may struggle to understand the three states of a promise: pending, fulfilled, and rejected, and how to transition between them.

Async/Await (ES7):

Async/await is a modern JavaScript feature that allows for writing asynchronous code in a synchronous-like manner. It is built on top of promises and provides a more intuitive syntax for handling asynchronous operations.

Confusion Points:

Syntax: While async/await offers a more straightforward syntax compared to callbacks and promises, beginners may still find the syntax confusing, especially when using async functions and await expressions.
Error Handling: Understanding how to handle errors with async/await, including using try/catch blocks to catch and handle exceptions, can be challenging for newcomers.
Promise vs. Await: Distinguishing between returning a promise and using await within an async function can sometimes be confusing, leading to errors or unexpected behavior.

Setup Your Universal App with React Native, Expo Router, Tamagui, and Storybook

Hasan — Sat, 06 Apr 2024 21:00:00 +0000

Overview

In this guide, we'll walk you through setting up a universal app using React Native, Expo Router, Tamagui, and Storybook. This tutorial will provide step-by-step instructions to help you kickstart your universal app development journey.

Prerequisites

Node.js Latest Version: Ensure you have Node.js installed on your system.
For Android:
- Android Studio
- Emulator
For macOS:
- Xcode
- Simulator

Expo Router Setup

First, we will install an Expo project with file-based navigation using the Expo router.

Open your terminal from any preferred directory, then enter the command.

npx create-expo-app@latest --template tabs@50

Now, you can start your project by running:

npx expo start

This will create a minimal project with the Expo Router library already installed. This approach is recommended by Expo's official documentation, making setup easier compared to manual installation, which involves several steps. It's better to install it this way and then clean up the project. Next, we'll install Tamagui into our project.

Tamagui Setup

Step 01:

First we have to install @tamagui/babel-plugin package by this command

npm install @tamagui/babel-plugin

Step 02:

We have updated our babel.config.js file to include the optional @tamagui/babel-plugin. You can find the babel.config.js file in the root directory of your Expo project. Simply copy the code provided and paste it into your babel.config.js file.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "@tamagui/babel-plugin",
        {
          components: ["tamagui"],
          config: "./tamagui.config.ts",
          logTimings: true,
          disableExtraction: process.env.NODE_ENV === "development",
        },
      ],
      // NOTE: this is only necessary if you are using reanimated for animations
      "react-native-reanimated/plugin",
    ],
  };
};

Step 03:

Because we are setting up a universal app, we need to configure something specific for the web, especially for Tamagui. Therefore, we will make some adjustments to our metro.config.js file. You won't find this file in the root directory, so you'll need to create it manually with exactly the same name.

Step 04:

Now install some dependency packages for web support using this command:

npm install tamagui @tamagui/config @tamagui/metro-plugin

With this command, we are actually installing the Tamagui component library, Tamagui configuration, and the Metro plugin for web support.

Step 05:

In your metro.config.js file that you have created previously, add the following code. Later, we will modify this file for Storybook, so remember that.

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");
/** @type {import('expo/metro-config').MetroConfig} */

const config = getDefaultConfig(__dirname, {
  // [Web-only]: Enables CSS support in Metro.
  isCSSEnabled: true,
});
// add nice web support with optimizing compiler + CSS extraction
const { withTamagui } = require("@tamagui/metro-plugin");

module.exports = withTamagui(config, {
  components: ["tamagui"],
  config: "./tamagui.config.ts",
  outputCSS: "./tamagui-web.css",
});

Step 06:

Now, create another file in your root directory called tamagui.config.ts. In this file, we will configure our Tamagui settings.

Step 07:

Now add this following code into the file tamagui.config.ts

import { config } from "@tamagui/config/v3";

import { createTamagui } from "tamagui";
export const tamaguiConfig = createTamagui(config);
export default tamaguiConfig;
export type Conf = typeof tamaguiConfig;

declare module "tamagui" {
  interface TamaguiCustomConfig extends Conf {}
}

So here, we are importing the Tamagui configuration v3 and exporting it as is, while also declaring the types. With this, our default Tamagui configuration setup is complete. Now, let’s utilize it.

Step 08:

So, you will find a folder named ./app where all of the Expo code will be available. Inside this folder, navigate to the _layout.tsx file and replace the code at the top with the following.

import { Platform } from "react-native";

if (Platform.OS === "web") {
  import("../tamagui-web.css");
}

import {
  useFonts,
  Inter_400Regular,
  Inter_900Black,
} from "@expo-google-fonts/inter";
import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from "@react-navigation/native";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { useEffect } from "react";

import { useColorScheme } from "@/components/useColorScheme";
import { TamaguiProvider } from "tamagui";
import tamaguiConfig from "@/tamagui.config";

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from "expo-router";

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: "(tabs)",
};

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded, error] = useFonts({
    Inter: Inter_400Regular,
    InterBold: Inter_900Black,
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
  useEffect(() => {
    if (error) throw error;
  }, [error]);

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return <RootLayoutNav />;
}

function RootLayoutNav() {
  const colorScheme = useColorScheme();

  return (
    <TamaguiProvider
      config={tamaguiConfig}
      defaultTheme={colorScheme as string}
    >
      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
        <Stack>
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
          <Stack.Screen name="modal" options={{ presentation: "modal" }} />
        </Stack>
      </ThemeProvider>
    </TamaguiProvider>
  );
}

Here we add the Tamagui provider to wrap our entire app with Tamagui using the default configuration. Later, we will modify the configuration. We import the CSS specifically for the web. You can see the code at the top of the file where we added a condition for importing the CSS. This means that the CSS will only be imported when the platform is web.

Step 09:

We added the Inter font from @expo-google-fonts/inter into our _layout.tsx file using the useFonts() hook. This font is used in the CSS file we imported. So, installing this font is necessary. Install it with this command.

npm install @expo-google-fonts/inter

You're done! However, if you run the project, you may encounter some errors and issues. I faced those and fixed them. The Tamagui documentation doesn't mention anything like that, so you'll have to do a little additional work.

Step 10:

So, in your _layout.tsx file, you may encounter errors if you've installed ESLint as a VS Code extension. Then, your import ("../tamagui-web.css") code will give you an error like "don't have any type declaration." To get rid of this error, follow these steps:

Create a file called declaration.d.ts in your root directory
Then go to your tsconfig.json file from the root directory and replace your code with this one:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "esModuleInterop": true,
    "strict": true,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
}

So now you will be able to get rid of the warning.

Step 11:

Replace your package.json file's script object with this.

"scripts": {
    "start": "expo start -c",
    "android": "expo start --android -c",
    "ios": "expo start --ios -c",
    "web": "expo start --web -c",
    "test": "jest --watchAll"
  }

Here we are actually starting our project by cleaning the Expo cache, which is done by adding -c to our command.

Step 12:

Run the app
for running all platforms: npm start and then press w for web, press i for ios and press a for Android. Make sure you have an Android emulator or code simulator

So if you see any error occurring after running the app. Then don’t worry. Just close the terminal and restart the command like npm start or platform-specific we declare on the package.json file.

For seeing that tamagui working or not. Go to your (tabs) folder inside your app directory. And goto index.tsx file and replace the code with this one. Make sure you install @tamagui/lucide-icons by npm install @tamagui/lucide-icons

import { Airplay } from "@tamagui/lucide-icons";
import { Button, Heading, View } from "tamagui";

export default function TabOneScreen() {
  return (
    <View flex={1} alignItems="center" justifyContent="center">
      <Heading size={"$10"} color={"violet"}>
        Tab One
      </Heading>

      <Button
        color={"violet"}
        backgroundColor={"black"}
        alignSelf="center"
        icon={Airplay}
        mt={10}
        size="$6"
      >
        Button
      </Button>
    </View>
  );
}

Here we are simply replacing the old View, Text, and Button components from React Native with their Tamagui counterparts. Now, you can leverage Tamagui along with React Native Expo Router. If you don't require Storybook, you can skip the next two sections.

Storybook Setup

Now, we will set up Storybook in our Expo project and configure scripts to run the project with or without Storybook. Let's get started. Although there are templates available on their official GitHub repository, since we have already set up our project, we will need to add Storybook manually.

Step 01:

Run init to setup your project with all the dependencies and configuration files:

npx storybook@latest init

Now, you will notice a folder called .storybook. Do not delete it, as it contains all of our Storybook configurations. You can run Storybook simply by exporting it from your _layout.tsx file like this: export { default } from './.storybook'. However, we want to run it with a script to include Storybook in our project or exclude it. Therefore, we need to perform some manual configurations.

Step 02:

Now Replace your metro.config.js file we created and modified for tamagui. Replace all of the code by this.

const { getDefaultConfig } = require("expo/metro-config");
const { withTamagui } = require("@tamagui/metro-plugin");
/** @type {import('expo/metro-config').MetroConfig} */

// Storybook config
const path = require("path");
const { generate } = require("@storybook/react-native/scripts/generate");
generate({
  configPath: path.resolve(__dirname, "./.storybook"),
});

// Tamagui Config
const config = getDefaultConfig(__dirname, {
  isCSSEnabled: true,
});

// Storybook config
config.transformer.unstable_allowRequireContext = true;
config.resolver.sourceExts.push("mjs");

// Export the config with tamagui
module.exports = withTamagui(config, {
  components: ["tamagui"],
  config: "./tamagui.config.ts",
  outputCSS: "./tamagui-web.css",
});

Step 03:

So we are going to use the expo-constants package to enable Storybook integration. Install the package by running the following command:

npm install expo-constants

Step 04:

Rename your app.json file to app.config.js and export the object as follows:

module.exports = {
    ...all the property from your app.json file [Means take the json file object and paste it here]
}

Step 05:

Now add an extra object with a property to control the value for running the project with Storybook or without it. Here's it will be:

module.exports = {
    ...,
    "extra": {
     "storybookEnabled": false
    }
}

This configuration allows you to run the project with Storybook by setting the storybookEnabled variable to true. If it's not set or set to any other value, Storybook will not be included.

Step 06:

So now how we can do that? We will write a little bit node js script to modify our app.config.js file. So let’s create e file called update-config.js and paste this code:

const fs = require("fs");
const path = require("path");

const configFilePath = path.join(__dirname, "app.config.js");
const configContent = fs.readFileSync(configFilePath, "utf-8");

const newValue = process.argv[2] === "true"; // Get the desired value from the command-line argument

const updatedContent = configContent.replace(
  /storybookEnabled:\s*(true|false)/,
  `storybookEnabled: ${newValue}`
);

if (updatedContent !== configContent) {
  fs.writeFileSync(configFilePath, updatedContent);
  console.log(`app.config.js updated with storybookEnabled set to ${newValue}`);
} else {
  console.log(`app.config.js already has storybookEnabled set to ${newValue}`);
}

If you don’t understand this code, no worries, you can ignore it. Essentially, it reads the app.config.js file and replaces the storybookEnabled value with the provided value when we run the script. It will change it to true or false based on our command.

Step 07:

Now time to change our package.json file script command to do everything by command not manually. So replace your script object with this one into your package.json file:

{
    "start": "node update-config.js false && expo start -c",
    "android": "node update-config.js false && expo start --android -c",
    "ios": "node update-config.js false && expo start --ios -c",
    "web": "node update-config.js false && expo start --web -c",
    "test": "jest --watchAll",
    "storybook-generate": "sb-rn-get-stories",
    "storybook:start": "node update-config.js true && expo start -c",
    "storybook:android": "node update-config.js true && expo start --android -c",
    "storybook:ios": "node update-config.js true && expo start --ios -c",
    "storybook:web": "node update-config.js true && expo start --web -c"
}

Make sure you replace all the code inside the script object.

If you run it now, your project should run without giving any errors. However, we haven't iterated on the Storybook setup yet. Before that, let’s check if everything is working fine. Run the project using npm start. It may show some warnings like this:

The following packages should be updated for best compatibility with the installed expo version:
  package name
  package name
  package name
Your project may not work correctly until you install the correct versions of the packages

That means you have to install those specific packages to run the application properly. Make sure you install all the packages mentioned with the exact version numbers specified. This warning may appear because your Expo project version is higher than the versions of the dependencies used by Storybook. After installing those packages, run the project again to check if it builds successfully.

Now, let’s add the code to swap between running our app with Storybook and without it.

Step 08:

Go to the ./app folder and create a file called storybook.tsx. This file will render the Storybook on a specific route. Our plan is that if we enable Storybook by setting the storybookEnabled flag to true and run the Storybook initialization command, then the route should render Storybook. If we don't enable Storybook, it will redirect to the home page. Inside this file, add the following code:

import { Redirect } from "expo-router";
import StorybookUIRoot from "../.storybook";
import Constants from "expo-constants";

export const isStoryBookEnabled =
  Boolean(Constants?.expoConfig?.extra?.storybookEnabled) === true;

export default function StorybookScreen() {
  if (isStoryBookEnabled) {
    return <StorybookUIRoot />;
  }

  return <Redirect href="/" />;
}

So here, we are accessing the storybookEnabled variable from the extra object using expo-constants and checking whether it's set to true or not. If it's true, then we will render the Storybook. Now, we are almost done! To run the project with Storybook, use this command:npm run storybook:start. You may encounter an error similar to this:

Unknown named module: "@storybook/global"
...bla bla

To resolve this error, you need to remove an addon from the Storybook plugin. Navigate to your .storybook folder and open the main.ts file. Replace the existing code with the following:

import { StorybookConfig } from "@storybook/react-native";

const main: StorybookConfig = {
  stories: ["./stories/**/*.stories.?(ts|tsx|js|jsx)"],
  addons: ["@storybook/addon-ondevice-controls"],
};

export default main;

Here we just removed '@storybook/addon-ondevice-actions’ this plugin from the storybook config. Now run the project again with npm run storybook:start And the error should gone!

Now let’s change a little bit on our./(tabs)/index.tsx file with following code:

import { Airplay } from "@tamagui/lucide-icons";
import { Button, Heading, View } from "tamagui";
import { router } from "expo-router";
import { isStoryBookEnabled } from "../storybook";

export default function TabOneScreen() {
  return (
    <View flex={1} alignItems="center" justifyContent="center">
      <Heading size={"$10"} color={"violet"}>
        Tab One
      </Heading>

      <Button
        color={"violet"}
        backgroundColor={"black"}
        alignSelf="center"
        icon={Airplay}
        mt={10}
        size="$6"
      >
        Button
      </Button>

      {isStoryBookEnabled ? (
        <Button
          color={"violet"}
          onPress={() => {
            router.replace("/storybook");
          }}
          backgroundColor={"black"}
          alignSelf="center"
          icon={Airplay}
          mt={10}
          size="$6"
        >
          Go to Storybook
        </Button>
      ) : null}
    </View>
  );
}

Here we are checking whether our Storybook is enabled or not. Based on that, we have added a Storybook button.

Now you can test both scenarios:

With Storybook:

npm run storybook:start

Without Storybook:

npm start

So if you don’t want Storybook to show, simply run the command without Storybook enabled! For the production bundle, ensure that you remove Storybook from the bundler. You can refer to this guide to remove Storybook from the bundle Check it out

Feel free to reach out if you need more insights. Thank you for taking the time to read this article. Happy coding!

Written with 🧡 by Hasan