Pokemon-App

Project Overview: The Pokemon Full-Stack Application allows users to interact with a database of Pokémon, performing CRUD (Create, Read, Update, Delete) operations. The application is structured into a frontend and a backend, ensuring a clean separation of concerns and maintainability.

Technologies used:

Frontend:

• React: A JavaScript library for building user interfaces. It allows for the creation of reusable UI components.
• React Router: A standard library for routing in React. It enables navigation among different views of various components in a React application.
• HTML/CSS: Standard web technologies used for structuring and styling the web pages.
• JavaScript: The programming language used for client-side logic.

Backend:

• Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine, used for server-side scripting.
• Express.js: A minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
• Axios: A promise-based HTTP client for the browser and Node.js used to make HTTP requests from the frontend to the backend.
• Json-Server: Used as a simple JSON file-based database to mock a RESTful API.

Database:

• The database is in JSON format, which is managed using Json-Server for ease of development and demonstration purposes.

API:

• The application utilizes the Pokémon Database API (pokeapi) to fetch Pokémon data.

Functionalities

• List Pokémon: The main page displays a list of all Pokémon users in the database. Each entry shows the Pokémon owner's name, Pokémon name, and ability.
• Add Pokémon: A form allows users to add new Pokémon to the database by entering the necessary details like owner name, Pokémon name, ability, initial position, speed, and direction.
• Edit Pokémon: Users can update the details of existing Pokémon entries.
• Pokemon Detail: Users can view specific pokemon details.
• Delete Pokémon: Users can delete individual Pokémon entries or clear the entire list.

Steps to Run the Project

1. Clone the Repository:

git clone https://github.com/manni2000/Pokemon.git
cd Pokemon

2. Install Dependencies:

• For Backend:
  

  cd backend
  npm install
      

• For Frontend:
  

  cd ../frontend
  npm install
      

3. Start the Backend Server:

• For Backend:
  

  cd backend
  node server.js
  # or
  npm run dev
      

• For Frontend:
  

  cd ../frontend
  npm start
      

4. Access the Application: Open your browser and navigate to http://localhost:3000

5. Deploy at Render cloud hositing website: https://pokemon-h9ur.onrender.com/

Preview