Added intructions to run UnTube locally

README.md

@@ -2,7 +2,7 @@
 
 A simple, comprehensive YouTube playlist manager web app powered by [YouTube Data API V3](https://developers.google.com/youtube/v3/). Built with ❤ using Django, htmx and Bootstrap. 
 
-### _Note: I am currently working on redesigning UnTube with a React.js frontend and DRF for the backend. I will also be revising the project structure and using package managers to make it easier for people to run UnTube locally and contribute to this project. You can check my progress under the `django-react` branch._
+### _Update: I have revised the project structure to make it easier to run locally. Instructions to run UnTube locally can be found below._
 
 ## About
 
@@ -26,9 +26,20 @@ Apart from the base features mentioned above, UnTube offers more:
 
 Check out the [landing page for UnTube](https://bakaabu.pythonanywhere.com/) for more GIF walkthroughs.
 
+## Running UnTube locally
+
+- Follow [Poetry Installation](https://python-poetry.org/docs/#installing-with-the-official-installer) guide for your system.
+- Run `make update` to install all the dependencies and run the migrations. Note that Poetry will automatically create a virtual environment and manage it for you.
+- Run `make local-settings` to create a `local` folder under the root directory that contains a `local-settings.py` file. This file will be ignored by Git. 
+    - **Fill in your Google OAuth credentials in the `local/local-settings.py` file.** Take a look at the _Configuring Google APIs_ section in this [Medium article](https://dev.to/mdrhmn/django-google-authentication-using-django-allauth-18f8) to set up your OAuth credientials. While creating your OAuth credentials on Google IAM, fill in the URIs exactly as mentioned in the article.
+    - Update `SITE_ID` to `2` in `local/local-settings.py`.
+- Run `make run-server` to run the Django server. Visit `127.0.0.1:8000/` in your browser to view the site.
+
+_Optional:_ If see a `SocialApp matching query does not exist` error, please go into the `local/local-settings.py` file and increment the `SITE_ID` by one. Then, when the server re-runs the error should go away when you try to log in. If it still does not go away, keep incrementing it until it does...
+
 ## Notes
 
-I cannot be thankful enough for the existence of <b>htmx</b>. Most of the dynamic interactivity on this site was made possible due to htmx. When I began implementing core site features like moving, deleting, checking for updates, etc., I found myself writing a LOT of AJAX code each and every time, for even the simplest of interactivity. It was when I found htmx my development process sped up like crazy. Who would have thought that instead of replacing the whole page with the response, just replacing a particular target element with the HttpResponse would do wonders? Some of the major places I've used htmx on this site:
+Most of the dynamic interactivity on this site was made possible due to [htmx](htmx.org). When I began implementing core site features like moving, deleting, checking for updates, etc., and tried to make it interactive, I found myself writing a lot of AJAX code each and every time, for even the simplest of interactivity. It was when I found htmx my development process sped up quite a bit. Who would have thought that instead of replacing the whole page with the response, just replacing a particular target element within the page with the HttpResponse would do wonders? Some of the major places I've used htmx on this site:
 
 -    <b>HTMX Triggers</b> htmx offers various triggers upon which it sends requests. One example is the <code>load</code> trigger. After the dashboard finishes loading, I've set up htmx to automatically send a GET request to the backend (this only happens once upon the page load) to check for playlist updates. From the backend, the update status is sent back via a HttpResponse which htmx promptly loads into a target div I specified. That way I did not need to check for updates inside the main view that loaded the page. In a way, htmx helped me check for updates in the "background". I've used this <code>load</code> trigger many other places on the site, one other example is the playlist completion time info is loaded after the playlist page is loaded.<br>
     Instead of sending requests on <code>load</code>, it is also possible to send htmx requests when any HTML element is <code>click</code>ed or <code>revealed</code>. I've used this <Code>click</code> trigger on the mark playlist/video as favorite buttons and the mark videos as watched buttons. Below, I discuss about using the <code>revealed</code> to achieve infinite scrolling.
@@ -41,7 +52,9 @@ Additional interactive features such as the progress bar and tagging playlist we
 
 ## Libraries/Resources Used
 
-- [Bootstrap5]() - Whole UI of the site was built using Bootstrap.
+- [Poetry](https://python-poetry.org/docs/) - Tool to manage my Python dependencies 
+- [django-split-settings](https://pypi.org/project/django-split-settings/) - Tool to help aggregate mulitple setting files into one 
+- [Bootstrap5](https://blog.getbootstrap.com/2021/05/05/bootstrap-5/) - Whole UI of the site was built using Bootstrap.
 - [htmx](https://htmx.org) - Used this beautiful library all throughout my site to help simplify making AJAX calls and focus on building highly interactive site with just a little bit of code.
 - [fontawesome](fontawesome.com/) - All the lovely icons are provided by fontawesome.
 - [Charts.js](https://www.chartjs.org/) - All the charts that you see on the site were made using Charts.js
@@ -56,4 +69,4 @@ Additional interactive features such as the progress bar and tagging playlist we
 ## To Do 
 - Verify my application with Google to remove the 'unverified app warning' screen when a user first signs up.
 - Request Google to increase the quota limit for my web app.
-- Add tutorial to setup and run this project locally.
+- ~Add tutorial to setup and run this project locally.~