Table Of Contents

• Description
  • Demo
• Tech Stack
  • Server Side
  • Client Side
• Screenshots
• Local Building
• Config
• Future Enhancements
• How to Contribute
• License

Vue Expenses

A simple expenses tracking application built with VueJs and .NET

### Demo

Vue Expenses

- Username: test@demo.com

- Password: test

Please note that you can change the theme in the settings page and the data on the demo website will be reset at regular intervals

Tech Stack

Server Side

• .NET 5.0 for server side API
• Fluent Validation
• CQRS
  • MediatR
  • Entity Framework Core on SQLite.
  • Dapper for querying
• Swashbuckle.AspNetCore for Swagger
• ASP.NET Core JWT Bearer Authentication for JWT authentication with support for refresh tokens.
• Serilog for logging
• Reference architecture ContosoUniversity

Client Side

• VueJs for client application
• Vuex with Vuex-persistedstate for state management
• Vue-router for client routing
• Axios for HTTP requests
• Vuetify as component framework
• Lodash for client side utility
• Vue-echarts (Echarts) for charting

Screenshots

Dashboard

Expense Listing

Stats

Settings

Profile

Mobile View

• Dashboard
• Stats

Local Building

Server

• Install .NET Core SDK
• Go to vue-expenses-api folder and run dotnet restore and dotnet build
• Run dotnet run to start the server at http://localhost:5000/
• You can view the API reference at http://localhost:5000/swagger

Client

• Go to vue-expenses-client folder and run npm install
• Run npm run serve to start the client at http://localhost:8080/
• Included database is seeded with dummy data and you can use email: test@demo.com and password: test to login

Config

Server

ConnectionStrings

• DefaultConnection: Data Source=App_Data/expenses.db
  • Where the sqlite db file is located, this can be changed in appsettings.json file

JwtSettings

• SecurityKey: A super secret long key to encrypt and decrypt the token
• Issuer: Issuer
• Audience: Audience
  • The key, issuer and audience values to generate a jwt token, this can be changed in appsettings.json file

PasswordHasher

• Key: Secret key to encrypt passwords
  • The key to encrypt the passwords, this can be changed in appsettings.json file

Client

• VUE_APP_BASE_URL: http://localhost:5000/

  • Base url to connect to the API, this can be changed in the .env file

• productionSourceMap: false

  • Generates source map file when building for production, this can be changed in vue.config.js file

• outputDir: commented out by default

  • Where the built files will be copied over, this can be changed in vue.config.js file

• assetsDir: commented out by default

  • Where the built minified css/js files will be copied over, this path is relative path from the outputDir, this can be changed in vue.config.js file

Future Enhancements

• Check project To do list

How to Contribute

1. Clone repo git clone https://github.com/simplyvinay/vue-expenses.git
2. Create a new branch: git checkout -b new_branch_name
3. Make changes and test
4. Submit Pull Request with description of changes

License

MIT