Open source software powers much of the world's technology, and contributing to it can be incredibly rewarding. One such project is pgAdmin 4, a popular open-source database management tool for PostgreSQL. If you're a new contributor looking to dive into open source, this guide will help you get started with pgAdmin 4.

Before diving into contributions for pgAdmin 4, it's essential to understand some key technologies used in its development: React.js, Python Flask, and JavaScript. Here's how you can get started with these technologies to prepare yourself for contributing effectively.

Building the Foundation: Learning React.js, Python Flask, and JavaScript for Contributing to pgAdmin 4

Learning React.js:

React.js is a popular JavaScript library for building user interfaces, especially single-page applications. It's used extensively in pgAdmin 4's front-end development.

Steps to Learn React.js:

• Basic JavaScript Knowledge:
  Ensure you have a good grasp of JavaScript fundamentals. Resources like MDN Web Docs and JavaScript.info are excellent starting points.

• Official React Documentation:
  The official React documentation is a comprehensive resource. Start with the "Main Concepts" section to understand the core principles of React.

• Build Small Projects:
  Practice by building small projects like a to-do list, a weather app, or a simple blog. This hands-on experience will solidify your understanding.

• Join React Communities:
  Engage with the React community on forums, Reddit, or Discord channels to get support and advice.

Learning Python Flask:

Python Flask is a micro web framework for Python, used in the back-end development of pgAdmin 4.

Steps to Learn Flask:

• Basic Python Knowledge:
  Ensure you have a solid understanding of Python basics. Resources like Python.org and Learn Python the Hard Way are great starting points.

• Official Flask Documentation:
  The official Flask documentation provides a detailed tutorial that walks you through building a simple application.

• Build Small Projects:
  Start with small projects like a basic blog, a task manager, or a RESTful API. This practical experience will help you grasp Flask’s concepts and structure.

Learning JavaScript

JavaScript is a core technology for web development, essential for both React.js and general front-end development.

Steps to Learn JavaScript:

• Beginner Resources:
  Start with the basics using resources like Eloquent JavaScript and JavaScript.info.

• Practice Exercises:
  Websites like HackerRank and LeetCode provide practice problems to test your skills.

• Build Projects:
  Apply your knowledge by building projects like interactive websites, simple games, or web applications. This hands-on practice is crucial for reinforcing your learning.

Getting Started with Contributions

Understanding pgAdmin 4

Before you start contributing, it's crucial to familiarize yourself with pgAdmin 4. Download and install the tool, and explore its features. This hands-on experience will give you a better understanding of what the software does and how it works. Reading through the official pgAdmin 4 documentation is also a great way to deepen your understanding.

Setting Up the Development Environment

To contribute to pgAdmin 4, you'll need to set up a local development environment. Here’s a step-by-step guide:

• Install Prerequisites:
  Python: pgAdmin 4 is primarily written in Python, so you’ll need Python installed on your machine. Some parts of pgAdmin 4 are built using JavaScript frameworks. You’ll need a PostgreSQL database to work with pgAdmin 4.

• Clone the Repository:
  Fork the pgAdmin 4 repository from GitHub to your account.

git clone https://github.com/yourusername/pgadmin4.git.

• Set Up Dependencies: Navigate to the cloned directory and follow the instructions in the README file to set up the necessary dependencies.

Navigating the Codebase

Understanding the structure of the pgAdmin 4 codebase is essential for making meaningful contributions. Here are some key directories and files to get familiar with:

• /pgadmin: Contains the main application code.

• /web: Contains front-end code, including JavaScript and HTML files.

• /docs: Documentation files.

Take some time to explore these directories and understand how different parts of the application fit together.

Here is a quick overview of the folder structure. Because understanding the folder structure can sometimes get confusing.

pgAdmin 4/
│
├── web/ # Main directory for the web application
│ ├── pgadmin/ # Core application files
│ │ ├── browser/ # Browser panel functionalities and management of database objects
│ │ ├── init.py # Initialization of the Flask application
│ │ ├── models/ # Database models for SQLAlchemy
│ │ ├── static/ # Static files (CSS, JS, images, etc.)
│ │ │ ├── js/ # JavaScript files
│ │ │ └── img/ # images related to the module
│ │ ├── templates/ # web interface
│ │ │ ├── css/ # CSS files
│ │ │ ├── sql/ # Jinja2 template for generating dynamic queries
│ │ ├── tools/ # Tools like query tool, import/export, etc.
│ │ └── utils/ # Utility functions and classes
│ ├── config.py # Configuration file for the Flask application
│ ├── requirements.txt # Python package dependencies
│ └── runtime/ # Directory for runtime data
│
├── docs/ # Documentation files
├── tests/ # Test suite for pgAdmin 4
└── setup.py # Setup script for installing pgAdmin4

One more detail I like to point out that really bugged me during the start was rendering any new modules that include web interface. We would need to add it in the webpack.config.js file. Like this

And also make sure to make a new build for the web. For doing that run this command.

Commands:

• cd web

• Yarn bundle:watch ==> why I’m mentioning this command because this will actively look for all the changes that are made in the frontend and make a new build automatically.

Now that is the basics that a developer needs to start contributing to pgAdmin4.