This section explains the overall setup and configuration of the project, including what each key file does and how they work together to create a scalable Vue.js crypto tracker application.

<script setup>
import NavbarComponent from './components/NavbarComponent.vue';
import { useCoinsStore } from './store/coinsStore'
import { onMounted } from 'vue';

const coinStore = useCoinsStore()
onMounted(() => {
  coinStore.fetchCoins()
})
</script>

<template>
  <NavbarComponent />
  <router-view />
</template>

This is the main Vue component of the application. It acts as the root layout, where:

• The NavbarComponent is displayed at the top.

• The router-view renders the active page based on the current route.

• The onMounted() lifecycle hook loads cryptocurrency data when the app is initialized.

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.use(router)
app.mount('#app')

This is the starting point of the Vue application:

It creates the app instance.

Sets up Pinia for state management.

Registers Vue Router for navigation.

Mounts the app on the DOM element with id="app" in index.html.

export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'mainPurple': '#360750',
        'mainOrange': '#F46D22',
        'darkBlue': '#1B2028',
        'lightBlue': '#413E49',
        'textWhite': '#FFF',
        'textDark': '#292D32',
        'lightGray': '#737373',
        'logoBlue': '#406cfc'
      }
    },
  },
  plugins: [],
}

This file is used to:

• Enable TailwindCSS to scan your files and generate utility classes.

• Extend the default theme with custom colors for your app branding.

• Configure paths where Tailwind should look for class usage.

{
  "name": "cryptotracker",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.8.2",
    "chart.js": "^4.4.8",
    "firebase": "^11.6.0",
    "lightweight-charts": "^5.0.5",
    "pinia": "^3.0.2",
    "vue": "^3.5.13",
    "vue-chartjs": "^5.3.2",
    "vue-router": "^4.5.0",
    "vue3-carousel": "^0.14.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.5.3",
    "tailwindcss": "^3.4.17",
    "vite": "^6.2.0"
  }
}

This file includes:

• Project name, version, and type.

• All dependencies (libraries required to run the app).

• Dev dependencies (used during development like Tailwind, Vite).

• Scripts to run the dev server, build the app, and preview it.

If you ever want to check what packages your project is using — this is the place!

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: 'your-api-key',
  authDomain: 'your-auth-domain',
  projectId: 'your-project-id',
  storageBucket: 'your-bucket',
  messagingSenderId: 'your-id',
  appId: 'your-app-id'
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);

export { db, auth };

This file:

• Initializes Firebase in your app.

• Sets up Firestore (for database) and Firebase Auth (for authentication).

• Exports db and auth so they can be used in components and stores.

Make sure to replace sensitive keys with environment variables in production!

Follow these steps to set up the project on your local machine:

1. Clone the repository

git clone https://github.com/your-username/cryptotracker.git
cd cryptotracker

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Open the app in your browser

Open http://localhost:5173/ or the URL shown in your terminal.