Pokemon App

Description

This repository contains a responsive PWA app called "Pokemon App" developed with React and React Bootstrap. It fetches Pokemon information from the external Pokedex API and displays it on the page. The app uses Vercel for deployment.

Read more about:

• Pokedex API
• Vercel
• Progressive Web Apps

Features

1. The app has the following features:

• The app is responsive
• Progressive Web App
• Fetches and displays Pokemon data from the Pokedex API
• Users can click on the Pokemon button to display a modal window with the Pokemon's name, height, weight, and picture (front and back)
• If the API sends no front or back Pokemon picture, a placeholder image is shown for a better user experience
• Users can use the live search option to search for a Pokemon by name
• Users can click on the back to top button for quick navigation
• Displays a simple loading animation while the app fetches data

2. When installed like a Progressive Web App, it allows to:

• Resemble a native-app experience.
• Have an improved user experience
• Experience cross-platform compatibility
• Make use of faster loading times
• Use offline accessibility
• Have a smaller size than a native desktop app
• Access the app quickly via a mobile home screen, a Windows/Mac taskbar, etc

Read more about Progressive Web Apps

Technologies Used

• Javascript
• React.js
• Service Worker
• HTML5
• Ajax
• jQuery
• React Bootstrap
• CSS3
• Responsive design
• External API

Read more about the Progressive Web Apps here

Project Screenshot

Project In Use Preview

Please click on the video below to watch it

Project Dependencies

• React.js as a React library
• React Bootstrap for design/responsive design
• jQuery for interactivity / DOM manipulation
• Fetch and promise polyfills for older browsers' support
• External Pokedex API (for information about Pokemon)
• Vercel for deployment

External API

As mentioned, the app relies on the external Pokedex API: Pokedex API

Live Version

The App is live at pikalist.vercel.app/

Clone and Preview

To clone the app use the following command: console git clone git@github.com:yevheniiairapetian/pokemon-app Or download directly by clicking on <> Code button > Download ZIP. Make sure you have Node installed on your machine. To check if you have Node installed, run the node -v command in the terminal. If Node is not installed, use the preferred package manager:

• For npm on Windows, run the npm install nodejs command
• For Mac, run the brew install node command
• For Linux Debian/Ubuntu-based systems run the sudo apt-get install nodejs command
• For Red Hat/Fedora-based systems run the sudo yum install nodejs command

2. Then get back to the project folder and use the cd pokemon-app terminal command. Then run the npm i command (or similar, depending on the package manager) to install the project dependencies

3. After that, follow the scripts in the section below.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Contact:

Feel free to contact me via LinkedIn or
email or via the contact information on the website