Welcome to Gamebook! The site where gaming enthusiasts can share thoughts, tips, tricks and more about games! This site is designed to be a social media platform aimed specifically at gamers. It is a place where the community can come together and share a huge amount of knowledge on any game. The platform would also appeal to gaming companies and content creators as a way to advatise and monitor the popularity of certain games. This makes it stand out from the huge crowd of different social media platforms that exist today, and this is only the begining! I truely believe thise site could be improved apon significantly to make it even better with some extra features that would help it to excel in a real world senerio.
Link to deployed site: https://drfapi1-f061a902d0e8.herokuapp.com/
- While it is crusial that the back end is functional, the main focus for this project was the front end. Front end developers often focus on the user interface (UI) and user experience (UX) to create an interactive and user friendly application. This is what I tried to accomplish in this project, using wireframes to translate my ideas into a responsive and functioning website.
(1/11/2023)
- Contact: A Contact form with a custom model created on separate page that users can navigate to using the navbar Contact link. Allows the user the submit a titled message to the backend where admin can recieve it.
- Notifications: Added React Notifications to give certain alerts to users. See Technologies and Testing for more.
Here you can see:
- The Wireframe
- User Stories
- Features
- Bugs & Fixes (includes a major bug)
These wireframe were some basic ideas of how I wanted my site to look. I waanted it to be clear and practical, so that the user can navigate easily. I thought about putting the popular profiles section at the top of the page just under the navbar but I really wanted users to be able to see the first post clearly when they opened the site. This would be more likely to draw people in. However I realised that this was perfect for smaller screen widths, as having two columns next to each other on a mobile device for example makes the content much too small.
- The wireframe for the home page:
- The wrieframe for the post page. This is the page a user will see if they click on a post to view it individually:
- The wireframe for the profile page: something I forgot to consider here at the time of planning was that if a user is signed in, and is viewing another users profile, they will also see the follow/ unfollow button for that profile.
- Contact form page wireframe:
Navigation & Authentication:
- Navigation: As a user I can view a navbar from every page so that I can navigate easily between pages
- Routing: As a user I can navigate through pages quickly so that I can view content seamlessly without page refresh
- Authentication - Sign up: As a user I can create a new account so that I can access all the features for signed up users
- Authentication - Sign in: As a user I can sign in to the app so that I can access functionality for logged in users
- Authentication - Logged in Status: As a user I can tell if I am logged in or not so that I can log in if I need to
- Authentication - Refreshing access tokens: As a user I can maintain my logged-in status until I choose to log out so that my user experience is not compromised
- Navigation: Conditional rendering - As a logged out user I can see sign in and sign up options so that I can sign in/sign up
- Avatar: As a user I can view user's avatars so that I can easily identify users of the application
Adding & Liking Posts:
- Create posts: As a logged in user I can create posts so that I can share my thoughts on gaming/a game by adding an image, a title, a rating and text
- View a post: As a user I can view the details of a single post so that I can learn more about it
- Like a post: As a logged in user I can like a post so that I can show my support for the posts that interest me
The Posts Page:
- View most recent posts: As a user I can view all the most recent posts, ordered by most recently created first so that I am up to date with the newest content
- As a user, I can search for posts with keywords, so that I can find the posts and user profiles I am most interested in.
- View liked posts: As a logged in user I can view the posts I liked so that I can find the posts I enjoy the most
- View posts of followed users: As a logged in user I can view content filtered by users I follow so that I can keep up to date with what they are posting about
- Infinite scroll: As a user I can keep scrolling through the images on the site, that are loaded for me automatically so that I don't have to click on "next page" etc
The Post Page:
- Post page: As a user I can view the posts page so that I can read the comments about the post
- Edit post: As a post owner I can edit my post title and description so that I can make corrections or update my post after it was created
- Create a comment: As a logged in user I can add comments to a post so that I can share my thoughts about the post
- Comment date: As a user I can see how long ago a comment was made so that I know how old a comment is
- View comments: As a user I can read comments on posts so that I can read what other users think about the posts
- Delete comments: As an owner of a comment I can delete my comment so that I can control removal of my comment from the application
- Edit a comment: As an owner of a comment I can edit my comment so that I can fix or update my existing comment
The Profile Page:
- Profile page: As a user I can view other users profiles so that I can see their posts and learn more about them
- Most followed profiles: As a user I can see a list of the most followed profiles so that I can see which profiles are popular
- User profile - user stats: As a user I can view statistics about a specific user: bio, number of posts, follows and users followed so that I can learn more about them
- Follow/Unfollow a user: As a logged in user I can follow and unfollow other users so that I can see and remove posts by specific users in my posts feed
- View all posts by a specific user: As a user I can view all the posts by a specific user so that I can catch up on their latest posts, or decide I want to follow them
- Edit profile: As a logged in user I can edit my profile so that I can change my profile picture and bio
- Update username and password: As a logged in user I can update my username and password so that I can change my display name and keep my profile secure
The Contact Form Page:
- As a user I can navigate to the contact form using the navbar so that it is easy to access
- As a user I can view the contact form on a separate page so that it is clear and not cluttering the page
- As a user I can submit a contact form so that I can ask questions or report problems to the admin
- As a user I am notified if my contact is successfully sent so I know that the submit worked
- As a user I am notified if my contact is unsuccessfully sent so I know to try again
- Color Scheme:
The colour scheme for this site is red, white and a super dark blue thats almost black. When I started the project my first thought was: 'What colours do I think of when I think about gaming?' and red was immediately my first response. The colour red is used so much in the gaming industry because of its vibrant, exciting appearance to make games amoung other products look as fun and exciting as possible. My next choice was black as black and red is used a lot in games, gaming equipment is commonly black. However when I tried to use black I didn't like the outcome. If I used it as a background colour it made the site look very dark, and a lot of the images I was uploading just didn't stand out so well on a black background. The more I lightened the black colour to more of a gray the less clear the red text became. I ended up using white instead as it looked a lot more friendly and welcoming which is something I wanted for my social media platform to encourage people to use it. However when I was experimenting with different shades of black I found this very nice black/blue which I decided to use as a highlight for things like the navbar icons when hovered or active. It stands out very well and contrasts nicely from the other colours which is perfect for this role.
- Font:
My font which I chose for this site is called Roboto Mono and I really like how it is clear and easy to read it is. It also looks like a font from a video game; it reminds me of a font from a retro game but with a modern twist. I ended up using this font for the whole site as I thought it worked so well with the theme and kept the site consistent in style.
-
This contains the logo, nav-links. If the user is signed in there will also be a link to their profile and their avatar will be displayed.
-
The logo can be clicked to naigate the user back to the home page.
-
The nav-links have a darker colour when hovered or active.
- The home page contains the search bar at the top to allow users to search posts.
- The most popular profiles are displayed on the right. If signed in the user will be able to follow/unfollow them here.
Signed in:
Signed out:
- The home page allows the user to scroll inifinitely through posts without having to navigate to other pages.
- The sign-up page includes the navbar, an image and a form with a username field and two password fields as well as a sign up button to submit.
- The sign-in page is basically the same but the form only has one password field.
- When signed in the user can navigate to the 'Feed' and 'Liked' pages through the navbar. The feed shows the user posts made by accounts they are following.
- Whilst the liked page is of course for posts the user has liked:
- Clicking on an avatar allows the user to view that profile and its stats. This includes the number of posts, following and people they are folling.
- If the user is signed in and viewing their own profile they will also see this dropdown menu allowing them to edit their profile, username or password.
- If the user clicks edit profile they can use this form to change their avatar and bio.
- The change username or password options take the user to a form to change their username or password respectively.
- Clicking on the add post link with take the user to the post create form.
- The post consists of: The owners username and avatar, the date the post was created, the image, the title, the optional rating, the main text, the like counter and button and the comment counter and button. For the owner of the post the three dots for the dropdown menu will also be visible.
- Once a user has created a post, they can click it to view it separately. Here the owner of the post can see the dropdown menu.
- From that dropdown menu on the post page the owner can click the edit button to be take to the post edit form. This contains all the same fields as the post create form.
-
Deleting a post is as simple as clicking the delete button.
-
The like button can be clicked to like posts, however the user must be logged in to like and they cannot like their own post.
- The owner and other users can also view its comments or make comments using the comment form if logged in.
- Navbar now includes a 'Contact' icon which links to the Contact form page:
- When the user clicks the 'Contact' button on the navbar they are taken to the contact form on a separate page. From here they can fill out and submit the form:
In the future I would love to include the following aspects to make the site compete with other big social media platforms:
-
Private messaging -to allow direct communication between users
-
Pin comments -to allow only the owner of a post to pin a comment to the top of the list. It could be one they thought was most useful like an answer to a question, or one they thought was simply the most funny. This would improve user experience as other people looking for an answer wouldn't have to scroll through all comments to find it.
-
Reply to comments -being able to reply to a specific comment would make communication between users easier as the reply would be under the original comment and not above in order from newest to oldest. It would be easier to tell who was talking to who or responding to which comment.
-
Like comments -being able to like comments is similar to being able to pin them, except its not just the owner of the post who can like its comments. Allowing all suers to like comments (provided that they are logged in) provides more overall user interaction for the community.
-
Email authentication / password recovery -to allow users to reset their password if they forgot it would be ideal for real world use. Everyone forgets their password sometimes! It would encorage users to continue using the site instead of giving up or having to make a new account.
-
Emojis for desktop -emojis are a huge part of how people express themselves online and would not only improve user experince but also just make posting and communiting with each other more fun!
-
Notifications -recieving notifications when someone likes of comments on your post would also encorage users to return to the site often and boost user activity.
-
Able to view followers/following -being able to see a list of followers or people you are following would make it easier to follow/unfollow speific people so the user doesn't have to scroll through the feed to try to find someone.
Using the Frontend JavaScript library React, I was able to combine reusable components to help create the user interface. The components are created in separate files. These files are located in the components folder. This includes:
- Avatar.js
- Asset.js
- MoreDropDown.js
- NavBar.js
- NotFound.js
By creating them in separate files within the components folder the individual components can be imported where needed in the rest of the application.
Avatar.js
This is the users customizable, circular profile picture used to help them identify other users and distinguish them from themselves.
- Imported into the Profile.js file, so it can be displayed on the users profile page without having to rewrite the code for it there too.
- Imported into the NavBar.js file to display the users Avatar in the NavBar if logged in
- Imported into the Comment.js file to display the Avatar of the user who owns the comment
- Imported into the CommentCreateForm.js file so the user can see their Avatar when writting their comment
- Imported into the Post.js file so that users can see the post owner's Avatar
Asset.js
Essentially the Asset component does the same job in all these files, simply rendering a loading spinner when the application needs a second to search for a post or load a page.
- Imported into the NotFound.js file
- Imported into the PostCreateForm.js
- Imported into the PostPage.js
- Imported into the PostsPage.js
- Imported into the PopularProfiles.js
- Imported into the ProfilePage.js
MoreDropDown.js
This component is a toggle drop down menu that can allow the user to edit and/or delete a comment, post and profile.
- Imported into the Comment.js
- Imported into the Post.js
- Imported into the ProfilePage.js
NavBar.js
The Navbar is imported into App.js to be used on the home page of the site. If more pages where to be added, like for example a market page where users could buy and sell pre-owned games, the navbar could be reused there. It would allow the user to navigate to and from that page seemlessly without the code being re-written. This is good practice as it would save time in the future.
NotFound.js
NotFound.js is imported into the App.js and is used to tell users when a page they are looking for is not found. This could be because of a misspelled or non-existant url typed by the user. As with NavBar.js it is only imported into one file, however it is easy to reuse this component elsewhere in the future.
-
Bug: I added a 'Clips' feature to the site, with the idea that users could share clips with their followers on a separate 'Clips' page. I created the model and the JavaScript form for the clips, but the form doesn't seem to submit.
-
Solution: Added a console log to the handleSubmit function to log the form content to the console when sumbitted. This did work and the entered values were logged, so the handleSubmit function is working but the form never seems to post to the Clips page. All of the URLs look correct so I'm not sure why this is.
-
Outcome: Unfixed due to time limit. I have left all the code included in the project and will work on a fix after this project is graded. I commented out the navbar links to the clips page and create form so it cannot be accessed by users.
-
Bug: The user could not see the stats on their profile/ another users profile such as number of posts, followers and following.
-
Solution: In my serializers.py file inside the profiles directory I had forgotten to add 'posts_count', 'followers_count', 'following_count', to the fields lists in the meta class for the profile model.
-
Outcome: Fixed
-
Bug: The user could not view individual posts or comment on posts. They would just be taken to a blank white screen.
-
Solution: Correct the import in PostPage.js. I was importing from "react-router" when it should have been "react-router-dom".
-
Outcome: Fixed
- This site was created using these languages: Python, JavaScript, React, HTML and CSS.
- Frameworks/Libraries: Django, REST and Bootstrap.
- Pillow library installed for image rendering.
- Cloudinary library installed for free image hosting.
- ElephantSQL for a free POSTGRES database to host the site on.
- Github and Gitpod are the platforms where I created this website. Github (and Gihub pages) for creating and storing my repositories and project board/issues, and Gitpod for writing the code.
- Heroku was connected to my github repository for site deployment.
- Google Fonts is where I imported my font from.
- Fontawesome is where I sourced my icons.
- Pexels is the website I used to source any images that I didn't take myself.
- I used the website amiresponsive.co.uk to show my finished site on different devices at the top of this page.
- I used React Notifications to add pop-up notification messages.
- The site was viewed and tested on the Google Chrome browser
- Different screen sizes were tested using a simulator that is part of Google Chrome's dev tools
- As a result all screenshots of different screen sizes are also taken from this simulator
- Tested/ supported devices: Galaxy Fold, Moto G4, iPhone 4, 6, 7, 8, X, XR and 12 Pro, Pixel 5, Samsung Galaxy S8+, S20 Ultra and A51/71, iPad, iPad Air, Mini and Pro, Surface Pro 7, Surface Duo, Nest Hub and Nest Hub Max.
Upon opening the site the user should first see the home page:
This includes the navbar, search bar, recent posts, and popular profiles.
Home page on desktop:
Home page on tablet:
Home page on mobile:
Outcome: tests passed
The navbar should show the logo, Home, Sign-in and Sign-up links when a user is logged out:
Navbar logged out on desktop:
Navbar logged out on tablet:
On moblie the navbar will become a dropdown menu which can be toggled by the user:
Navbar logged out on mobile:
Outcome: tests passed
The navbar should show the profile, feed, liked and sign-out links when a user is logged in:
Navbar logged in on desktop:
Navbar logged in on tablet:
Navbar logged in on mobile (can also toggle):
Outcome: tests passed
The navbar should now also show the contact icon navlink when a user is logged in:
Navbar logged in on desktop:
Navbar logged in on tablet:
Navbar logged in on mobile (can also toggle):
Outcome: tests passed
The contact icon should also have the hover and active class:
Outcome: tests passed
Clicking on logo should take the user back to the home page:
Before logo clicked:
After logo clicked:
Outcome: tests passed
Clicking on 'Sign-up' in the navigation bar should take the user to the sign up page:
Sign up page on desktop:
Sign up page on tablet:
Sign up page on mobile:
The Sign-up form requires the user to fill out all fields. Password fields cannot be too simple or too short:
Sign up form on desktop:
Sign up form on tablet:
Sign up form on mobile:
Password fields must also be the same:
Outcome: tests passed
Clicking on 'Sign-in' in the navigation bar should take them to the sign in page:
Sign in page on desktop:
Sign in page on tablet:
Sign in page on mobile:
The Sign-in form requires the users correct username and password:
Username required:
Password required:
Incorrect username or password:
Outcome: tests passed
Clicking on 'Sign-out' in the navigation bar should sign the user out, redirecting them to the home page if they aren't there already:
Signed in before sign out button clicked:
Signed out after button clicked:
Outcome: tests passed
Typing into the search bar on the home page should allow users to search for posts by title or user:
Searching on desktop:
Searching page on tablet:
Searching page on mobile:
Outcome: tests passed
Popular profiles should be displayed to the user:
Popular profile on desktop:
Popular profile on tablet:
Popular profile on mobile:
Outcome: tests passed
Clicking on a popular profile avatar should take the user to that profile page:
Before clicking on a popular profile:
After clicking on a popular profile:
Outcome: tests passed
If logged in the user should be able to see and use the follow/unfollow buttons on the popular profiles:
Follow buttons on desktop:
Follow buttons on tablet:
However on mobile it would take up too much screen space, so they are not present here on mobile screens. Instead users will have to click the profile, then follow it from there.
Follow buttons on mobile:
Outcome: tests passed
If the user clicks 'Feed' in the navbar (logged in), they should see the feed page where post from people they are following are displayed:
Feed page on desktop:
Feed page on tablet:
Feed page on mobile:
For example if I were to unfollow 'Yumi_Plays' and refresh the page I would no longer see their posts on the feed:
Outcome: tests passed
If the user clicks 'Liked' in the navbar (logged in), they should see the Liked page where posts they have liked are displayed:
Liked page on desktop:
Liked page on tablet:
Liked page on mobile:
For example if I were to unlike the fist post and refresh the page I would no longer see that post on the feed:
Outcome: tests passed
The user should be able to scroll infinitely to continuously view posts:
A loading circle will signify that more posts are loading to allow inifinite scrolling:
Outcome: tests passed
The user should be able to click on a post to view it in more detail:
Post on desktop:
Post on tablet:
Post on mobile:
Outcome: tests passed
A user can like and comment on a post if logged in:
Like and comment on desktop:
Like and comment on tablet:
Like and comment on mobile:
Outcome: tests passed
A user can see the dropdown menu on their comment:
Comment dropdown menu on desktop:
Comment dropdown menu on tablet:
Comment dropdown menu on mobile:
Outcome: tests passed
A user can click 'edit' to edit their comment:
Edit comment on desktop:
Edit comment on tablet:
Edit comment on mobile:
Outcome: tests passed
A user can click 'delete' to delete their comment:
Before deletion:
After deletion:
Outcome: tests passed
The user should not be able to like their own post:
Unable to like on desktop:
Unable to like on tablet:
Unable to like on mobile:
Outcome: tests passed
The user should be able to click 'add post' in the navbar to add a post (logged in):
Add a post on desktop:
Add a post on tablet:
Add a post on mobile:
Outcome: tests passed
The user cannot create a post without an image and a title:
Image required:
Title required:
The image cannot be too large:
Outcome: tests passed
The user should be able to see the dropdown menu on their own post if logged in:
Dropdown menu on desktop:
Dropdown menu on tablet:
Dropdown menu on mobile:
Outcome: tests passed
Clicking on the 'Edit' button should allow the user to edit the post via the edit form:
Edit post on desktop:
Edit post on tablet:
Edit post on mobile:
Outcome: tests passed
Clicking on the 'Delete' button should delete the post. The page resfreshes and it's no longer visable on their profile:
Before deletion:
After deletion:
Outcome: tests passed
The user should be able to see the dropdown menu on their profile page if logged in:
Profile dropdown on desktop:
Profile dropdown on tablet:
Profile dropdown on moblie:
Outcome: tests passed
The user should be able to click 'edit' to be taken to the edit profile form:
The edit profile page on desktop:
The edit profile page on tablet:
The edit profile page on mobile:
Outcome: tests passed
The user should be able to click 'change username' and edit their username:
Edit username on desktop:
Edit username on tablet:
Edit username on mobile:
Outcome: tests passed
The user should be able to click 'change password' and edit their password:
Edit password on desktop:
Edit password on tablet:
Edit password on mobile:
Outcome: tests passed
If the user were to enter a url that doesn't exist the custom 404 page should be displayed:
The 404 page on desktop:
The 404 page on tablet:
The 404 page on mobile:
Outcome: tests passed
Contact form is accessed by clicking the 'Contact' link on the navbar:
The Contact form page on desktop:
The Contact form page on tablet:
The Contact form page on mobile:
Outcome: tests passed
The Contact form fields must be filled in or the form will not submit and the users will see an the error notification:
The Contact form fields and error notification on desktop:
The Contact form fields and error notification on tablet:
The Contact form fields and error notification on mobile:
Outcome: tests passed
After the user clicks submit the contact form is sent to the backend where an admin can review it:
The Contact form backend:
Outcome: tests passed
I used react-notifications to notify users apon certain events. It was super easy to set up by running the install command, importing the notification container and CSS into the files, and adding them into App.js so they render.
When the user submits a contact form they will see the success notification:
The contact notification on desktop:
The contact notification on tablet:
The contact notification on mobile:
Outcome: tests passed
When the user creates a post they will see the success notification:
The post notification on desktop:
The post notification on tablet:
The post notification on mobile:
Outcome: tests passed
When the user edits a post they will see the success notification:
The edit notification on desktop:
The edit notification on tablet:
The edit notification on mobile:
Outcome: tests passed
When the user removes a comment they will see the success notification:
The comment notification on desktop:
The comment notification on tablet:
The comment notification on mobile:
Outcome: tests passed
When the user signs out they will see the success notification:
The sign out notification on desktop:
The sign out notification on tablet:
The sign out notification on mobile:
Outcome: tests passed
- I used the W3C HTML Validator to test my html:
- I used the W3C CSS Validator to test my CSS. There were no errors:
The app.module.css:
The index.css:
The Asset.module.css:
The Avatar.module.css:
The Button.module.css:
The Comment.module.css:
The CommentCreateEditForm.module.css:
The MoreDropdown.module.css:
The navbar.module.css:
The NotFound.module.css:
The Post.module.css:
The PostCreateEditForm.module.css:
The PostsPage.module.css:
The Profile.module.css:
The ProfilePage.module.css:
The SignInUpForm.module.css:
- I used the CI Python Validator to test my python:
In the 'comments' folder:
The apps.py file:
The models.py file:
The serializers.py file:
The urls.py file:
The views.py file:
In the 'followers' folder:
The apps.py file:
The models.py file:
The serializers.py file:
The urls.py file:
The views.py file:
In the 'likes' folder:
The apps.py file:
The models.py file:
The serializers.py file:
The urls.py file:
The views.py file:
In the 'posts' folder:
The apps.py file:
The models.py file:
The serializers.py file:
The urls.py file:
The views.py file:
In the 'drf_api' folder:
The asgi.py file:
The permissions.py file:
The serializers.py file:
The settings.py file:
As you can see I have four lines that are too long, but to my knowledge these cannot be shortened and do not effect the functionality of the code.
The urls.py file:
The views.py file:
The wsgi.py file:
In the 'profiles' folder:
The apps.py file:
The models.py file:
The serializers.py file:
The urls.py file:
The views.py file:
- I used JSHint to test my JavaScript:
In the 'frontend' directory inside 'src':
The App.js file:
The index.js file:
Inside the 'api' folder:
The axiosDefaults.js file:
Inside the 'components' folder:
The Asset.js file:
The Avatar.js file:
The MoreDropdown.js file:
This file is a little strange as there is a lot of warnings here. Several of them are missing semi-colons, however I dont see how you can even add a semi-colon to line 12 for example. In the end I left this file as it was.
The NavBar.js file:
The NotFound.js file:
Inside the 'contexts' folder:
The CurrentUserContext.js file:
The ProfileDataContext.js file:
Inside the 'hooks' folder:
The useClickOutsideToggle.js file:
The useRedirect.js file:
Inside the 'mocks' folder:
The handlers.js file:
Inside the 'pages' folder inside 'auth':
The SignInForm.js file:
The SignUpForm.js file:
Inside the 'pages' folder inside 'comments':
The Comment.js file:
The CommentCreateForm.js file:
The CommentEditForm.js file:
Inside the 'pages' folder inside 'posts':
The Post.js file:
The PostCreateForm.js file:
The PostEditForm.js file:
The PostPage.js file:
The PostsPage.js file:
Inside the 'pages' folder inside 'profiles':
The PopularProfiles.js file:
The Profile.js file:
The ProfileEditForm.js file:
The ProfilePage.js file:
The usernameForm.js file:
The UserPasswordForm.js file:
Inside the 'pages' folder inside 'utils':
The utils.js file:
- I have tested my site using the devtools Lighthouse feature.
The results are not as good as I had hoped, with only 68 on performance due to a lot of images being loaded in the order they are posted by users.
- ContactCreateForm.js:
- Contact models.py:
- Contact serializers.py:
- Contact urls.py:
- Contact views.py:
- Contact admin.py:
- To run the site on port 8000: type 'cd frontend' into the terminal and then in a second terminal 'python3 manage.py runserver'. The will allow you to open the site on port 8000 where you can add '/admin' to the url andd access the Django Administration panel.
- To open a preview of the site on port 8080 (helpful when making changes that don't affect the deployed version unless pushed to Heroku): after the steps above, in the first terminal type 'npm start' and click open browser or preview in the pop up notification.
- Every time you change code you can save the file by pressing 'ctrl s', then the browser can be refreshed to see the change, sometimes you need to press ctrl + shift + R (hard reload) for changes to be updated.
- To save changes, type 'git add .' into a new, third terminal to add all your changes followed by 'git commit -m' and then your message describing what you did in double quotes directly after the 'm'.
- Typing 'git push' will then push your code, and this should be done at the end of every coding session or whenever you want an already deployed site to be updated.
- To allow changes to be visible on the deployed Heroku app the staticfiles folder will need to be updated. To do this simply run this command in the third terminal: 'npm run build && rm -rf ../staticfiles/build && mv build ../staticfiles/.' This essentially deletes the current staticfiles folder and creates a new one with all the changes. Then you will need to add/commit/push again, and redeploy the app in Heroku.
- I used ElephantSQL to install the backend database. I had already set up an account so I could log in and begin.
- I clicked on the green 'Create New Instance' button in the top right.
- I added details such as name, region and the type of plan I wanted which was the free 'Tiny Turtle' plan.
- My database url was then provided for me to copy and paste into my config vars on Heroku and into my env.py file as an os environ variable.
- I used my existing Cloudinary account to host the images for this project. All I had to do was head to my profile and copy my personal 'API Environment variable' url to paste into the env.py file, and add to my config vars in the Heroku app settings.
- The command 'pip install django-cloudinary-storage' installs the library, and then it must be added to the 'Installed Apps' list in settings.py.
- The Cloudinary library also needs a 'CLOUDINARY_STORAGE' variable in the settings.py file that is set to the environment variable in env.py that is the 'API Environment variable' url.
- It also requires a MEDIA_URL in settings.py, the standard Django folder to store media files. This is set to '/media/' so the settings know where to put our image files.
- Lastly is the 'DEFAULT_FILE_STORAGE' variable which is set to MediaCloudinaryStorage.
- For this project I deployed to Heroku at the begining of the project. Deploying early can save you a lot of time later on.
- To do this I created a new Heroku app which I named drfapi1 the same as the project in github.
- In the app settings I made sure to add all of the config vars I would need: the secret key, the port and my database url which I got from ElephantSQL.
- I made sure to comment out the old database 'db.sqlite3' in the settings.py file and added in my new database url.
- I also added my Heroku Hostname to the allowed hosts list.
- Back in Heroku I went to the deployment tab for my app and selected Github. Then I searched for and selected my repository.
- At the bottom of the page I ticked the box to enable automatic deploys, and then clicked deploy.
- To redeploy my site after updates I would repeat the last step above (click the deploy button at the bottom of the settings tab).
Link to deployed site: https://drfapi1-f061a902d0e8.herokuapp.com/