Application architecture

Since this is a demo, we've opted for a simple and lightweight architecture. On the backend, we'll use MongoDB (version 3 or 4) to store our only datastructure, the user's profile; and we'll use the Flask framework in Python (2.7 or 3) to directly serve web requests. In a production environment, we'd put a proper webserver such as Apache or NGINX in front of Flask for efficiency and security, but let's keep things simple for now.

The frontend will be plain HTML plus VueJS for browser-side logic and Bootstrap4 for basic styling (no custom CSS... you can spice that up later if desired). We'll keep the Vue really simple, with a single controller that manipulates a single HTML file, showing and hiding elements as the state changes. We'll also avoid certain newer JavaScript features such as arrow functions, to improve browser compatibility (technically speaking, we will keep to ECMAScript5).

The Flask server will serve the HTML, JS, and images statically -- no server-side templating -- and all communication between Flask and Vue will be through REST API endpoints. Aside from keeping the pattern simple, this has the added benefit of making it easily extensible to any other frontend platform. For example, we could create an iOS mobile app which accessed these same Flask endpoints, without changing the backend at all.

The Flask methods will call Algorithmia to perform more advanced machine learning tools, allowing us to detect whether uploaded images are safe for work (no nudity), and to auto-crop profile images without accidentally removing important features such as faces. By using a separate service to run these ML tools, we're able to take advantage of existing ML models without rewriting or integrating them directly into our codebase, so our webserver will not get bogged down by heavy computation or require advanced hardware such as GPUs.

Note that it is somewhat inefficient to serve static files directly out of Flask, but this works fine in development. If this were a production instance, we'd serve the HTML, JS, and images via a webserver such as NGINX, and only use Flask for the API endpoints.


NEXT: creating the database and webserver code