https://github.com/mancuellofran/landing-metrics
Landing Page with Vue 3 using currency API and download with Excel
https://github.com/mancuellofran/landing-metrics
d3js hexagonal-architecture tyoescript vuejs
Last synced: 10 months ago
JSON representation
Landing Page with Vue 3 using currency API and download with Excel
- Host: GitHub
- URL: https://github.com/mancuellofran/landing-metrics
- Owner: mancuellofran
- Created: 2023-08-18T01:08:27.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-18T08:37:26.000Z (almost 3 years ago)
- Last Synced: 2025-07-13T15:04:59.407Z (11 months ago)
- Topics: d3js, hexagonal-architecture, tyoescript, vuejs
- Language: Vue
- Homepage: https://landing-metrics.netlify.app/
- Size: 274 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Landing Metrics
Built following the **Hexagonal Architecture** pattern with **Vue.js** and **TypeScript** to ensure separation of responsibilities, ease testing and keep business logic decoupled from external details.
## 👀 Demo
- [Landing Page on Netlify](https://landing-metrics.netlify.app/)
## 📘 Architecture and patterns
This project follows the Hexagonal Architecture pattern, which allows a clear separation between business logic and external technical details. This facilitates adaptability, testing and code maintenance.
**Folder distribution**
``bash
src/
|-- adapters/
| |-- DataAPIAdapter.ts
| |-- LocalStorageAdapter.ts
|
|-- domain/
| |-- usecases/
| |-- calculateVariation.ts
| |-- FetchAndProcessDollarData.ts
|
|-- ports/
| |-- IDataAPIPort.ts
|
|-- ui/
| |-- assets/
| | |-- images/
| | |-- ...
| |
|-- views/
|-- Landingpage.vue
|-- Description.vue
|-- Services.vue
|-- References.vue
|-- Triangles.vue
|-- DollarChart.vue
|
|-- tests/
| |-- e2e/
| | |-- ...
| |-- unit/
| | |-- ...
|
``
## 🚀 Quick start
1. **Proyect Documentation**
Make sure you have `yarn` installed. If you don't have it, you can download it from [here](https://classic.yarnpkg.com/en/docs/install/). Then, install the project dependencies:
``bash
yarn install
``
2. **Local development**
To start a development server with hot reloading:
``bash
yarn serve
``
This will compile and serve your project, showing changes in real time.
3. **Production**
When you are ready to create a production version:
``bash
yarn build
``
This will optimize and minimize the compiled files in the dist folder.
## 🧪 Test
Este proyecto cuenta con pruebas unitarias y end-to-end para asegurar la calidad y funcionalidad del código.
- Unit test
We use Jest for unit testing. Run the tests with:
``bash
yarn test:unit
``
- Test E2E
E2E tests are performed using Cypress. You can run them with:
``bash
yarn test:e2e
``
## 🛠️ Tools and configuration
- Linter
Make sure your code follows best practices and automatically fixes detected problems:
``bash
yarn lint
``
## 📖 Additional Resources
- [Adobe XD](https://xd.adobe.com/view/7a960ded-077f-4cf0-a0b1-e7538530864f-2fc5/specs/)
- [Landing Page on Netlify](https://landing-metrics.netlify.app/)