Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/naufal-yafi/bluebird-frontend_task

Frontend React Developer Intern | PT. Blue Bird Tbk
https://github.com/naufal-yafi/bluebird-frontend_task

coverage-testing mui react

Last synced: 15 days ago
JSON representation

Frontend React Developer Intern | PT. Blue Bird Tbk

Host: GitHub
URL: https://github.com/naufal-yafi/bluebird-frontend_task
Owner: naufal-yafi
Created: 2024-01-05T12:52:37.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2024-01-07T01:43:06.000Z (about 1 year ago)
Last Synced: 2024-11-11T19:47:10.287Z (2 months ago)
Topics: coverage-testing, mui, react
Language: TypeScript
Homepage:
Size: 271 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Frontend React Task

I use React from Vite Typescript with UI Component from Material UI (MUI).  

[🎥 Video Preview App](https://youtu.be/IyI6kwAb6nc)

# Table of Content

- [Frontend React Task](#frontend-react-task)

- [Table of Content](#table-of-content)

  - [Technology Used](#technology-used)

  - [Requirements](#requirements)

  - [Preview App](#preview-app)

  - [Task](#task)

    - [1. Home Page](#1-home-page)

      - [1.1 Category list](#11-category-list)

      - [1.2 Vehicle list](#12-vehicle-list)

    - [2. Search Page](#2-search-page)

    - [3. Vehicle Detail Page](#3-vehicle-detail-page)

      - [3.1. This page will display if the user clicks on](#31-this-page-will-display-if-the-user-clicks-on)

    - [My Book Page](#my-book-page)

    - [Wishlist Page](#wishlist-page)

## Technology Used

Technology: [React + Vite + Typescript](https://vitejs.dev/guide/)  

UI Component: [Material UI](https://mui.com/material-ui/)

[[Table of Content](#table-of-content)]

## Requirements

[✓]  Redux  

[✓]  React Hook (useState, useEffect, useRef)  

[✕]  Unit Test (coverage 50%)  

[✕]  Hybrid App SSR and CSR _(big plus)_  

[✕]  AMP Pages _(big plus)_  

[[Table of Content](#table-of-content)]

## Preview App

[🎥 Video Preview App](https://youtu.be/IyI6kwAb6nc)

[[Table of Content](#table-of-content)]

## Task

### 1. Home Page

[✓] The page should get data from the API below to populate 2 sections  

[✓] The menu bar should always hang on top of the page

#### 1.1 Category list

[✓] Should be able to slide/wipe  

[✓] Should display category images from API  

[✓] Should display its name  

#### 1.2 Vehicle list

[✓] Should display unique random vehicle vehicles and image  

[✓] Should display like status (love icon)

[[Table of Content](#table-of-content)]

### 2. Search Page

[✓]  In the beginning, the page displays a search text box  

[✓]  When the user types vehicle in the search text box, vehicles detail displayed

[[Table of Content](#table-of-content)]

### 3. Vehicle Detail Page

[✓] The share button and like button should be able to use. No need to get/update data from API  

[✓] The button “share” will copy the URL to the clipboard and the user can paste it later

[✓] The button “Like” will add the vehicle to the list of wishlist vehicles. Allowed to store in state management  

[✓] The button “Book” will add the vehicle to the list of purchased history. Allowed to store in state management

#### 3.1. This page will display if the user clicks on

[✓] One of the vehicles listed on the home page  

[✓] One of the vehicles on the search result page  

[✓] One of the vehicles listed on the MyBook history page  

[✓] One of the vehicles listed on the wishlist page  

[[Table of Content](#table-of-content)]

### My Book Page

[✓] This page will display if the user clicks on the MyBook menu at the above navigation on the Home page  

[✓] The list of booked vehicles will grow if the use clicks “Book” on the vehicle detail page  

[✓] If the user clicks on one of the vehicles on the list it will bring to the detail vehicle page    

[✓] The back button will bring you back to the previous page  

[[Table of Content](#table-of-content)]

### Wishlist Page

[✓] This page will display if the user clicks on the Wishlist menu at the bottom navigation on

the Home page  

[✓] The list of wishlist vehicles will grow if use click “Like” on the love icon or vehicle detail 

page  

[✓] If the user clicks on one of the vehicles on the list it will bring to the detail vehicle page  

[✓] The design is similar to the Purchase History page with the title “Wishlist

[[Table of Content](#table-of-content)]