Next.js + Tailwind CSS + Redux

Kitap Katalog Uygulaması

Canlı Site

• Redux
• Tailwindcss
• TypeScript
• Next.js
• Figma
• Vercel

Giriş yapma sayfası ve kayıt olma sayfası içerir. Giriş yapma sayfası, bir e-posta adresi ve şifre gerektirir. Kayıt olma sayfası ise, kullanıcının ad-soyad, telefon numarası, e-posta adresi ve şifre bilgilerini gerektirir. Bu formlarda, gerekli validasyonlar yapılmıştır. Bu sayfaların arkaplanında kullanılan görsel, figma üzerinden çizilmiştir.

Validasyonlar:

• Email kontrolü
• Parola alfanumeric 6 ile 20 hane arası kontrolü
• Parola tekrar uyuşmazlık kontrolü
• Telefon numarası maskeleme işlemi
• Geçerli telefon numarası kontrolü

Kullanıcı kayıt durum sorgulaması

• Kayıt Ol sayfasından yönlenen kullanıcının access-token değerini tarayıcı üzerindeki document.cookie storage üzerinde token key olarak saklıyoruz. Sayfayi Login sayfasına router.push ile yönlendiriyoruz.
• access-token değeri olmayan kullanıcı Login sayfasına erişemez.
• access-token değerine sahip kullanıcı Login olurken "Remember Me" checkbox'ını onaylarsa eğer localstorage üzerinde bu değeri true olarak saklıyoruz.
• access-token ile remember-me değerine sahip kullanıcılar doğrudan router.push ile /products sayfasına yönlendirilirler.

Figma üzerinden gradient geçişi ve ellips ile gerekli tasarım yapılmıştır.

Nasıl Kullanılır

Bu repoyu indirip aşağıdaki komutları kullanarak kendi localinizde kurabilirsiniz. İsterseniz repo açıklaması kısmında Vercel üzerinden deploy ettiğim linke ulaşabilirsiniz.

yarn install

yarn run dev