By Casey Tuer - Visit ezpickup
Table of Contents
- ezpickup introduction
- Application Architecture & Technologies Used
- Frontend Overview
- Backend Overview
- From the Developer
ezpickup is a fullstack Flask/React app that lets users find and host local pickup sports games.
Users can find games in their area, view particular details of a game (start time, skill level, equipment needed, etc.), comment on a game's page, join a game, or host a game of their own.
ezpickup is also integrated with the @react-google-maps/api library. Users see pins on a map representing the location of all games being hosted and can click on a pin to be redirected to that game's page.
Most of the application logic occurs within the front end's Redux store which processes interactions with the Google Maps Javascript API via the @react-google-maps/api library and manages application state to allow dynamic data flow throughout. The app is entirely syled with pure CSS (no outside styling libraries or frameworks used).
The backend responds to frontend requests, and serves data to the frontend from a PostgreSQL relational database which provides the persistent storage of data.
React is a free and open-source frontend JavaScript library. It allows developers to easily disect a project into easily implemented components and pass data from one component to another. It has a rich and well documented ecosystem maintained by Facebook and a community of individual open-souce developers and companies. It was used to create all of the components which make up the frontend of the application.
Redux and the react-redux library were used to manage application state and make fetch requests to the backend for data. Redux provides a store which contains the state of an app's variables and ensures prdictable updates of these variables from specific behavior. It was used to provide all components easy access to dynamically changing data without prop threading.
Flask is a microframework developed in Python, which was used to construct necessary backend components for web development such as request handling, routing, and sessions, along with built-in modules and extensions such as Flask-WTF for form validation and error handling and Flask-SQLAlchemy for facilitating the creation and seeding of database models.
PostgreSQL is a powerfull and reliable open-source object-relational database management system that was used to store the application's data.
Building ezpickup has been a fun and rewarding learning experience. The application was built using technologies which are new to me and is a work in progress which I plan on expanding on in time. Thank you to App Academy and all the wonderful instructors who have contributed to my programming journey over the last several months.
Thanks for reading ❤️