PokeApp Front

PokeApp Front is a front-end application for interacting with Pokémon data. It is built with React and provides a user interface for displaying information about Pokémon, including their species, types, abilities, and weaknesses.

Installation

To get started with the PokeApp Front, clone the repository and install the required dependencies.

Prerequisites

Before you begin, ensure that you have the following installed on your local machine:

• Node.js (v18 or higher recommended)
• npm or yarn
• TypeScript (for building the project from source)

Steps

1. Clone the repository:

   git clone <repository-url>
   cd pokeapp-front

2. Install the dependencies:

   npm install

TypeScript Setup

The project is written in TypeScript. If you want to contribute or modify the code, you will need to install TypeScript and its dependencies.

1. Install TypeScript:

   npm install -g typescript

2. Build TypeScript files: Compile the TypeScript files into JavaScript.

   npm run build

Development

Once the dependencies are installed, you can run the project in development mode.

• Start: Run the development server with Parcel and watch for changes:

  npm start

  The app will be available at http://localhost:3000.

Production

• Build: Build the production-ready version of the app:

  npm run build

This will create the optimized build in the dist folder.

Scripts

The project includes several npm scripts for common tasks:

• Start: Starts the development server with live reloading:

  npm start

• Build: Build the production-ready application:

  npm run build

Dependencies

This project uses the following key dependencies:

• React: The JavaScript library for building user interfaces.
• SWR: React Hooks library for data fetching and caching.
• Axios: Promise-based HTTP client for making requests to external APIs (PokeAPI).
• Tailwind CSS: Utility-first CSS framework for building custom designs.
• Parcel: Web application bundler for fast development.

Development Dependencies:

• TypeScript: TypeScript compiler for building the project.
• PostCSS: Tool for transforming CSS with JavaScript plugins.
• Autoprefixer: A PostCSS plugin to add vendor prefixes to CSS.
• PostCSS Plugins: Various plugins like postcss-nested, postcss-preset-env, and others for enhancing CSS workflow.
• Prettier: Code formatter to maintain consistent code style.
• ESLint: Linter for identifying and fixing problems in JavaScript/TypeScript code.

Configuration

The application uses the following tools and services:

• React: For building the user interface.
• Parcel: For bundling the application with hot module replacement.
• Tailwind CSS: For styling the app with utility-first CSS classes.

Author

Developed by rmauro@gmail.com.