A web app used to improve my skills in Python, Flask, Javascript, Bootstrap, jQuery, HTML, CSS, and SQL.
Table of Contents
This project demonstrates using the Flask microframework to create a website or webapp that allows generating a 'collection' of something, in this instance a game collection, generated from a form submission and file upload. It uses a template and python to dynamically generate the HTML markup and webpages. The project utilizes a login system and also allows removal of entries from the collection. The data is stored using SQlite.
- Flask
- Python
- Javascript
- Bootstrap
- JQuery
- HTML
- CSS
- SQL
Additional plugins and numerous libraries were utilized as well, including JQuery rates which provided a star rating form submission, lightbox for allowing popping the images out in the collection. WTForms was used for form generation.
-Install Python if necessary
-Clone the repo into the folder of your choosing
-Open the project folder in Pycharm
-Create a virtual environment
-Activate virtual environment and run pip install -r requirements.txt to install all project dependencies
-Using the powershell terminal type '$env:FLASK_APP = "application.py"'
-Next type 'flask run' to run the local server
-Click the IP address in the terminal provided by Pycharm to load the project in your web browser
-Login using the following credentials:
- Email Address: [email protected]
- Password: gaming123
Python, Pip, and an IDE such as Pycharm should be installed in advance for smooth operation of the webapp.
Login to access the site using the Email Address '[email protected]' and password 'gaming123'
From the top of the page you'll see a navigation bar:
The 'Home' page is the landing page after logging in.
The 'Upload' page presents a form the user fills out to upload game details and an image representing the game to the server and database.
The 'Collection' page dynamically formats the HTML markup from the details provided in the form that are stored in the database to create a 'game collection'
The 'Remove' page provides a dropdown list to remove a game from the collection which deletes it from the database and removes the stored file from the server.
The 'logout' section of the navigation bar logs the user out of the webapp.