https://github.com/gioudi/seller-images-contest-vue-typescript

Project with the purpose to display a list of images based on the client search and pretend a contest between sellers giving them 3 point once you click on its image until a seller get 20 points
https://github.com/gioudi/seller-images-contest-vue-typescript

Last synced: 6 days ago
JSON representation

Project with the purpose to display a list of images based on the client search and pretend a contest between sellers giving them 3 point once you click on its image until a seller get 20 points

• Host: GitHub
• URL: https://github.com/gioudi/seller-images-contest-vue-typescript
• Owner: gioudi
• Created: 2024-06-13T10:12:11.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-07-09T00:31:27.000Z (4 months ago)
• Last Synced: 2024-07-10T04:27:23.798Z (4 months ago)
• Language: SCSS
• Homepage: https://imagenes-mundo.netlify.app/
• Size: 254 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Image test

Hi there!

I hope you are doing well. In this project, you can find a feature to consume an API and displays a list of sellers and images based on the customer's wish.

For frontend, I used Vue and Vuex. As a developer always looking to improve the code quality, I have integrated TypeScript and ESLint as well.

## Links

- [Demo](https://imagenes-mundo.netlify.app/)

## Features

- Image Search: Users can search for inspiring images using a search term.

- Invoice Creation: Users can create invoices by filling out a form with required details.

- Dynamic Data Fetching: Integrates with external APIs to fetch and display data.

## Technologies 💻

- Vue 3

- TypeScript

- Vuex

- SCSS

- Vue Router

- Axios

- Vue3 Carousel

## Author

- **Sergio Penagos** 🔥

  - [LinkedIn](https://www.linkedin.com/in/analyst-sergio-penagos)

  - [GitHub](https://github.com/gioudi)

  - [GitHub2](https://github.com/SergioVass)

  - 

## Installation

### Prerequisites

- Node.js (version 14.x or higher recommended)

- npm (version 6.x or higher)

1. Clone the repository: `git clone https://github.com/gioudi/alegra-test-vue-typescript.git`

2. Navigate to the project directory: `cd alegra-test-vue-typescript`

3. Install dependencies:

    `npm install`

4. Build prod:

    `npm run build`

5. Lint and fix files

    `npm run lint --fix`

## Usage

### Search for Images

- Navigate to the search page.

- Enter a search term in the input field.

- Click the "Buscar" button to fetch images.

### Select a winner

- Navigate to list of images

- Vote the best image

- If a seller get 20 points, the game finish

### Create an invoice

- Navigate to the invoice creation page.

- Fill out the form with the required details.

- Click the "Crear factura" button to submit the form.

## Strcuture

- seller-images-contest-vue-typescript/

  - public/

  - src/

    - assets/

    - components/

      - CarouselFile.vue

      - ErrorFile.vue

      - LoadingFile.vue

    - store/

      - index.ts

      - modules/

        - images.ts

        - invoices.ts

    - views/

      - LandingPage.vue

      - ImageList.vue

      - InvoiceForm.vue

    - App.vue

    - main.ts

    - router/

      - index.ts

  - .gitignore

  - package.json

  - README.md

  - tsconfig.json

## License

This project is licensed under the MIT License. See the LICENSE file for more information.