Giter VIP home page Giter VIP logo

sib_react_005_fp1's Introduction

Views

logo

NewsUp

Final project 1 - Kelompok 1

Aplikasi yang kami buat adalah website news yang berjalan di pada browser desktop. Dalam konten website memuat konten berita yang terkini dan terbaru seputar indonesia, programming, covid-19, sport, teknologi dan entertainment dengan tetap memperhatikan sisi pengguna.

Lebih lengkap terkait konten projek ini
  1. Design UI Concept: Blutarism
  2. Font: Lora, Serif
  3. Tab Pages:
    • Indonesia
    • Programming
    • Covid-19
    • Sport
    • Teknologi
    • Entertainment
  4. Component features:
    • Save
    • Like
    • Search
  5. Behavior: dark & light theme
  6. Modal: More (About Team Developer in Footer)
  7. Loading Card
  8. Pagination
  9. Error message in section page if fetching data error

ย 

Status

Kamis, 20 Oktober 2022 | 13:15 - 14.30 WIB

  • Instruktur oleh Bpk. Arif Setiawan

๐Ÿ‘จโ€๐Ÿ’ป Tim Member

  • Muhammad Irfan Zidni (RCTN-KS05-002)
  • Muhaemin Iskandar (RCTN-KS05-001)
  • Vika Alpiana (RCTN-KS05-004)

โšกPresentasi

  1. PowerPoint โœ…
  2. Management Project Nation โœ…
  3. Desain Figma โœ…
  4. Panduan Penggunaan โœ…
  5. Coding โœ…
    • Setup code
    • Install Library
    • Structur Projek
    • Component
    • Page
    • Database - Local Storage
  6. Demo Aplikasi โœ…

ย 

๐Ÿ“œ Instruksi Projek

Screenshot-from-2022-10-20-19-55-57

Jika ingin melihat semua instruksi dari Hacktiv8 klik disini


ย 

๐Ÿ“š Panduan Penggunaan

  1. Pertama kita jalankan dulu kodingan di visual studio code dengan cara masukkan di cli
npm i && npm run dev
  1. Kemudian kita buka link localhost yang ditamplikan di cli menggunakan browser
  2. Pada halaman pertama kali muncul kita akan berada pada page kategori Indonesia.
  3. Jika ingin mencari berita coba masukkan inputan di search bar-nya
  4. Pada Header-nya juga terdapat tombol swaper untuk mengganti tema website, silahkan dicoba.
  5. Pada card news-nya terdapat tombol like, dan jika ingin menyimpan berita coba klik tombol save pada berita yang ingin disimpan maka akan muncul di page saved yang bisa diakses dengan klik tombol save di header.

ย 

๐Ÿ’ป๏ธ Demo Aplikasi

Demo gif

atau

Klik disini


ย 

๐Ÿ“ Catatan

  • Untuk sekarang ini masih berbasis desktop, belum sepenuhnya responsive
  • News API yang digunakan masih versi development, jadi data API-nya hanya bisa dipakai pada localhost dan terdapat beberapa batasan lainnya.

ย 

Top Library and Tools:

react tailwind vite redux rtk figma

sib_react_005_fp1's People

Contributors

mhinhub 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.