Asset Management Application | Test Case

Mini SPA to fetch assets, infinite scroll, CRUD app...

Live Demo

Visit the link: Asset Management Application - https://asset-management.isari.me/

Tech Stack

Backend

• PHP v8.2
• Composer v2.6
• Laravel v10.x
• MySQL v8

Frontend

• Frontend Bundler: Vite
• Frontend Framework: React 18
• API by me
• UI: new JoyUI v5.0.0-beta.10 by MUI
• Data Fetching Lib: TanStack Query v4 (formerly React Query)
• Chart: ChartJS
• Time Format: DayJS
• Form Lib: Formik
• Form Validation: Yup
• Custom Styling: TSS - CSS in TS
• Linting Utility: ESLint
• Code Formatter: Prettier
• VCS: Git
• Deployment: Vercel
• NodeJS version: 18.17.0
• Package Manager: Yarn v1.22

FE Test in local environment With PRODUCTION API

CORS policy is configured on production API to test only FE of this project with the Vite's localhost configuration. In other saying: Production API allows the requests from http://localhost:5173/

But you need to get .env variables from me to test.

• Clone repo:

git clone https://github.com/pribrahimsari/asset-management-app.git

• Terminal: Open the web-client folder:

cd web-client

• Install dependencies:

yarn install

• Create .env.local file at root:

  • You can copy or rename .env.local.example file already available

• Get Your env variables from me and paste it to your .env.local file

  • Final .env.local file should look like:

VITE_API_URL=<<API_URL>>
VITE_API_VERSION=<<API_VERSION>>

• Run:

yarn start

• Visit the link on your favorite browser: http://localhost:5173/
  • Note: Vite uses port 5173 port

Fullstack Test in local:

Backend architecture was not in the scope of this task case. Please meet the requirements for Backend Tech Stack written above on your local pc Please follow the instructions on Laravel 10.x documentation pages for the commands: composer install and php artisan serve

Project Requirements

1. Asset Addition:

• Create an interface that allows users to add new assets.
• Include fields for attributes such as name, description, type, and addition date.
• Use an "Add" button to add assets.

2. Asset Viewing:

• Display the added assets as a list.
• Each asset should include attributes like name, description, type, addition date, and "View" or "Delete" buttons.
• A home screen to list the first 20 assets and when the user scrolls down to the end of the list it loads automatically the next 20 assets.

3. Asset Deletion:

• Implement functionality that allows users to remove assets from the list.
• Deleted assets should be removed from the list.

4. Asset List Status:

• Show users the total number of assets and the count of each asset type.

5. Data Management:

• Use an appropriate data management strategy to store assets.
• Ensure that assets are saved and can be retrieved when the application is reloaded. Consider options like local storage, browser storage, or a database.

6. User-Friendly Interface:

• Create a clean, well-organized user interface to enhance the user experience.
• Style your application using CSS or a CSS framework, such as Bootstrap.

7. Optional Advanced Features:

• Enable assets to be sorted by type, addition date, or priority.
• Allow users to add tags or notes to assets for customization.
• Write tests to ensure the functionality of the application.