prolog app

Repositori ini adalah bagian dari simulator pekerjaan React di mana Anda bekerja di lingkungan dev profesional dengan alat dan alur kerja canggih. Anda mengimplementasikan tugas berdasarkan desain yang mulai dari perbaikan bug kecil ke fitur penuh. Pada dasarnya, Anda belajar banyak hal langsung yang biasanya Anda alami setelah Anda bergabung dengan tim React Profesional.

Aplikasi

Aplikasi ini merupakan alat pencatatan dan pemantauan kesalahan yang mirip dengan Sentry atau Rollbar. Anda dapat menemukan versi yang digunakan dari cabang utama di prolog.profy.dev. Catatan: Anda harus mengklik tautan "Dasbor" di sudut kanan atas untuk melihat aplikasi seperti yang ditunjukkan pada tangkapan layar di bawah ini.

Tur Basis Kode

Tonton video ini untuk tur melalui basis kode.

Memulai

1. Klon & instal

Proyek ini dibangun dengan modul Next.js, TypeScript, Cypress & SCSS. Untuk mulai mengerjakan proyek, pertama -tama klon repositori pada mesin lokal Anda dan pasang dependensi.

npm install

2. Buat file .env

Salin file .env.template ke file baru yang disebut .env . File ini berisi variabel lingkungan yang diperlukan yang disuntikkan oleh Next.js melalui paket dotenv .

3. Jalankan server pengembangan

Akhirnya, jalankan server pengembangan:

npm run dev

Sekarang Anda dapat membuka http: // localhost: 3000 dengan browser Anda untuk melihat aplikasi.

Ekstensi kode vs yang disarankan

Proyek ini menggunakan alat seperti Eslint, Stylelint, dan Prettier. Untuk memaksimalkan alat -alat ini, disarankan untuk menginstal ekstensi yang sesuai. Untuk kode vs itu adalah:

• Eslint
• Stylelint
• Lebih cantik
• SCSS Intellisense (misalnya untuk pelengkapi otomatis variabel SCSS)
• React CSS Modul (misalnya untuk membuka definisi kelas CSS dengan CMD/CTRL + Klik dan peringatkan tentang nama kelas yang tidak ada)

Ekstensi Stylelint resmi mungkin memerlukan beberapa penyesuaian file settings.json Anda. Jika tidak berhasil di luar kotak, coba tambahkan baris ini:

 "css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.validate": ["css", "scss"],

Ekstensi tambahan yang menurut saya sangat berharga

Kode Pemeriksa Ejaan Gitlens SVG GitHub Copilot (Dibayar)

Tes

Proyek ini ditutupi dengan tes cemara. Meskipun sebagian besar tes untuk aplikasi produksi saat ini ditulis dengan React Testing Library, Cypress adalah pilihan terbaik untuk memulai pengujian. Saat Anda baru menguji awalnya bisa sangat rumit dan terasa seperti berada di lingkungan dev yang benar -benar baru.

Cypress membuatnya lebih mudah untuk memulai pengujian. Anda masih harus terbiasa dengan cara pengkodean baru tetapi berkat debugging UI yang luar biasa mudah dan sangat mirip dengan apa yang Anda gunakan dari browser Anda.

Untuk menjalankan tes Cypress di mesin lokal Anda, gunakan perintah ini:

npm run cypress

Buku cerita

Storybook adalah alat yang hebat untuk mendokumentasikan komponen Anda dan mengujinya secara visual secara terpisah. Untuk membuka buku cerita

npm run storybook