Full-Stack Pokemon App

Description

This full-stack web application has been developed to enhance my expertise in web development programming as well as allow me to refine my skills. This project allowed me to explore and work with many different tools, microframeworks, programming languages, handle APIs, databases, and ultimately PaaSs for deployment.

The application was built around the theme of Pokemon, it features a user profile where users can showcase their Pokemon team, alongside personal information. It exhibits a Pokedex and Pokemon encyclopedia, allowing the users to select their preferred Pokemon and build their unique team.

Tools & Technologies

To develop this application a series of different tools and technologies were used, including:

Back-end (Python)

• Flask
  The Flask microframework was fundamentally utilized to create the web application's back-end structure, handling routing and interactions between the server and client. It enables the integration of different components in the application.

• Werkzeug
  Werkzeug, a WSGI utility library for Python, provided essential functionalities like handling HTTP exceptions (404), password hashing to increase the safety of the user's data, and utilities to secure filenames for file uploads.

• SQLAlchemy & Sqlite
  SQLAlchemy facilitated the interaction with the SQLite database and provided an ORM (Object-Relational Mapping) system for working with databases (created object tables), simplifying the handling of complex queries.

• PokeAPI
  The PokeAPI served as the primary data source for retrieving detailed information about Pokemon. It allowed the application to fetch data such as Pokemon attributes, moves, and abilities, enriching the user experience with comprehensive Pokemon information.

Front-end (HTML, CSS, JavaScript)

• Bootstrap
  Bootstrap was used for designing responsive and visually appealing user interfaces. Its extensive collection of CSS and JavaScript components facilitated the creation of many UI components such as input boxes, buttons, navigation bars, etc.

• jQuery
  jQuery was used for DOM manipulation and event handling. It streamlined the development process by providing concise syntax for performing common tasks such as AJAX requests.

• AJAX
  AJAX (Asynchronous JavaScript and XML) was employed to implement dynamic and interactive features in the application without requiring a page reload, such as the display of pop-up boxes when clicking on Pokemon sprites and sending asynchronous requests to routes to fetch Pokemon data from the API.

• JINJA2
  Jinja2 is utilized to generate dynamic HTML content in the application. It allowed for the creation of reusable templates with placeholders for dynamic data, template inheritance, macro definitions, and control structures.

Deployment

• Heroku
  Heroku served as the chosen platform for deploying the application to the web. Its seamless integration with Git and GitHub and automated deployment processes simplified the deployment workflow.

Challenges

While in the development process, many challenges arose, such as:

• API Requests
  API Requests can be quite challenging, it's important to work around concepts like, what services the API provides, API overload (rate limit), time performance such as loading times, etc.

• Caching
  Caching was a challenging and important task, mainly because it was going to cause performance issues depending on its implementation. However, it's extremely important to avoid redundant API requests which leads to performance gains.

• Back-end/Front-end Communication
  Back to Front-end communication is an important feature of any application and for that its commonly used JSON notation. Things like flashing alerts that are generated by processing user input in the back-end have to be communicated to the front-end.

• UX Design
  UX Design can come with its own set of complications like, not being able to find online the desired assets for the application, it can be difficult to design an application without having a specialized designer by your side.

• Deployment
  Deployment was a difficult task, from finding the most comfortable PaaS to handling the deployment errors, for example, having to set relative paths for directories so that any user can interact with the website from their machine can increase the complexity of the application.