Finance Portfolio with Nuxt + DaisyUI + Firebase

This is a full stack finance portfolio Nuxt application to track your assets based on your transactions which demonstrates Firebase Authentication and Firestore database.

Home page contains a list of all the assets with their current value fetched from CollectAPI. And it's the only page that is accessible without logging in.

When user logs in (using Google Auth) he'll get addtional functionality like adding new assets, editing existing ones, deleting them and also adding new transactions. Transaction data will be stored in Firestore database.

On "My Portfolio" page user can see a summary of his holdings with his total balance, profit/loss and a list of all his transactions.

View Demo | Report Issue | Request Feature | @webceyhan

Requirements

You need to install the Node.js and npm package manager first.

Create an account on CollectAPI and subscribe to "Gold, Currency and Exchange API" to obtain your free API key.

Recommended IDE: VSCode + Volar

Installation

1. Clone the repository.

   git clone https://github.com/webceyhan/nuxt-finance-portfolio.git

2. Get inside the cloned project folder.

   cd nuxt-finance-portfolio

3. Install NPM packages.

   npm install

4. Rename .env.sample to .env and fill in your config vars.

   # collectapi
   COLLECT_API_KEY="--CollectAPI KEY HERE--"
   
   # firebase
   NUXT_PUBLIC_FIREBASE_API_KEY="--FIREBASE API KEY HERE--"
   NUXT_PUBLIC_FIREBASE_AUTH_DOMAIN="--FIREBASE AUTH DOMAIN HERE--"
   NUXT_PUBLIC_FIREBASE_PROJECT_ID="--FIREBASE PROJECT ID HERE--"
   NUXT_PUBLIC_FIREBASE_STORAGE_BUCKET="--FIREBASE STORAGE BUCKET HERE--"
   NUXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="--FIREBASE MESSAGING SENDER ID HERE--"
   NUXT_PUBLIC_FIREBASE_APP_ID="--FIREBASE APP ID HERE--"

Usage

You can use following commands to do various task with the project.

npm start               # run application
npm run dev             # start development server
npm run build           # build for production
npm run preview         # preview built app

Take a look at the other scripts in package.json

Development

You have to run both backend server and frontend development server concurrently to be able to develop application properly.

npm run dev

Building

Build the frontend application for production.

npm run build

To preview, you still have to run the backend server which will serve the app and provide socket connectivity in order to make it work properly.

npm run preview

Deployment (Firebase)

A GitHub Action will automatically deploy the project to Firebase on every push.

See the details in .github/workflows/firebase.yml

1. Create a Firebase account.

2. Install the firebase-cli globally.

   npm install -g firebase-tools

3. Initialize new Firebase project inside your project folder.

   firebase init
   
   # Configure files for Firebase Hosting and (optionally) st up GitHub Action deploys
   
       # ? What do you want to use as your public directory? dist
   
       # ? Configure as a single-page app (rewrite all urls to /index.html)? Yes
   
       # ? Set up automatic builds and deploys with GitHub? Yes
   
       # ? File dist/index.html already exists. Overwrite? No
   
       # ? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) webceyhan/vue-splendid-food
   
       # ? Set up the workflow to run a build script before every deploy? Yes

   This will create a new application on Firebase cloud, a firebase.json configuration for hosting and a GitHub Action for deployment, inside your project folder.

   It also generates the required secrets in your GitHub repository as follows;

   FIREBASE_SERVICE_ACCOUNT_VITE_FINANCE_PORTFOLIO

4. Set the following secrets on your GitHub repository:

   COLLECT_API_KEY
   NUXT_PUBLIC_FIREBASE_API_KEY
   NUXT_PUBLIC_FIREBASE_APP_ID
   NUXT_PUBLIC_FIREBASE_AUTH_DOMAIN
   NUXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
   NUXT_PUBLIC_FIREBASE_PROJECT_ID
   NUXT_PUBLIC_FIREBASE_STORAGE_BUCKET

References

• Nuxt
• Vue.js
• DaisyUI
• Tailwind CSS
• Bootstrap Icons
• Firebase CLI
• Firebase Auth
• Firestore
• Vercel
• GitHub Actions
• CollectAPI