The Gamer Guild API was created to serve the Gamer Guild React app. The API includes the following apps, allowing for a rich database and a versatile front-end application:
- profiles
- followers
- posts
- likes
- comments
- events
- replies
- polls (this model could ultimately not be implemented on the front-end)
- In order to fulfill the User Stories created for this portfolio project, relevant apps and models were created. The following user stories relied on the API specifically:
-
The following Entity Relationship Diagram was created to show the models used. The in-built Django User model was used for this project, and the following custom models were created:
- Profile
- Follower
- Post
- Like
- Comment
- Event
- Reply
- Poll (this model could ultimately not be implemented on the front-end)
-
Entity Relationship Diagram:
-
- Django was used to create the web application.
-
- The Django rest framework was used to simplify the process between the back and front ends.
-
- PostgreSQL was used as the object-relational database system.
-
- ElephantSQL was used to host the database.
-
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
-
- GitHub is used to store the projects code after being pushed from Git.
-
- Heroku was used for the deployed application.
- CI Python Linter was used to validate the Python code in this project. All code passed without errors, except
settings.pyandenv.pywhich showed E501 'line too long' warnings.
-
Manual testing was performed throughout development, ensuring the database was being updated as expected when creating, reading, updating or deleting data, where appropriate.
-
Screenshots are provided for the Profiles app, testing was carried out equally for all other apps, and is noted below.
- List View (Read if logged in):
- List View (Read if not logged in):
- Detail View (Read, Update if owner):
- Detail View (Read if not owner):
- Detail View (Read if not logged in):
- List View (Read, Create if logged in)
- List View (Read if not logged in)
- Detail View (Read, Delete if owner)
- Detail View (Read if not owner)
- Detail View (Read if not logged in)
- List View (Read, Create if logged in)
- List View (Read if not logged in)
- Detail View (Read, Update, Delete if owner)
- Detail View (Read if not owner)
- Detail View (Read if not logged in)
- List View (Read, Create if logged in)
- List View (Read if not logged in)
- Detail View (Read, Delete if owner)
- Detail View (Read if not owner)
- Detail View (Read if not logged in)
- List View (Read, Create if logged in)
- List View (Read if not logged in)
- Detail View (Read, Update, Delete if owner)
- Detail View (Read if not owner)
- Detail View (Read if not logged in)
- List View (Read, Create if logged in)
- List View (Read if not logged in)
- Detail View (Read, Update, Delete if owner)
- Detail View (Read if not owner)
- Detail View (Read if not logged in)
- List View (Read, Create if logged in)
- List View (Read if not logged in)
- Detail View (Read, Delete if owner)
- Detail View (Read if not owner)
- Detail View (Read if not logged in)
- List View (Read, Create if logged in)
- List View (Read if not logged in)
- Detail View (Read, Update, Delete if owner)
- Detail View (Read if not owner)
- Detail View (Read if not logged in)
-
When editing an event on the front-end app via the EventEditForm the date field was not populated with the existing date previously created by the user via the EventCreateForm.
-
On further inspection in the console, this error was caused by the date format not being the same as the form required, as I had applied a DATE_FORMAT in the back-end API settings to make the date more human-friendly and readable e.g. 01/05/2023.
-
As MDN Web Docs states, this format comes from the browser and can not be changed.
-
In order to avoid this issue, the date format was reverted to the required
yyyy-MM-ddformat. As a future implementation, a workaround could be to convert the format from one to the other with JavaScript as required.
-
I had recurring bugs with my database, with there being a disconnect between the migrated models and existing data in the database.
-
As an example, I would get a ProgrammingError, saying that
contentonpollsdidn't exist:
-
However, when checking the database, the
contentfield onpollsdid indeed exist:
-
The solution ultimately was to either reset the database on Elephant SQL or delete it entirely, create a new instance and connect it up to the API via env.py and Heroku config vars. Followed by migrating all the models again, and deploying to Heroku.
-
This re-ocurring issue caused a lot of time to be wasted both on having to reset the database and recreate the lost data.
-
When creating an event there is an error on the front-end regarding the default image. When a user tries to create an event but doesn't upload an image, the default image specified on the back-end should apply. However, the form throws an error:
-
However, this error doesn't occur on the back-end and the default image is applied without issue:
-
Despite using the identical code as on the Moments Walkthrough on posts, checking that Cloudinary was connected up properly, searching on Google and Slack, and asking tutor support, no solution was found.
-
The workaround was to include an image required info text on the form to ensure users would always select an image.
-
A poll and discussion model were created on the back-end to be used with events. Though the back-end functionality exists and doesn't cause any issues, the front-end functionality was impossible to implement. My assumption was that the choice fields on polls was causing an issue and that my front-end code was not correct. However, when implementing the discussion on events, which is identical to comments on posts, the same error appeared and nothing could be done about it.
-
Recurring front-end TypeError:
-
Front-end displaying data correctly when created in the back-end:
-
Ability to create the data in the back-end:
-
Ultimately the poll and discussion functionality was therefore removed.
- Navigate to your Heroku dashboard
- Click "New" and select "Create new app".
- Input a meaningful name for your app and choose the region best suited to
your location.
- Select "Settings" from the tabs.
- Click "Reveal Config Vars".
- Input all key-value pairs as necessary from the
.envfile. Ensure DEBUG and DEVELOPMENT are not included.
- Click "Add buildpack".
- Add "python" from the list or search if necessary, remember to
click save.
- Select "Deploy" from the tabs.
- Select "GitHub - Connect to GitHub" from deployment methods.
- Click "Connect to GitHub" in the created section.
- Search for the GitHub repository by name.
- Click to connect to the relevant repo.
- Either click
Enable Automatic Deploysfor automatic deploys orDeploy Branchto deploy manually. Manually deployed branches will need re-deploying each time the repo is updated.
- Click
Viewto view the deployed site.
- The live site can also be accessed from your repo in GitHub from the environments section of the repo.
The site is now live and operational
- The following were used as references to help with writing the HTML, CSS, JavaScript and Python code:
- The Deployment section in the README was taken from the masterful Dave Horrocks, who put it so much better than I could!
Massive thanks to:
-
My mentor, Lauren-Nicole Popich, for guiding me and giving me helpful feedback and advice - and for giving me confidence when I didn't believe in myself!
-
My fellow Code Institute students and friends for their help, generous feedback, and incredible knowledge:
-
Tutor Support, Student Care and the Slack Community at Code Institute for their support.
-
And last but not least, my husband Antoine Masson for helping me through the stressful moments and for supporting us financially while I make this big career change.