Bana fena gözükmedi, bu tarz bir dosya yapısı çok kullanılıyor. Bence rahat çalışabiliyorsan kötü bir sistem değil. utility/service ve config klasörlerini de src klasörünün altına koyabilirsin. Onun haricinde testlerini göremedim, test yazacaksan (ki yaz, en azından utiliy/service dosyaların için) bileşenlerin olduğu klasörelere stili koyduğun gibi koyabilirsin.

Edit: Mantine de geleceğini gördüğüm açık kaynakı bir proje, henüz tam bakmadım ama güzel duruyor. React kullanıyorsan iş görür.

A non-serializable value was detected in the state

State içinde serileştirilemeyen bir veri bulundu, yani verdiğin veriyi muhtemelen metin haline getiremedi. localStorage'a kaydederken manuel bir şekilde metine dönüştürüp yine localStorage'dan okurken metinden istediğin veriye dönüştürürsen muhtemelen çözülür. JSON objesi bu iş için var.

window.localStorage.setItem('theme', JSON.stringify(state.theme))
/* ... */
let theme = JSON.parse(window.localStorage.getItem('theme'))

Düzenli şekilde değiştiriyorsan JWT'yi bir sıkıntı olmaz. Jetonlarına bir expiration date vermek mantıklı olabilir. Düzenli değiştirmiyorsan da yapılabilecek bir şey yok. Endüstri standardı şu anda localstorage gibi yerlerde saklamak. Güvenlik adına daha farklı şeyler yapabilirsin, 2 Factor Auth gibi.

İyelik eki için Tayfun hoca şöyle bir şey paylaşmıştı şu postta. Ama burdaki örnekler iyelik eki değil hâl ekleri. JavaScript'e düşerim diyorsan şöyle bir kütüphanem var, reklamını yapmış olayım.

Şimdi durum şöyle;

JavaScript'in çalışma biçimi biraz değişik. Kod tek bir thread'de çalıştığı için event-loop denilen bir mekanizmayla çalışıyor her şey.
Bunlar işin kompleks kısmı ama araştırma istersen diye yazayım dedim.

const axios = require('axios');

axios.get('https://jsonplaceholder.typicode.com/todos/1')
    .then(res => {
        console.log(res.data);
    });

Burada yazdığın kod yukarıdan aşağıya doğru tek tek ve komut komut çalışacak. Öncelikle axios kütüphanesi import edilecek ve axios.get
fonksiyonu çalışacak. Axios'un internet üzerinden gidip herhangi bir kaynağı çekmesi uzun bir olay olabilir, bilgisayar ne
kadar süreceğiniz bilemez (internet hızına göre değişir sonuçta). Bu yüzden programı dondurmamak amacıyla bu işlemi yedeğe alıp diğer
komutlara devam eder.

const axios = require('axios');
let resp = {};
axios.get('https://jsonplaceholder.typicode.com/todos/1')
    .then(res => {
        resp = res.data;
    });
console.log(resp);

Bu tarz bir yaklaşım mantıklı gelebilir sana ama sorununu çözmeyecektir. Sırayla komutları inceleyerek bakalım;

• Axios kütüphanesini import ettik
• resp adında bir değişken oluşturup, değerini boş bir nesneye atadık.
• axios.get() fonksiyonunu çalıştırdık. Bu fonksiyon Promise denen bir değer tipi döndürüyor.
  • Promise tipi süresini bilemeyeceğimiz asenkron işlemler için kullanılıyor.
  • Fonksiyon üzerinde .then() çalıştırabileceğin yeni bir nesne döndürüyor.
  • İşlem tamamlandığında da içindeki komutları gerçekleştiriyor. O yüzden .then() kısmının içinde yaptığın hiçbir şey henüz gerçekleşmeyecek
• resp nesnesini konsola yazdırıyoruz.
  • Konsol çıktısı boş bir nesne olacaktır çünkü nesne ile hiçbir şey yapmadık.
• axios.get() fonksiyonu tamamlandı ve gerekli kaynak hazır.
  • resp değişkenini gelen cevaba atadık.
  • Ancak bu noktada program çoktan bitti. Elimizde de herhangi bir değer kalmadı.

Event loop ile ilgili ilginç bir durum var. Her bir asenkron işlem bir kuyruğa eklenip uygulanabilecek en erken zamanda işleniyor. Yani
eğer internet üzerinden istediğin kaynağı ışık hızında bile çeksen .then() içindeki kısım programın bir sonraki tick'inde çalışacak.
Bu da programın bittiği kısma denk geliyor. Ne yaparsak yapalım, cevabı promise dönen bir fonksiyondan hemen sonra .then() kısmındaki
veriye ulamayız.

CEVAP ŞÖYLE;

Promise'i beklemen lazım. async/await anahtar kelimeleri burda işimizi görecek. Öncelikle .then() çağrısını kaldırıp await
anahtar kelimesi ile değiştireceğiz.

const axios = require('axios');

// then kısmındaki `res` değişkenini yukarı taşıyacağız.
const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1')
//            ^

Yapacağımız ikinci bir işlem daha var. await anahtar kelimesi özel bir sentaks oluşturuyor, bunu sadece async fonksiyonlarda
kullanabiliriz. async fonksiyonlar da sadece başında async anahtar kelimesini içeren fonksiyonlar. Bu yüzden programı bir
fonksiyonla sarmalayacağız.

Kodun son hali böyle olacak;

const axios = require('axios');

// asıl olayları sarmaladığımız fonksiyon
async function main() {
    const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
    console.log(res.data);
}

// son olarak fonksiyonu çalıştıralım.
main();

Muhtemelen değiştiremezsin. JavaScript kendi başına sunucundaki dosyaya ulaşamayacağı için React build aşamasında ortam değişkenlerini statik bir şekilde veriyor. O yüzden JSON dosyası kullanmanın güvenlik açısından pek de farklı olacağını zannetmiyorum.