Playing with Vue.js
You can see an example of this project in this url https://auctions.idavinci.net
To test the app, please follow the next steps:
Using SSH: git clone https://github.com/ajmasia/simple_auctions_app.git
Ussing HTTPS: git clone [email protected]:ajmasia/simple_auctions_app.git
| Commad | Description |
|---|---|
npm i |
Install project dependences |
npm run serve |
Run app in dev mode |
npm run build |
Build app |
npm run test:unit |
Run app tests |
npm run test:unit:dev |
Run app testis in dev mode |
npm run lint |
Run linter tool to fix code issues |
This project it's a simple auction application. As a buyer, you have to enter the maximum price you are willing to pay for a product, and as a seller, you have to enter the minimum price for which you are willing to sell the product. Finally, the app will show your the result in a simple popup.
If you are in the middle of an auction and return to the home, the user receives a notification.
This project use the OpenWeather API to get cities weather data. You will need a valid API key to use it. Currently the project use a setTimeout to simulate a Delay while the app receive new data and can show an spinner. Ideally, make the call to the api at the beginning of the app.
Before run the app, you have to install all project dependences and set the config file renaming the example.config.js to config.js:
export const appConfig = {
openWeatherAPIKey: '',
openWeatherAPIUrl: 'http://api.openweathermap.org/data/2.5/',
coords: {
lat: null,
long: null,
},
units: 'metric',
tempUnit: 'Cº',
lang: 'es',
currency: 'EUR',
currencyDigits: 2,
}To get the data from Huesca, you need to config this coords:
{
lat: 42.1382,
long: -0.4081,
},This project use the next tecnologies:
- Vue.js as project core technology.
- Vuex to project state management.
- Vue router to app routing.
- Vuelidate to validate forms.
- Vuex-i18n to project localization.
- Vue Boostrap to project components.
- v-animate-css to use css animations
- eslint to find and fix problems in your JavaScript code
- Prettier to code format
- Husky to prevent bad code before push code to the repo
- Refactor some code parts.
- Add some app test.
- Initial app version includes localization using Vuex-i18n to project localization.