Git Product home page Git Product logo

hw-online-library-nextjs's Introduction

Online Library Website

Kontributor : Husnia Munzayana

Penjelasan Ringkas Program

Repository ini beeisi implementasi dari sebuah situs web online library yang memungkinkan pengguna untuk menjelajahi daftar buku serta melihat detail buku. Pengguna juga dapat melakukan operasi registrasi, login, dan logout. Selain itu, pengguna yang sudah masuk ke akun mereka memiliki akses tambahan, yaitu kemampuan untuk menambahkan, mengedit, dan menghapus buku.

Sisi frontend website ini diimplementasikan dalam folder ./frontend/ dan sisi backend pada folder /backend/. Untuk pengembangan backend, teknologi yang digunakan adalah NodeJS, Express.js, Prisma, dan database PostgreSQL. Sementara itu, pada sisi frontend, proyek ini NextJS dan Tailwind CSS untuk manajemen tata letak dan desain.

Fitur utama dari situs web ini meliputi:

  • Autentikasi Pengguna: Sistem autentikasi memungkinkan pengguna untuk login ke akun mereka atau register untuk membuat akun baru.
  • Tampilan daftar buku: Pengguna dapat melihat daftar lengkap buku yang tersedia.
  • Detail buku: Pengguna dapat melihat informasi rinci tentang setiap buku, termasuk judul, penulis, penerbit, tahun terbit, jumlah halaman, dan cover buku.
  • Manajemen CRUD Buku: Pengguna yang masuk dapat menambahkan buku baru ke perpustakaan, mengedit informasi buku yang sudah ada, dan menghapus buku yang tidak diperlukan lagi.

Pre-Requisite

  • Node.js
  • npm atau yarn
  • Express.js
  • Prisma
  • React
  • Vite
  • Tailwind CSS
  • Multer
  • NextJS

Cara Menjalankan Program

Back End

  1. Clone repository ini : https://github.com/munzayanahusn/HW-Online-Library-NextJS.git
  2. Buka terminal dan arahkan ke directory tempat clone
  3. Arahkan ke folder backend : cd backend
  4. Setup database masing-masing
  5. Buat file .env yang berisi:
 DATABASE_URL=postgres://username:password@localhost:5432/database_name
 JWT_SECRET=mysecretkey
  1. Install dependencies dengan perintah : yarn install
  2. Lakukan migrasi database dengan perintah : yarn migrate
  3. Jalankan perintah : yarn prisma generate
  4. Jalankan backend dengan perintah : yarn start
  5. Akan muncul tulisan "Server started on port 8000" yang menandakan server sudah berjalan.

Ubah username, password, dan database_name pada .env sesuai setup database yang telah dibuat. Anda juga dapat mengubah mysecretkey menjadi JWT_SECRET yang Anda inginkan

Front End

  1. Clone repository ini : https://github.com/munzayanahusn/HW-Online-Library-NextJS.git
  2. Buka terminal dan arahkan ke directory tempat clone
  3. Arahkan ke folder frontend : cd frontend
  4. Install dependencies dengan perintah : npm install
  5. Jalankan backend dengan perintah : npm run dev
  6. Akan muncul
    > [email protected] dev
    > next dev
    
      ▲ Next.js 14.2.3
      - Local:        http://localhost:3000
    
      ✓ Starting...
      ✓ Ready in 1790ms
    
    
    yang menandakan frontend website sudah berjalan.
  7. Buka website malalui http://localhost:3000/

Tampilan Halaman Website

Halaman Beranda

Screenshot HomePage Online Library Website

Halaman Detail Buku [Saat User Sudah Login]

Screenshot Book's Detail Online Library Website

Halaman Detail Buku [Saat User Belum Login]

Screenshot Book's Detail Online Library Website

Halaman Menambahkan Buku

Screenshot Create Book Online Library Website

Halaman Mengedit Buku

Screenshot Edit Book Online Library Website

Halaman Menghapus Buku

Screenshot Delete Book Online Library Website

Halaman Pendaftaran/Register

Screenshot Register Online Library Website

Tampilan Login

Screenshot Login Online Library Website

hw-online-library-nextjs's People

Contributors

munzayanahusn avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.