a Flask application powered by Next.js, designed to showcase my collection of Wizard101 game photos sourced on Supabase. Utilized Docker to simplify testing, processing, and deploying the application locally.
For any fellow Wizard101 Fans or OG's, try guessing the location of the logo above :P
The frontend is developed using TypeScript
and the Next.js framework, with Tailwind CSS as the chosen CSS
framework.
The backend framework chosen for this project is Flask, a Python
-based framework. In Flask, I create API endpoints to communicate with the frontend (the client).
These endpoints are designed for retrieving data from a PostgreSQL database structure, which was made using the MySQL Community Edition Server but then migrated to Supabase.
This entire process resembles a RESTful API, employing HTTP methods such as GET for querying the database, and then returning JSON objects to the client.
Here is a breakdown:
- The API is structured around resources, with each endpoint representing a specific resource or set of data
- An example of an 'endpoint' from the server is
http://localhost:5000/api/data
, which returns data in JSON format to the client - For the Flask API to receive information from the client, the client would send a query parameter on top of the endpoint like:
http://localhost:5000/api/search?location='{location}'
.
- An example of an 'endpoint' from the server is
- Flask provides an easy way to map HTTP methods with specific functions and decorators
- An example is:
@app.route('api/data', methods=['GET'])
. This is a decorator to signify that at the endpointapi/data
, there is data to retrieve from the database using theGET
method - The returned output to the client of the data is a JSON object. Flask simplifies this by:
return jsonify(some_data)
- For more information check out api/server.py
- An example is:
Git serves as the primary version control system for the project, enabling efficient tracking of code changes.
Docker, on the other hand, allows ease of access to local testing, processing, and deployment with containerization.
This ensures a seamless and reproducible environment.
WizGallery is a full-stack web application designed to showcase a collection of Wizard101 game photos taken by me (andrearcaina). The key functionalities include:
- The app allows users to view a personal collection of Wizard101 game photos
- The app allows users to view based on certain parameters (like photos from a certain world/location)
Some updates/ideas to implement into WizGallery:
Hosting
: Host it somewhere (maybe vercel)User photo submission
: Allow users to insert their own photos into the website- To implement this, can create a login and authentication page for security and personalization
- The images processed need to be actual photos taken in Wizard101
Photo showcase for users
: Allows users to check out their own photos that they uploaded- This is the main reason for the second point
Docker
: How to use, what it does, and containerizationAPI's
: How to use, what it does, and different structuresFetch
: How to use, what it does, and what it can doMySQL + PostgreSQL
: How to use and what it does, alongside creating queriesSupabase
: How to use and what it does