Welcome to Mustafa Ishaq's demonstration repository for Fox News. This application pulls in data from https://dummyjson.com/products
and parses the information into the view. This application also manages application state via a store made with Pinia for Nuxt.
![image](https://private-user-images.githubusercontent.com/16247040/251510044-ed25692b-b22d-49cc-86a8-bc89891e0151.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mjg4ODQ5MTEsIm5iZiI6MTcyODg4NDYxMSwicGF0aCI6Ii8xNjI0NzA0MC8yNTE1MTAwNDQtZWQyNTY5MmItYjIyZC00OWNjLTg2YTgtYmM4OTg5MWUwMTUxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDEwMTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMDE0VDA1NDMzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTNjMGY0ZjRjY2IxMTRhNjk4YTkyNDMwZTM1NmY3OGEyMzNjZDI0MzBiMTBlNzg0MGM4NWUxMDAwYTE0MjE5OGQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.mqKFDWyi0CmXrawZyKT4UFoGbTvuH0eWSuynkIKexfQ)
- Vue 3 using the Nuxt 3 framework
- State management using Pinia
- Uses built-in
useFetch
composable to retrive data from an external API - Fetched data is passed down as a prop from main App component to a child component
There is an additional Shopping cart feature which allows the user to:
- Add/remove items from the cart
- View the name & individual cost for each item
- View the number of items added & total price for these items
I was careful not to add too many dependencies, as indicated by the instructions: I have avoided adding packages like Material UI, TailwindCSS or SASS since it would mean adding more overhead.
Make sure to install the dependencies:
yarn install
Start the development server on http://localhost:3000
:
# yarn
yarn dev
Build the application for production:
yarn build
Locally preview production build:
# yarn
yarn preview
Moosecodes