https://github.com/apfirebolt/vue-crypto-info

A cryptocurrency information portal created using cryptogecko API using Vue 3, Tailwind CSS, Headless UI and Pinia
https://github.com/apfirebolt/vue-crypto-info

coingecko-api cryptocurrency headlessui pinia tailwindcss vue vue3

Last synced: 2 months ago
JSON representation

A cryptocurrency information portal created using cryptogecko API using Vue 3, Tailwind CSS, Headless UI and Pinia

• Host: GitHub
• URL: https://github.com/apfirebolt/vue-crypto-info
• Owner: Apfirebolt
• License: mit
• Created: 2024-12-13T13:18:35.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-22T21:57:45.000Z (over 1 year ago)
• Last Synced: 2025-04-02T13:25:23.707Z (about 1 year ago)
• Topics: coingecko-api, cryptocurrency, headlessui, pinia, tailwindcss, vue, vue3
• Language: Vue
• Homepage:
• Size: 1.83 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# Crypto Info App - Vue, Vite + Tailwind

It is a cryptocurrency info app based on the CoinGecko API. Please check the API docs here http://docs.coingecko.com

## Technologies Used

A front-end app created in Vue using Tailwind css and Headless UI

![Vite](https://img.shields.io/badge/-Vite-%23F766?style=for-the-badge&logo=vite&logoColor=white)

![JavaScript](https://img.shields.io/badge/javascript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)

![Tailwind CSS](https://img.shields.io/badge/-Tailwind%20CSS-%2338B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)

![Vue JS](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D)

## Getting started

The project uses Vite build tool for lighting-fast modern single-page application development. It is expected to have Node installed on your system. Then, run the conventional npm commands to see the project in action.

```

npm install

npm run build

npm run dev

```

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur

## Ecosystem

| Package        | Purpose                |

| -------------- | ---------------------- |

| Vue-router     | For routing in Vue     |

| Pinia          | For Vue store          |

| Tailwind CSS   | For CSS Styles         |

| Headless icons | For icons to be used   |

| Express        | Serving Vue build      |

| Headless UI    | For dynamic components |

## Project Screenshots

Would be added later as there might be UI changes under plan.

## Screenshots

Here are some screenshots of the Crypto Info App:

![Trending Page](./screenshots/1.png)

*Trending Page*

![Exchanges Page](./screenshots/2.png)

*Exchanges Page*

![Coins Page](./screenshots/3.png)

*Coins Page*

![Home Page](./screenshots/4.png)

*Home Page*

Home page also shows the price of the selected ticker in USD and INR through a modal powered by Headless UI components.

## Checking Updates

Check if there are updates available for NPM packages used in this project.

---

```

npx npm-check-updates

npx npm-check-updates -u

npm i

```

## Issues

No issues as of now, issues would be added here to be addressed later.

## Changelog

- December 2024 : Initial Release with basic features from cryptocurrency search page.

## License

[MIT](https://opensource.org/licenses/MIT)

Copyright (c) 2024-present, Amit Prafulla (Apfirebolt)