https://github.com/hansfigo/devcode-starter-svelte-figo

Devcode Starter Frontend Challenge Level 1 mengajak peserta untuk menyelesaikan tugas dasar: mendeploy aplikasi Hello World menggunakan SvelteKit.
https://github.com/hansfigo/devcode-starter-svelte-figo

frontend svelte sveltekit vercel

Last synced: about 2 months ago
JSON representation

Devcode Starter Frontend Challenge Level 1 mengajak peserta untuk menyelesaikan tugas dasar: mendeploy aplikasi Hello World menggunakan SvelteKit.

• Host: GitHub
• URL: https://github.com/hansfigo/devcode-starter-svelte-figo
• Owner: hansfigo
• Created: 2024-01-15T04:49:50.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-15T08:00:36.000Z (over 2 years ago)
• Last Synced: 2025-02-06T13:51:18.698Z (over 1 year ago)
• Topics: frontend, svelte, sveltekit, vercel
• Language: Svelte
• Homepage: https://devcode-svelte-starter-figo
• Size: 2.15 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Devcode Starter using Svelte Level 5

## Hasil Akhir yang Diharapkan

Peserta dapat membuat validasi pada field nomor telepon dan email sebelum melakukan proses submit data kontak yang akan dibuat atau dirubah

## Setup Environment

1. Download source code melalui link yang telah disediakan dari halaman assesment

2. Extract source code yang sudah terdownload pada perangkat anda

3. Buka source code yang sudah diextract menggunakan Code Editor, contoh Visual Studio Code

4. Jalankan `npm install` pada terminal

5. Jalankan `npm run dev` pada terminal

6. Akses `localhost:5173` pada browser

## Instruksi Pengerjaan

1. Selesaikan semua TODO yang terdapat pada file `components/InputContactForm.svelte`

2. Buat online repository di Github (Jika belum memiliki akun Github, silahkan daftar [disini](https://github.com/signup))

3. Push project ke online repository yang sudah anda buat

4. Deploy project ini ke Hosting yang anda miliki atau bisa juga menggunakan layanan hosting gratis seperti Vercel (Jika belum memiliki akun Vercel, silahkan daftar [disini](https://vercel.com/signup))

Untuk Dokumentasi API yang digunakan pada challenge ini dapat diakses [disini](https://documenter.getpostman.com/view/6584319/2s8Yt1rUtN).

## Teknologi yang Digunakan

1. [Svelte](https://svelte.dev/)

2. [SvelteKit](https://kit.svelte.dev/)

3. [Vite](https://vitejs.dev/)

4. [Axios](https://axios-http.com/docs/intro)

## Langkah-langkah membuat repositori baru di Github

1. Klik tombol **New** yang terletak di bawah username pada bagian kiri halaman utama

   ![Step 1](create-repo-steps/step-1.png)

2. Juga bisa klik pada ikon **+** yang ada di sebelah ikon notifikasi pada pojok kanan atas halaman utama

   ![Step 2](create-repo-steps/step-2.png)

3. Jika klik ikon **+**, maka langkah selanjutnya adalah pilih opsi **New Repository**

   ![Step 3](create-repo-steps/step-3.png)

4. Selanjutnya isi kolom **Repository name** dengan nama repositori yang akan dibuat

   ![Step 4](create-repo-steps/step-4.png)

5. Tambahkan deskripsi repositori pada kolom **Description**, langkah ini opsional

   ![Step 5](create-repo-steps/step-5.png)

6. Setelah itu, pilih opsi **Public** di bawah kolom **Description**

   ![Step 6](create-repo-steps/step-6.png)

7. Klik tombol **Create Repository** untuk membuat repositori baru di Github

   ![Step 7](create-repo-steps/step-7.png)

8. Setelah selesai, anda akan diarahkan ke halaman repo baru yang sudah dibuat sebelumnya. Silahkan ikuti langkah-langkah untuk clone repo yang sudah dibuat ke local anda

   ![Step 8](create-repo-steps/step-8.png)

## Langkah-langkah Deploy menggunakan Vercel

1. Klik tombol **Add New...** pada halaman dashboard vercel

   ![Step 1](deploy-steps/Step-1.png)

2. Pilih opsi **Project**

   ![Step 2](deploy-steps/Step-2.png)

3. Pilih opsi **Continue with Github** pada bagian **Import Git Repository**

   ![Step 3](deploy-steps/Step-3.png)

4. Klik tombol **Import** pada repository yang akan dideploy

   ![Step 4](deploy-steps/Step-4.png)

5. Klik tombol **Deploy** pada bagian **Configure Project**

   ![Step 5](deploy-steps/Step-5.png)

6. Tunggu proses build hingga deploy selesai

   ![Step 6](deploy-steps/Step-6.png)

7. Jika proses deploy berhasil, akan diarahkan ke halaman success seperti pada gambar di bawah ini. Lalu klik tombol **Continue to Dashboard** pada halaman success

   ![Step 7](deploy-steps/Step-7.png)

8. Klik tombol **Visit** pada halaman dashboard project untuk melihat hasil deploy

   ![Step 8](deploy-steps/Step-8.png)