Refactor README and documentation structure

Author: arilivigni

README.md

@@ -25,8 +25,9 @@ Without further ado, let's get started.
 
 ## Table of Contents
 
-1. [Story](docs/1_Story)
-2. [Prerequisites and development environment setup](docs/2_Prerequisites)
-3. [Getting started - app frontend and backend creation](docs/3_GettingStarted)
-4. [OctoFit Tracker database and app backend setup](docs/4_BackendSettings)
-5. [Populate the database with sample data](docs/5_PopulateDBwData)
+1. [The OctoFit Tracker app story](docs/1_Story/README.md)
+2. [Prerequisites and asetup of the development environment](docs/2_Prerequisites/README.md)
+3. [Getting started - app frontend and backend creation](docs/3_GettingStarted/README.md)
+4. [The OctoFit Tracker database and app backend creation](docs/4_BackendSettings/README.md)
+5. [Populate the database with sample data](docs/5_PopulateDBwData/README.md)
+6. [Using the Codespace endpoint to access the Django REST Framework](docs/6_CodespaceDjangoRESTFramework/README.md)

docs/1_Story/README.md

@@ -1,4 +1,4 @@
-# Your journey to develop a fitness tracker app with GitHub Copilot now begins!
+# The OctoFit Tracker app story
 
 ![OctoFit Tracker](../../images/octofit-tracker.png)
 
@@ -105,4 +105,4 @@ Join us for this exciting journey into the future of software development, where
 
 In this workshop, you are going to assume to be the lead developer. You will be responsible for building the application with GitHub Copilot’s help. Good luck!
 
-[Next: Prerequisite and setup of the development environment](../2_Prerequisites)
+[Next: Prerequisite and setup of the development environment](../2_Prerequisites/README.md)

docs/2_Prerequisites/README.md

@@ -38,4 +38,4 @@ When the codespace is created you may get the following message for the GitHub C
 - If you choose this option we recommend using VSCode as your IDE, but this workshop is not limited to VSCode
 - URL for REACT and Django will be `http://localhost` or `http://127.0.0.1`
 
-[Back :: Previous: Story](../1_Story) | [Next :: Getting started](../3_GettingStarted/)
+[Back :: Previous: The OctoFit Tracker app story](../1_Story/README.md) | [Next :: Getting started - app frontend and backend creation](../3_GettingStarted/README.md)

docs/3_GettingStarted/README.md

@@ -1,4 +1,4 @@
-# Getting started
+# Getting started - app frontend and backend creation
 
 In this section, we will start by setting up the face of our OctoFit application by building the front end page. To do that, we will keep it as simple as possible for now. We need resources like HTML and CSS to start decorating first, and we will later modify the page to extend the functionalities.
 
@@ -75,4 +75,4 @@ Important to avoid using public code and we do NOT need to initialize the git re
 
 ![octofit-tracker app directory tree](./3_3_OctoFitTrackerDirTree.png)</br>
 
-[Back :: Previous: Prerequisites and development environment setup](../2_Prerequisites) | [Next :: OctoFit Tracker database and app backend setup](../4_BackendSettings/)
+[Back :: Previous: Prerequisites and development environment setup](../2_Prerequisites/README.md) | [Next :: The OctoFit Tracker database and app backend creation](../4_BackendSettings/README.md)

docs/4_BackendSettings/4_1_BackendSettingsPrompt.png

@@ -1,4 +1,4 @@
-# OctoFit Tracker database and app backend setup
+# The OctoFit Tracker database and app backend creation
 
 ## Initialize the database, setup database and install apps in settings.py, models, serializers, urls, and views
 
@@ -16,10 +16,11 @@ In our next steps lets think step by step and setup the following in this order
 6. make sure urls.py has a root, admin, and api endpoints
 ```
 
-![OctoFit Tracker backend files](./4_1_OctoFitTrackerBackendFiles.png)</br>
-![update settings](./4_2_UpdateSettings.png)</br>
-![project files - models and serializers](./4_3_CreateBackendProjectFiles1.png)</br>
-![project files - views and urls](./4_3_CreateBackendProjectFiles2.png)</br>
+![OctoFit Tracker backend prompt](./4_1_BackendSettingsPrompt.png)</br>
+![OctoFit Tracker backend response step 1](./4_2_BackendSettingsStep1.png)</br>
+![OctoFit Tracker backend response step 2 and 3](./4_2_BackendSettingsStep2Step3_1.png)</br>
+![OctoFit Tracker backend response step 3 continued](./4_2_BackendSettingsStep3_2.png)</br>
+![OctoFit Tracker backend response step 3 continued](./4_2_BackendSettingsStep3_3.png)</br>
 
 ### Sample settings.py
 
@@ -188,4 +189,4 @@ urlpatterns = [
 ]
 ```
 
