This project is the Vue.js Bootcamp graduation project organized by Protein-Patika. The application is a real-time race of horses running in 8 different lanes on a straight route.

Overview

Protein Vue.js Bootcamp Final Case

Protein Vue.js Bootcamp Final Case

🛠️ Built With

🖋️ About

This project is the Vue.js Bootcamp graduation project organized by Protein-Patika. The application is a real-time race of horses running in 8 different lanes on a straight route. After pressing the start button, the countdown is shown and then the horses start the race from the starting point. The speed of the horses changes randomly during the race and the winner is determined by the luck factor. At the end of the race, a leaderboard opens and the ranking is shown.

💻 Project Views

Horse Image Horse Image Horse Image Horse Image

📝 Tasks

  • Horse running in 8 different lanes on a straight route.
  • Displaying the countdown when pressing the start button.
  • While running, their speed changes instantly within a certain range.
  • Having a leaderboard anywhere on the screen.
  • After the race is over, the results are shown in a list with lane numbers.
  • Race starts again when the restart button is clicked.
  • Using pinia and composition api.
  • Unit test.

🛠 Tech Stack

📕 Project Overview

  • assets/* - Static assets including images, fonts, and videos.
  • components/* - Components used throughout the application.
  • components/Shared* - Shared between all components
  • db/* - Files connected to firestore database.
  • router/* - Files for communication between pages used throughout the application.
  • services/* - File with functions used to extract data from Firestore and write data.
  • stores/* - Folder containing functions that will provide state management throughout the application.
  • test/* - Folder with tests performed with Vitest
  • views/* - All other static pages.

🎆 Project Screenshots

📫 Contact Address

github twitter linkedin

Getting Started

To get started you can simply clone this Vue-Protein-FinalCase.git repository and install the dependencies.

Clone the Vue-Protein-FinalCase.git repository using git:

git clone https://github.com/emircandemr/Vue-Protein-FinalCase.git

cd Vue-Protein-FinalCase.git

Install dependencies with this command:

npm install

Run the application with this command:

npm run dev

Project Video

bandicam.2022-10-30.20-38-08-523.webm

Support

If you like the application, do not forget to give a star 😊

Recommended IDE Setup

You might also like...
NoteHub is an online note sharing platform where users can edit notes with a versatile rich-text editor in a real-time collaborative environment.

NoteHub is an online note sharing platform where users can edit notes with a versatile rich-text editor in a real-time collaborative environment. NoteHub also provides notes sharing features between individuals or communities, and even more advanced features such as AI assistance, including content summarization, Q&A, voice to text transcription, and handwritten text recognition.

Coin-exange - This is a litle proyect make to practice, only show the value of cryptocoins in real time

platzi-exchange Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Dacxi Frontend Test Bitcoin historical and real-time quotes
Dacxi Frontend Test Bitcoin historical and real-time quotes

Dacxi Frontend Test Cotação histórica e em tempo real do Bitcoin 📸 Screenshots da aplicação: Linkedin | Email: [email protected] | (85) 98514

Reengen bootcamp homework2 hotel app using vue
Reengen bootcamp homework2 hotel app using vue

hotel-app Photos Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Chadmin is easy to use ClickHouse running query dashboard.
Chadmin is easy to use ClickHouse running query dashboard.

Chadmin Chadmin is easy to use ClickHouse running query dashboard. You can watch your currently running queries for the entire ClickHouse cluster and

Static website with tools running entirely on IPFS.

DreamLink DreamLink is a static website with tools running entirely on the decentralized P2P network: IPFS. There is no need to install an IPFS node o

Mina-Secret-Exchange: a zk-powered Smart Contract (Snapp) submission for the Mina Snapp Bootcamp 2021

Mina Snapp: Mina Secret Exchange https://mina.proxylabs.org/ Mina-Secret-Exchange is a zk-powered Smart Contract (Snapp) submission for the Mina Snapp

Este desafio serve para utilizar todos os conhecimentos do bootcamp aé aqui
Este desafio serve para utilizar todos os conhecimentos do bootcamp aé aqui

Projeto de desafio do Bootcamp Cataline A ideia e criar um projeto utilizando o aprendizado do bootcamp Diretivas do Vue VUEX Componentes Dinamicos Tr

Proof of Concept: Load any route into a modal with Inertia.js

Inertia Vue Modal POC I've copied the default Laravel Jetstream modal component for this demo. Blog post Proof of Concept: Load any route into a modal

Owner
Emircan DEMİR
Frontend Developer
Emircan DEMİR
Yu's graduation project

volunteer Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Custo

null 1 Jan 11, 2022
An exemplary real-world application built with Vue.js, Vuex, axios and different other technologies. This is a good example to discover Vue for beginners.

Vue.js codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API. Project demo is availa

Thinkster 4k Nov 24, 2022
The front-end is organized into VueJS components, which present information on the screen according to the reactivity triggered by user interactions

The front-end is organized into VueJS components, which present information on the screen according to the reactivity triggered by user interactions

Junia Winner 1 Jun 8, 2022
This is a version of Sigma Vue Project running inside a Laravel app with Inertia Js as a connection instead of Vue Router

About this project This is a version of Sigma Vue Project running inside a Laravel app with Inertia Js as a connection instead of Vue Router. Sigma Vu

Alexandre Unruh 7 May 14, 2022
This is the solution for Reengen Full Stack Bootcamp with Vuejs and Nodejs Week-3 Project

Vue Stock Market App This is the solution for Reengen Full Stack Bootcamp with Vuejs and Nodejs Week-3 Project. It is built with Vuejs by using Vue CL

null 3 Nov 14, 2021
The Vue SDK you need to interact with Storyblok API and enable the Real-time Visual Editing Experience.

@storyblok/vue The Vue SDK you need to interact with Storyblok API and enable the Real-time Visual Editing Experience. Note: This plugin is for Vue 3.

Storyblok 57 Nov 14, 2022
Tomato5 is a real-time collaboration tool.

Tomato5 is a real-time collaboration tool. It combines Pomodoro Technique with a team status share board. Homepage: http://tomato5.io Updates 1.3.0 Ne

Zhang Xin 241 Nov 3, 2022
NoteHub is an online note sharing platform where users can edit notes with a versatile rich-text editor in a real-time collaborative environment

NoteHub is an online note sharing platform where users can edit notes with a versatile rich-text editor in a real-time collaborative environment. NoteHub also provides notes sharing features between individuals or communities, and even more advanced features such as AI assistance, including content summarization, Q&A, voice to text transcription, and handwritten text recognition.

Boquan (Brian) Yin 15 Aug 16, 2022
TICE is a secure app for meeting up, sharing locations and locating friends and family in real-time.

TICE is a secure app for meeting up, sharing locations and locating friends and family in real-time. TICE allows live location sharing on iOS, Android and the Web. Privacy by Design and modern end-to-end-encryption protect the sensitive location data from others.

TICE Software 11 Nov 8, 2022
Easy implementation of real-time communication using WebRTC by using Firebase

Easy implementation of real-time communication using WebRTC by using Firebase

Honda Daiki 3 Mar 10, 2022