PokeDex Project

General Description

This project consists of two main parts:

1. PokeDexApi: A backend API built with Django and Django REST Framework that manages user authentication.
2. pokedex: A frontend mobile application built with React Native (Expo) that functions as a Pokedex, consuming data from the public PokeAPI and using the backend for favorites management (implicit, as the current backend only handles users).

📁 Project Structure

PokeDex/
    ├── PokeDexApi/
    │   ├── PokeDexApi/
    │   │   ├── models/
    │   │   │   └── serializers.py
    │   │   ├── views/
    │   │   │   └── userView.py
    │   │   ├── __init__.py
    │   │   ├── asgi.py
    │   │   ├── settings.py
    │   │   ├── urls.py
    │   │   └── wsgi.py
    │   ├── db.sqlite3
    │   └── manage.py
    ├── pokedex/
    │   ├── src/
    │   │   ├── api/
    │   │   ├── assets/
    │   │   ├── components/
    │   │   ├── context/
    │   │   ├── hooks/
    │   │   ├── navigation/
    │   │   ├── screens/
    │   │   └── utils/
    │   ├── App.js
    │   ├── app.json
    │   ├── babel.config.js
    │   ├── eas.json
    │   ├── package.json
    │   └── package-lock.json
    └── README.md

Structure Description:

• PokeDexApi/: Contains the backend code built with Django.
  • PokeDexApi/PokeDexApi/: Main directory of the Django application.
    • models/serializers.py: Defines how Python data is converted to formats like JSON for the API (and vice versa).
    • views/userView.py: Contains the logic that handles web requests for user-related endpoints (create, login, get).
    • settings.py: Main Django configuration file (database, installed apps, etc.).
    • urls.py: Defines the API routes (endpoints) and which views function handles them.
    • wsgi.py / asgi.py: Configurations for web server deployment.
  • db.sqlite3: Default database file (SQLite).
  • manage.py: Command-line utility for Django tasks (migrations, running server, etc.).
• pokedex/: Contains the frontend code built with React Native and Expo.
  • src/: Main directory for the frontend source code.
    • api/: Functions to connect to the PokeAPI and handle local storage (AsyncStorage for favorites).
    • assets/: Static resources like images (icons, splash screen) and fonts.
    • components/: Small reusable UI blocks (e.g., PokemonCard, Stats, LoginForm, Type).
    • context/: Defines and provides the authentication context (AuthContext).
    • hooks/: Reusable custom hooks (e.g., useAuth).
    • navigation/: Configuration of navigation between screens using React Navigation (Stacks and Tabs).
    • screens/: Components that represent the full application screens (PokeDex, Pokemon, Favorite, Account).
    • utils/: Utility functions and constants (e.g., colors by Pokémon type, temporary user credentials userDB).
  • App.js: Root component of the React Native application, where navigation and the AuthProvider are initialized.
  • app.json: Expo configuration file (name, version, icons, splash screen, etc.).
  • babel.config.js: Babel configuration (JavaScript transformer).
  • eas.json: Configuration for Expo Application Services (used to build the app).
  • package.json: Defines the frontend project dependencies and scripts.

⚙️ Backend (PokeDexApi)

Description

A simple API built with Django that provides endpoints for user registration and login using Token authentication.

API Endpoints

• POST /api/user/create: Creates a new user.
  • Body: { "username": "...", "password": "...", "email": "..." }
  • Response: Success or error message.
• POST /api/user/login: Logs in a user.
  • Body: { "username": "...", "password": "..." }
  • Response: Message, user data, and authentication token upon success.
• GET /api/user/getAllUser: Gets all users (Requires admin token, currently user with ID 1).
  • Headers: Authorization: Token <your_token>
  • Response: List of users.
• GET /api/user/getUser/<id>/: Gets a specific user by ID (Requires the user's own token).
  • Headers: Authorization: Token <your_token>
  • Response: User data or error if not found or no permissions.

Main Dependencies

• Django
• Django REST Framework

Setup

1. Ensure you have Python and pip installed.
2. Navigate to the PokeDexApi directory.
3. (Recommended) Create and activate a virtual environment:

   python -m venv venv
   # On Windows:
   venv\Scripts\activate
   # On macOS/Linux:
   source venv/bin/activate
   

4. Install dependencies (assuming you have a requirements.txt, if not, install them manually):

   pip install Django djangorestframework
   # Or if you have requirements.txt: pip install -r requirements.txt
   

5. Apply database migrations:

   python manage.py migrate
   

Execution

1. From the PokeDexApi directory:

   python manage.py runserver
   

2. The API will be available at http://127.0.0.1:8000/.

📱 Frontend (pokedex)

Description

A Pokedex mobile application that displays information about Pokémon obtained from the PokeAPI. It allows users to view a list of Pokémon, individual details, log in (currently with fixed data), and mark Pokémon as favorites (saved locally on the device).

Main Screens

• PokeDex: Displays a paginated list of Pokémon.
• Pokemon: Displays the details of a selected Pokémon (types, base stats, image).
• Favorite: Displays the list of Pokémon marked as favorites by the user (if logged in).
• Account: Allows logging in (currently with fixed credentials edison/Eisaza.123!) or displays the authenticated user's data.

Main Dependencies

• Expo
• React Navigation (Stack, Bottom Tabs)
• React Native Gesture Handler
• React Native Reanimated
• React Native Screens
• React Native Safe Area Context
• AsyncStorage
• Formik & Yup (for the login form)
• Lodash
• React Native Vector Icons

Setup

1. Ensure you have Node.js, npm, and Expo CLI installed.
   • Install Expo CLI: npm install -g expo-cli
2. Navigate to the pokedex directory.
3. Install dependencies:

   npm install
   

Execution

1. From the pokedex directory:

   expo start
   

2. Follow the instructions in the terminal to open the application in an emulator/simulator or on your physical device using the Expo Go app.