After being introduce to VanJS, I thought it would be interesting to build an application to review some bank transactions. Some features would be to:
- Display a list of bank transactions
- Import transaction via a CSV file
- Edit memo and tags for a transaction
- Removing a transaction.
Some nice-to-have:
- Search and filtering transactions
- Charts
- Reports
Having a strong background in VueJS and TypeScript, you might see some similar approach find in VueJS, like Views, Components, Router, and Stores. Also, I am a strong advocate for TypeScript. So use it, love it :-)
For this project, we are using SCSS along with the Bulma CSS library. Bulma is loaded via CDN provide by CloudFlare.
IMHO, Views components are the same as routes. When you hit the 'About' page from the URL, you are displayed with the 'About' component. Under the src/routes directory, you will find both routing logic and view components.
Component at the router/view level might be asynchronous. The best way to handle was to test for a typeof Promise and use the "Await" library provided in the VanJS-UI kit.
NOTE: VanJS-UI kit is NOT used in this project. I only copied the "Await" method. See
src/lib/await.ts.
Oftentimes, components might be a shell that is usable. One example of this is a Modal. Modal is a window that appears over all other windows and can display various types of content. "Modal-Frame" in this project, uses props, slot, and emitters. See src/components/modal-frame.ts
- Props use to pass in data from the parent component to the child component (Modal-Frame).
- Slot is the HTML content to display in the body of the Modal-Frame.
- Emitter is the action triggered by the child component (Modal-Frame) back to the parent component.
VanJS is able to maintain a reactive state. This makes is easy to create a central store that allows all components to read and write data from a single-source-of-truth. To keep things clean, the store is broken into module and are namespace. See src/stores/index.ts.
To get things moving, HTTP client is a wrapper around Fetch API with the attempt to closely match Axios client (as far as general use). The "swagger-client" is the controller for sending/receiving requests. So the "swagger-client" might act a API middleware before calling the LocalDB.
LocalDB is a library for CRUD operations to the browser's local-storage.
Once the actual API is ready, we should be to easily switch from LocalDB to API endpoints.
See a better way to achieving something or features that would be useful, submit a pull-requests!
MIT