A Web Application built on Laravel + Vue. Based on the Pokemon API

Overview

This project is a Pokemon Application based on the API provided by https://pokeapi.co/.

Overview

This application, built primary on Vue JS with a back-end of PHP Laravel, is an attempt to suffice the specifications indicated as follows:
  • Make a web app using Laravel + Vue with the following requirements:- User Authentication and Sign-up
  • Once the user is logged in, they will see all the available pokemon from https://pokeapi.co/ API
  • The user can choose their favorite pokemon from the list of pokemon.
  • The user can choose 3 pokemon that they like.
  • The user can choose 3 pokemon that they hate.
  • The user can see the list of other users, their favorite liked, and hated pokemon.
  • The project must then be contained in a git repository (Github/GitLab/bitbucket/etc.).
  • The user must be able to update his first name, last name, and birthday.
  • Feel free to add more fields that you like.
  • Feel free to create your own design (showcase your design skills).
  • Feel free to choose the CSS/front-end UI library of your choice.

Installation

  • Clone this repo: https://github.com/ryanarcel/ryanarcel-PokemonAPI-VueJS-Laravel.git
  • Run composer install to install Laravel dependecies.
  • Run npm install to install Vue and other Node packages.
  • Database Setup:
    Option 1: Import database provided in the SQL folder. Create your .env file. The database name is laravel-vue.
    or
    Option 2: Create .env file and use your preferred database name. Run php artisan migrate.
  • Run php artisan serve to start the Laravel backend, and npm run dev for Vue
  • If you chose option 1 on the database setup, these are some pseudo user accounts for the application:

Necessary Versions:

  • Vue 3
  • Axios 0.25
  • PHP 8
  • Laravel 9
  • Boostrap 5

Screenshots:

Tags: Vue JS, Laravel, Boostrap 5, Full-Stack Development, Pokemon API

Developed by: Ryan Arcel Galendez, MIT

You might also like...
A Single-Page Application CRUD (create, read, update, delete) project built on vuejs, vuetify frontend components, and json-server api mock

todovue Versão 3 do aplicativo todovue, feito inteiramente em componentes Vuejs Essa aplicação está sendo criada com base no desafio proposto em sala

Rick-and-morty-vue - App web de Rick And Morty utilizando Vue 3 - Composition API, Vuex, API Rest
Rick-and-morty-vue - App web de Rick And Morty utilizando Vue 3 - Composition API, Vuex, API Rest

Rick And Morty utilizando Vue 3 - Composition API, Vuex, API Rest Project setup npm install Compiles and hot-reloads for development npm run serve C

Vue startup application template that uses ASP.NET Core API layered architecture at the back-end and JWT based authentication
Vue startup application template that uses ASP.NET Core API layered architecture at the back-end and JWT based authentication

Nucleus Web API startup template with a Vue Client application. Requirements Vue CLI v3.x or later. Nodejs v10.x or later. Visual Studio 2019 v16.3 or

An application / authentication starter kit frontend in Vue.js 3 for Laravel Breeze.

Laravel Breeze - Vue.js 3 Edition Inspiration This project was inspired by the Breeze Next.js project. 🏝️ Introduction This repository is an implemen

Form object to use with Vue components for sending data to a Laravel application using axios.

Form Object Important: This project still active, feel free to clone, open issues or ask for help Form Object is a simple layer on top of axios, it un

Model statistics dashboard for your Laravel Application
Model statistics dashboard for your Laravel Application

Laravel Model Stats Model statistics dashboard for your Laravel Application This Laravel packages gives you a statistic dashboard for you Laravel appl

Breeze-nuxt - An application / authentication starter kit frontend in Nuxt.js for Laravel Breeze

Laravel Breeze - Nuxt.js Edition Introduction This repository is an implementing

Vue shop App is a simple web application built using Vue js, HTML, CSS, and JavaScript
Vue shop App is a simple web application built using Vue js, HTML, CSS, and JavaScript

Vue shop App is a simple web application built using Vue js, HTML, CSS, and JavaScript

This project shows how to dockerize web application build using Vue JS web development framework for Java Script programming language.
This project shows how to dockerize web application build using Vue JS web development framework for Java Script programming language.

vue-docker This project shows how to dockerize web application build using Vue JS web development framework for Java Script programming language. Requ

Comments
  • Column not found: 1054 Unknown column 'username' in 'field list'

    Column not found: 1054 Unknown column 'username' in 'field list'

    Hi.

    After migration and trying to register, I get this error in the registration form:

    SQLSTATE[42S22]: Column not found: 1054 Unknown column 'username' in 'field list' (SQL: insert into `users` (`username`, `email`, `password`, `updated_at`, `created_at`) values (kira, [email protected], $2y$10$SLXh6.KkkyuskXh3pGT5aOmqRebo76IJ.mY5sxPoN990HWRBakrvq, 2022-04-06 02:19:16, 2022-04-06 02:19:16))
    

    Please use migrations instead of an import of .sql file. Thank you.

    opened by Zhythero 2
Owner
Ryan Arcel Galendez
An IT academic and a software developer
Ryan Arcel Galendez
Laravel-weather-app - Laravel Weather App Built With Vue.js

Laravel Weather App Installation Clone the repo locally: git clone https://githu

Prodromos Pantos 0 Jan 14, 2022
Test pinia js, Vue3 and pokemon

Test pinia js, Vue3 and pokemon

Mikko 28 Aug 2, 2022
Genshin Impact themed collectible game with mechanics similar to Pokemon.

Pokaimon Pokaimon is a Genshin Impact themed collectible game with mechanics similar to Pokémon, made for the Supabase Launch Week 5 Hackathon. Play t

trobo 5 Oct 3, 2022
A simple weather app build with laravel, vuejs, algolia places api and open-weather api

A simple weather app build with laravel, vuejs, algolia places api and open-weather api

Susmoy Sen Gupta 11 Dec 4, 2022
Laravel Vue SPA, Bulma themed. For demo login use `[email protected]` & `password` -

Laravel Enso Hit the ground running when building your new Laravel SPA project with boilerplate and extra functionality out of the box! click on the p

Laravel Enso 1k Jan 3, 2023
Vuelar (Vue-Laravel) - A Laravel-powered pagination package for Vuejs

vuelar (Vue-Laravel) is a vue package that takes care of pagination for a Laravel-powered backend on a Single-Page Application. This package assumes familiarity with Laravel and requires vue-router for navigation.

SirMekus 10 Jul 31, 2022
View Laravel File-Based Logs In Web

View Laravel/Lumen logs in browser. Disclaimer This package is simply a lightweight web interface for Laravel and Lumen file-based logs. If you need a

mojtabaa hn 163 Sep 11, 2022
REST Countries API with color theme switcher is one of the Frontend Mentor challenges. It uses Composition API for Vue.js 3 and pulls data from the REST Countries API.

REST Countries API REST Countries API with color theme switcher is one of the Frontend Mentor challenges. It uses Composition API for Vue.js 3 and pul

Gizem Korkmaz 7 Sep 5, 2022
Web application in Vue to create a Trello-like site. Wordpress REST API.

Web application in Vue to create a Trello-like site. Wordpress REST API.

Tristan Fregona 3 Apr 3, 2022
It is a web application made with VueJs by using Covid19 API.

It is a web application made with VueJs by using Covid19 API.

Kavyansh Pandey 19 Oct 12, 2022