Evanstore

Evanstore adalah aplikasi katalog belanja responsif yang dibuat menggunakan Next.js, TypeScript, TanStack Query, dan Redux Toolkit.

Aplikasi mengambil data produk dari Fake Store API dan menyediakan katalog produk, halaman detail, pencarian, filter, serta shopping cart yang tetap tersimpan setelah browser di-refresh.

Demo

• Live Demo: https://evanstore.vercel.app
• GitHub Repository: https://github.com/morvn/evanstore

Fitur

• Menampilkan daftar produk dari Fake Store API
• Halaman detail produk
• Loading skeleton
• Error handling dan tombol retry
• Pencarian produk
• Filter berdasarkan kategori dan harga
• Sorting produk
• Tampilan grid dan list
• Load more products
• Shopping cart menggunakan Redux Toolkit
• Cart tetap tersimpan setelah refresh
• Halaman cart
• Responsive untuk desktop, tablet, dan mobile
• Mobile navigation
• Newsletter form demo

Teknologi

• Next.js App Router
• React
• TypeScript
• Tailwind CSS
• TanStack Query
• Redux Toolkit
• React Redux
• Fake Store API
• ESLint

API

Daftar produk:

https://fakestoreapi.com/products

Detail produk:

https://fakestoreapi.com/products/{id}

Route

Route	Fungsi
/	Halaman katalog
/?q=	Hasil pencarian
/products/0	Detail produk
/cart	Shopping cart

Instalasi

Clone repository:

git clone https://github.com/morvn/evanstore.git

Masuk ke folder proyek:

cd evanstore

Install dependency:

npm install

Jalankan development server:

npm run dev

Buka aplikasi:

http://localhost:3000

Perintah yang Tersedia

Development:

npm run dev

Pemeriksaan ESLint:

npm run lint

Pemeriksaan TypeScript:

npx tsc --noEmit

Production build:

npm run build

Menjalankan production build:

npm run start

Pengelolaan State

TanStack Query digunakan untuk mengelola data produk dari API, termasuk:

• caching;
• loading state;
• error state;
• retry request.

Redux Toolkit digunakan untuk mengelola shopping cart, seperti:

• menambahkan produk;
• mengubah quantity;
• menghapus produk;
• menghitung jumlah produk;
• menyimpan cart ke localStorage.

Cart Persistence

Data cart disimpan pada browser menggunakan key:

evanstore.cart.v1

Cart dipulihkan setelah aplikasi berjalan di browser. Aplikasi menunggu proses hydration selesai sebelum menulis ulang data ke localStorage.

Pendekatan ini mencegah cart lama tertimpa oleh state kosong saat aplikasi pertama kali dimuat.

Pencarian

Pencarian produk menggunakan URL parameter:

/?q=jacket#products

Pencarian dilakukan berdasarkan:

• nama produk;
• kategori;
• deskripsi.

Penggunaan URL membuat hasil pencarian tetap tersedia setelah refresh dan dapat dibagikan.

Harga

Harga dari Fake Store API dikonversi ke Rupiah menggunakan nilai demonstrasi:

1 USD = Rp16.000

Nilai ini bukan kurs real-time dan hanya digunakan untuk tampilan aplikasi.

Struktur Folder

src/
├── app/
│   ├── cart/
│   ├── products/
│   ├── layout.tsx
│   ├── page.tsx
│   └── providers.tsx
├── components/
│   ├── cart/
│   ├── catalog/
│   ├── layout/
│   ├── product/
│   └── search/
├── features/
│   └── cart/
├── lib/
└── store/

Validasi Sebelum Deployment

Jalankan:

npm run lint
npx tsc --noEmit
npm run build

Pastikan semua perintah selesai tanpa error.

Deployment

Aplikasi dapat di-deploy menggunakan Vercel.

Setelah deployment, periksa route berikut:

/
/products/1
/cart
/?q=jacket

Pastikan:

• produk berhasil dimuat;
• gambar tampil;
• pencarian dan filter bekerja;
• Add to Cart bekerja;
• cart tetap tersedia setelah refresh;
• tidak ada error pada browser console.

Keterbatasan

• API hanya menyediakan satu gambar untuk setiap produk
• Kurs Rupiah bukan kurs real-time
• Checkout dan pembayaran belum tersedia
• Login pengguna belum tersedia
• Newsletter belum terhubung ke backend
• Cart hanya tersimpan pada browser yang digunakan