Configuration and Setup - BojkovaA/CryptoTracker GitHub Wiki

⚙️Configuration and Setup

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.

App.jsx - Root Component

<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.


main.js - App Entry Point

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.


tailwind.config.js – Tailwind Configuration

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.


package.json – Project Metadata & Dependencies

{
  "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!


firebase.js – Firebase Configuration

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!


Getting Started

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
  1. Install dependencies
npm install
  1. Start the development server
npm run dev
  1. Open the app in your browser

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


Dependencies & Tools Used

Package Purpose Documentation
Vue 3 UI framework vuejs.org
Vue Router Page routing router.vuejs.org
Pinia State management pinia.vuejs.org
Firebase Auth & Firestore database firebase.google.com
Chart.js Charting library chartjs.org
vue-chartjs Vue wrapper for Chart.js vue-chartjs.org
TailwindCSS Utility-first CSS framework tailwindcss.com
Vite Build tool vitejs.dev
vue3-carousel Carousel/slider component ismail9k.github.io/vue3-carousel
⚠️ **GitHub.com Fallback** ⚠️