Noto

just for information, Noto name inspired by japanese "Noto" means a note.

Dicoding - Membangun Aplikasi Catatan Menggunakan React

Project ini adalah Submission dari Aplikasi Catatan Menggunakan React.

Link Dicoding: disini

Table of contents

• Noto
  • Dicoding - Membangun Aplikasi Catatan Menggunakan React
  • Table of contents
  • Overview
    • Screenshots
  • Dicoding Criteria
    • Kriteria Utama 1: Mampu Menampilkan Daftar Catatan
    • Kriteria Utama 2: Mampu Menambahkan Catatan
    • Kriteria Utama 3: Mampu Menghapus Catatan
    • Kriteria Opsional 1: Terdapat Fitur Pencarian Catatan
    • Kriteria Opsional 2: Terdapat Limit Karakter pada Input Judul Catatan
    • Kriteria Opsional 3: Terdapat Fitur Arsip Catatan
  • Stack Technology Used
  • Getting started
  • List Scripts or Commands
    • Link
  • Developed By
  • Thanks to

Overview

Untuk bisa lulus dan mendapatkan sertifikat dari akademi ini, Anda harus mengerjakan tugas yakni membuat proyek “Aplikasi Catatan Pribadi” sesuai kriteria yang tertera. Tim Reviewer akan memeriksa pekerjaan Anda dan memberikan reviu pada proyek yang Anda buat.

Screenshots

Dicoding Criteria

Buatlah aplikasi web menggunakan React yang dapat menambahkan dan menghapus catatan. Agar lebih jelasnya, berikut 3 kriteria utama pada “Aplikasi Catatan Pribadi” yang harus Anda buat.

Kriteria Utama 1: Mampu Menampilkan Daftar Catatan

• Aplikasi harus mampu menampilkan daftar catatan dengan data awal (initial data) yang telah kami sediakan.
• Memanfaatkan state component untuk menyimpan data catatan.
• Menggunakan teknik array map untuk menampilkan daftar catatan.

Kriteria Utama 2: Mampu Menambahkan Catatan

• Aplikasi harus mampu menambahkan data catatan baru.
• Memanfaatkan controlled component dalam membuat form input.
• Data catatan disimpan cukup pada memori saja (akan hilang jika browser di-refresh).
• Data catatan yang disimpan merupakan objek JavaScript dengan struktur berikut

{
  id: number | string,
  title: string,
  body: string,
  archived: boolean,
  createdAt: string,
}

Berikut contoh data riilnya:

{
  id: 1,
  title: "Babel",
  body: "Babel merupakan tools open-source yang digunakan untuk mengubah sintaks ECMAScript 2015+ menjadi sintaks yang didukung oleh JavaScript engine versi lama. Babel sering dipakai ketika kita menggunakan sintaks terbaru termasuk sintaks JSX.",
  archived: false,
  createdAt: '2022-04-14T04:27:34.572Z'
},

Catatan: Untuk id pada tiap catatan yang disimpan haruslah unik. Tips dalam menetapkan nilai untuk adalah Anda bisa memanfaatkan nilai timestamp. Untuk mendapatkan nilai timestamp di JavaScript cukup mudah, cukup dengan menuliskan expressions +new Date().

Kriteria Utama 3: Mampu Menghapus Catatan

• Aplikasi harus menyediakan tombol hapus untuk menghapus data catatan yang disimpan.
• Terdapat conditional rendering di mana bila tidak terdapat data catatan, maka UI menampilkan pesan “Tidak ada catatan” atau pesan apa pun yang mengindikasikan data catatan kosong.

Selain kriteria utama, terdapat kriteria opsional yang yang dapat Anda penuhi agar mendapat nilai yang lebih tinggi.

Kriteria Opsional 1: Terdapat Fitur Pencarian Catatan

• Aplikasi memiliki fitur pencarian catatan berdasarkan kata kunci yang dimasukkan, dengan ketentuan:
  • Jika kolom pencarian tidak kosong, maka aplikasi hanya menampilkan daftar catatan yang judulnya mengandung kata kunci yang dimasukkan.
  • Jika kolom pencariannya kosong, maka aplikasi menampilkan seluruh catatan.
• Memanfaatkan controlled component dalam membangun fitur catatan.

Kriteria Opsional 2: Terdapat Limit Karakter pada Input Judul Catatan

• Aplikasi dapat mencegah pengguna untuk memberikan judul catatan lebih dari 50 karakter.
• Menggunakan state dalam melimitasi, bukan atribut maxlength.
• Menampilkan jumlah karakter tersisa yang dapat digunakan oleh pengguna.

Kriteria Opsional 3: Terdapat Fitur Arsip Catatan

• Aplikasi memiliki fitur arsip catatan.
• Aplikasi harus menyediakan tombol arsipkan/pindahkan untuk mengarsipkan atau memindahkan catatan dari arsip.
• Daftar catatan yang diarsip harus ditampilkan pada tempat terpisah dari catatan yang tidak diarsip.

Stack Technology Used

• Vite with React, TypeScript and absolute imports.
• Tailwind CSS v3 with a basic reset for form styles and a Prettier plugin that automatically sorts classes.
• Use ESLint, stylelint and Prettier on VSCode and before you commit with Husky and lint-staged.
• PWA with 17/17 Lighthouse score.
• Write unit and integration tests with Vitest and Testing Library.
• Write e2e tests with Cypress.
• GitHub Actions for automatic dependency updates, CodeQL Analysis, running tests and code coverage with Codecov.
• Deploy to Vercel with pre-configured SPA fallback.

Getting started

Clone this repo to your machine:

• Install pnpm first if you doesn't have pnpm

npm i -g pnpm

• Then, install the dependencies:

pnpm install

• Run the projects

pnpm dev

List Scripts or Commands

• pnpm dev - start a development server with hot reload.
• pnpm build - build for production. The generated files will be on the dist folder.
• pnpm preview - locally preview the production build.
• pnpm test - run unit and integration tests related to changed files based on git.
• pnpm test:ci - run all unit and integration tests in CI mode.
• pnpm test:e2e - run all e2e tests with the Cypress Test Runner.
• pnpm test:e2e:headless - run all e2e tests headlessly.
• pnpm format - format all files with Prettier.
• pnpm lint - runs TypeScript, ESLint and Stylelint.
• pnpm validate - runs lint, test:ci and test:e2e:ci.

Link

visit at (note.afif.dev)

Developed By

Developed by me (Afif Abdillah Jusuf), visit my web at afif.dev for more contact information

Thanks to

Dicoding. (dicoding.com)

Jadilah developer expert menggunakan kurikulum standar internasional dari principal technology owner seperti Google, Microsoft, AWS, IBM, dan LINE