-[Back :: Previous: Getting started](../3_GettingStarted) | [Next :: Populate database with data via manage.py](../5_PopulateDBwData)
+[Back :: Previous: Getting started - app frontend and backend creation](../3_GettingStarted/README.md) | [Next :: Populate the database with sample data](../5_PopulateDBwData/README.md)

docs/4_BackendSettings/4_1_OctoFitTrackerBackendFiles.png

@@ -1,4 +1,4 @@
-# Populate database with data via manage.py
+# Populate the database with sample data
 
 ## Example of not being specific
 
@@ -27,7 +27,9 @@ Let's use manage.py to get the database setup and populated based on fields in m
 - Include steps to migrate in the octofit_tracker project
 ```
 
-![populate db Code app name octofit_tracker](./5_2_PopulateDbCodeOctoFitAppSecond.png)
+![populate the database with data prompt](./5_1_PopulateDBwDataPrompt.png)
+![create the populate_db.py step 1_1](./5_2_PopulateDBwDataStep1_1.png)
+![create the populate_db.py step 1_2](./5_2_PopulateDBwDataStep1_2.png)
 
 ### Sample code for populate_db.py
 
@@ -143,3 +145,5 @@ class Command(BaseCommand):
 ```
 
 ![Migrate and populate db](./5_3_MigratePopulateDb.png)
+
+[Back :: Previous: Getting started - app frontend and backend creation](../4_BackendSettings/README.md) | [Next :: Using the Codespace endpoint to access the Django REST Framework](../6_CodespaceDjangoRESTFramework/README.md)

docs/4_BackendSettings/4_2_BackendSettingsStep1.png

@@ -0,0 +1,40 @@
+# Using the Codespace endpoint to access the Django REST Framework
+
+> NOTE: Skip this step if not using codespaces
+
+Type the following prompt in GitHub Copilot Chat:
+
+```text
+Let's do the following step by step
+
+- update #file:views.py to replace the return for the rest api url endpiints with the codespace url http://upgraded-space-happiness-959pr7vpgw3p7vv.github.dev/-8000.app.github.dev for django
+- Replace <codespace-name> with [REPLACE-THIS-WITH-YOUR-CODESPACE-NAME]
+- Run the Django server
+
+HTTP 200 OK
+Allow: GET, HEAD, OPTIONS
+Content-Type: application/json
+Vary: Accept
+
+{
+    "users": "http://localhost:8000/api/users/?format=api",
+    "teams": "http://localhost:8000/api/teams/?format=api",
+    "activities": "http://localhost:8000/api/activities/?format=api",
+    "leaderboards": "http://localhost:8000/api/leaderboards/?format=api",
+    "workouts": "http://localhost:8000/api/workouts/?format=api"
+}
+
+becomes
+
+HTTP 200 OK Allow: GET, HEAD, OPTIONS Content-Type: application/json Vary: Accept
+
+{ 
+    "users": "http://<codespace-name>-8000.app.github.dev/users/api/users/?format=api",
+    "teams": "http://<codespace-name>-8000.app.github.dev/api/teams/?format=api",
+    "activities": "http://<codespace-name>-8000.app.github.dev/api/activities/?format=api",
+    "leaderboards": "http://<codespace-name>-8000.app.github.dev/api/leaderboards/?format=api",
+    "workouts": "http://<codespace-name>-8000.app.github.dev/api/workouts/?format=api" 
+}
+```
+
+[Back :: Previous: Getting started - app frontend and backend creation](../4_BackendSettings/README.md | [Next :: Using the Codespace endpoint to access the Django REST Framework](../6_CodesapceDjangoRESTFramework/)

docs/4_BackendSettings/4_2_BackendSettingsStep2Step3_1.png

@@ -1,6 +1,7 @@
 Django==4.1
 djangorestframework==3.14.0
 django-allauth==0.51.0
+django-cors-headers==4.5.0
 dj-rest-auth
 djongo==1.3.6
 pymongo==3.12