ferriprasetya / machine-vision-frontend-assignment

Machine Vision Frontend Assignment

Overview

This assignment involves starting with a blank page and adding a table that makes calls to the Provided API. Your goal is to dynamically populate this table with data fetched from the API, showcasing your ability to work with React components, API calls, and modern frontend development practices.

Instructions

1. Fork the Repository: Begin by forking this repository. Then, create a new branch following the naming convention feature/test-[yourGitHubUsername].
2. Use Available Components: You are expected to utilize the existing components in the project for building your solution.
3. API Calls with TanStack Query: Make your API calls to the provided API using TanStack Query for efficient data fetching and state management.
4. Provided API: The API you will be using for this project is available at Machine Vision Datacore.
5. Endpoint: You should use /items/perusahaan_bei to complete this assessment
6. Authorization: You can obtain access_token by running storybook, go to Auth component, and logging in with the following credentials:

Email       :   [email protected]
Password    :   12345678

7. Objectives: Use provided Table component to list all data from mentioned endpoint.
8. Atomic Commits: Your commits should be atomic and follow the conventional commit format as outlined at Conventional Commits.
9. Pull Request: Once you have completed the assignment, create a pull request to the main repository's assessment branch for review.

Technology Stack

The project utilizes the following technologies, but you are not limited to these alone:

• Next.js 13: A React framework that enables functionality such as server-side rendering and generating static websites. For more information, visit Next.js Official Site.
• TypeScript: A superset of JavaScript that adds static types. Learn more at TypeScript's Official Site.
• MaterialUI: A popular React UI framework for designing visually appealing and responsive components. Get started at MaterialUI's Website.
• TanStack Query: A powerful library for handling server-state in React applications. Detailed documentation can be found at TanStack Query.
• Storybook: A tool for UI development that makes it easy to visualize different states of your UI components. Check it out at Storybook's Website.

HTTP Request /items/perusahaan_bei

Request

curl --request GET \
  --url 'http://datacore-dev.machinevision.global/items/perusahaan_bei?fields=id%2Ckode_saham%2Cnama%2Csektor_id.nama%2Ctanggal_listing' \
  --header 'Authorization: Bearer 7xkaCaJ2oRWXEO0r-bJtjTySKLqm0Bpn'

Response

{
  "data": [
    {
      "id": "08f32277-71ac-47f5-b68c-b773a5b0fc77",
      "kode_saham": "ASII",
      "nama": "PT Astra International Tbk",
      "tanggal_listing": "1990-04-04",
      "sektor_id": {
        "nama": "Diversifikasi"
      }
    },
    {
      "id": "681a288e-f6f5-4789-bf41-e7366df88253",
      "kode_saham": "BBCA",
      "nama": "PT Bank Central Asia Tbk",
      "tanggal_listing": "2000-05-31",
      "sektor_id": {
        "nama": "Keuangan"
      }
    },
    {
      "id": "99fbf104-30e6-4d0f-91d4-3f5cff2e69ee",
      "kode_saham": "TLKM",
      "nama": "PT Telekomunikasi Indonesia Tbk",
      "tanggal_listing": "1995-11-14",
      "sektor_id": {
        "nama": "Telekomunikasi"
      }
    },
    {
      "id": "bf1298e2-bd05-49f0-9248-3f7402ed85f1",
      "kode_saham": "UNVR",
      "nama": "PT Unilever Indonesia Tbk",
      "tanggal_listing": "1982-12-11",
      "sektor_id": {
        "nama": "Konsumen Barang"
      }
    },
    {
      "id": "d82fae84-f607-430f-a1a7-b6da9bc3c633",
      "kode_saham": "INDF",
      "nama": "PT Indofood Sukses Makmur Tbk",
      "tanggal_listing": "1994-07-14",
      "sektor_id": {
        "nama": "Makanan & Minuman"
      }
    }
  ]
}

Good luck with your assignment! We look forward to seeing your innovative solutions and your approach to tackling frontend challenges.