Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manni2000/pokemon
Full-Stack Pokemon Application
https://github.com/manni2000/pokemon
mern-stack render-deployment
Last synced: about 5 hours ago
JSON representation
Full-Stack Pokemon Application
- Host: GitHub
- URL: https://github.com/manni2000/pokemon
- Owner: manni2000
- Created: 2024-08-05T09:46:05.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-24T07:33:45.000Z (3 months ago)
- Last Synced: 2024-08-24T08:38:43.490Z (3 months ago)
- Topics: mern-stack, render-deployment
- Language: JavaScript
- Homepage: https://pokemon-h9ur.onrender.com/
- Size: 1.74 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
