Simple Dynamic Render List similiar to React Declarative Programming using Proxy Object in Vanilla.js

app.js

const list = document.getElementById('list')

const createCard = ({img: url, username}) => {
  const div = document.createElement('div')
  div.classList.add('card')
  
  const img = document.createElement('img')
  img.src = url
  
  const span = document.createElement('span')
  span.innerHTML = username
  
  div.prepend(img)
  div.append(span)
  return div
}

const cards = new Proxy({}, {
  set: (target, prop, value) => {
    console.log({target, prop, value})
    
    target[prop] = value
    list.append(createCard(value))
    
    return true
  } 
})

// simulate api requset
const mocks = [
    { 
      id: 1,
      img: 'https://github.com/hallexcosta.png',
      username: '@HállexCosta' 
    },
   { 
    id: 2,
    img: 'https://github.com/hallancosta.png',
    username: '@HállanCosta' 
  },
  { 
    id: 3,
    img: 'https://github.com/sibelius.png',
    username: '@ccseraphine' 
  },
  { 
    id: 4,
    img: 'https://github.com/lucasbadico.png',
    username: '@lucasbadio' 
  }
]

const addCardInList = (card) => {
  cards[card.id] = card
}

for (const mock of mocks) {
  addCardInList(mock)
}

document.getElementById('add').onclick = () => cards[Date.now()] =  { 
  img: 'https://github.com/hallexcosta.png',
  username: '@HállexCosta' 
}

index.html

<div id="container">
  <button id="add">Add new</button>
  <div id="list"></div>
</div>

proxy-map-adapter.js

class ProxyMapAdapter {
  cardsMap
  linkCardsIdWithCardIndex
  constructor({ cardsMap, linkCardsIdWithCardIndex }) {
    this.cardsMap = cardsMap
    this.linkCardsIdWithCardIndex = linkCardsIdWithCardIndex
  }

  setCard({ realCardId, publicCardId, data }) {
    this.linkCardsIdWithCardIndex.set(publicCardId, realCardId)
    this.cardsMap.set(realCardId, data)
  }

  getCardDataByRealCardId(realCardId) {
    return this.cardsMap.get(realCardId)
  }

  getCardDataByPublicCardId(publicCardId) {
    return this.cardsMap.get(this.linkCardsIdWithCardIndex.get(publicCardId))
  }

  getRealCardId(publicCardId) {
    return this.linkCardsIdWithCardIndex.get(publicCardId)
  }
}

style.css

html, body {
  background-color: #1f1f1f;
}

#container {
  border: 1px solid #2f2f2f;
  max-width: 500px;
  height: 400px;
  margin: 0 auto;
  
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#add {
  padding: 12px;
  border-radius: 12px;
  border: 0;
  font-size: 16px;
  font-family: Arial;
  font-weight: 600;
  outline: 0;
  background-color: #2f2f2f;
  color: white;
  
  margin: 20px;
  width: fit-content;
}

#list {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  gap: 12px;
  
  background-color: #3f3f3f;
  width: 100%;
}
.card img {
  width: 32px;
  height 32px;
  border-radius: 50%;
}

.card span {
  font-size: 16px;
  font-family: Arial;
  color: white;
  font-weight: bold;
}