Make folder stuff more clear

Author: mzetinajimen

Tech-Lab-On-Campus/NewsFeed/Makefile

@@ -7,48 +7,40 @@ FLASK_PORT    = 8000
 help:
 	@echo "Usage:"
 	@echo "    help            - Prints this screen"
-	@echo "    fmt-backend     - Make the formatting changes directly to the backend code"
 	@echo "    install         - Install all frontend and backend dependencies"
+	@echo "    fmt-backend     - Make the formatting changes directly to the backend code"
 	@echo "    lint-backend    - Lints the backend code"
 	@echo "    redis-in-docker - Runs redis in a docker container"
-	@echo "    run     		   - Run both the backend and frontend"
 	@echo "    run-backend     - Run the development version of the backend flask app"
 	@echo "    run-frontend    - Run the frontend version of this application"
 	@echo "    clean           - Clean out temporaries"
 
-
-.PHONY: install
 install:
 	cd backend && $(PYTHON) -m pip install -e .[dev]
 	cd frontend && npm install --save-dev
 
 .PHONY: fmt-backend
-fmt-backend:
+fmt-backend: install
 	$(PYTHON) -m ruff format
 	$(PYTHON) -m ruff check --fix
 
-.PHONY: run-backend
-run-backend:
-	FLASK_APP=$(FLASK_APP) flask run --host=0.0.0.0 --port=${FLASK_PORT}
-
 .PHONY: lint-backend
-lint-backend:
+lint-backend: install
 	$(PYTHON) -m ruff check
 	$(PYTHON) -m mypy backend/app --show-error-codes
 
+.PHONY: run-backend
+run-backend: install
+	FLASK_APP=$(FLASK_APP) flask run --host=0.0.0.0 --port=${FLASK_PORT}
+
 .PHONY: redis-in-docker
 redis-in-docker:
 	docker compose up -d redis
 
 .PHONY: run-frontend
-run-frontend:
+run-frontend: install
 	cd frontend && npm run dev
 
-.PHONY: run
-run:
-	flask run --host=0.0.0.0 --port=${FLASK_PORT} &
-	cd frontend && npm run dev &
-
 .PHONY: clean
 clean:
 	@echo "Removing temporary files"

Tech-Lab-On-Campus/NewsFeed/docs/backend.md

@@ -3,9 +3,10 @@
 You are tasked to get news articles from Redis Cache. You will be implementing two functions in order to display them on the News Feed Website. Do not worry about reading in the data from Redis; this is done for you in `backend/app/utils/redis.py`.
 
 ## Hints:
-* **Hint 1:** There is only one function from `backend/app/utils/redis.py` you will need to fetch articles.
+* **Hint 1:** There is only one function from `backend/app/utils/redis.py` you will need to fetch articles. It can return any object you store in redis and take any shape you like.
 * **Hint 2:** In order to get the articles, look at how the data is written into Redis in `backend/app/__init__.py`.
 * **Hint 3**: You can test the backend / API changes without the frontend code! Run `localhost:8000/{endpoint}`.
+- **Hint 4:** The relevant resources can be found from [resources](./resources/overview.md).
 
 ## Part 1: Write a function to Format Data
 In `backend/app/newsfeed.py`, implement a private method that can format the data into an article object. Check a json file in `backend/app/resources/dataset/news` to retrieve necessary information to create an article object.

Tech-Lab-On-Campus/NewsFeed/docs/frontend.md

@@ -7,6 +7,7 @@ You are tasked with populating the frontend of a news feed webpage which is goin
 - **Hint 1:** Some classes included in `frontend/src/styles/globals.css` may help with styling.
 - **Hint 2:** [Array.map()]((https://www.geeksforgeeks.org/typescript-array-map-method/)) may be useful.
 - **Hint 3:** This [Medium blog](https://medium.com/@bhanu.mt.1501/api-calls-in-react-js-342a09d5315f) may be useful to figure how to fetch data.
+- **Hint 4:** The relevant resources can be found from [resources](./resources/overview.md).
 
 ## Part 1 : Display a Featured News Article
 In `frontend/src/components/FeaturedNews.tsx` implement the component that will display the featured news article.

Tech-Lab-On-Campus/NewsFeed/docs/index.md

@@ -31,7 +31,7 @@ By participating in this tech lab, students will:
 - Develop APIs to handle data requests and responses.
 - Integrate Redis for storing data to improve performance.
 
-### Frontend (React)
+### Frontend (NextJS/React)
 
 - Create a user interface to display data retrieved from the backend.
 - Implement forms and components to interact with the backend APIs.
@@ -69,9 +69,20 @@ VS Code may also show a pop up requesting to repoen in container, you can also c
 
 ### Run the Website
 
-1. Open up a new terminal window, you can use `` Ctrl+Shift+` ``
+All of the `make` commands should be run from the Newfeed folder (using the `cd bbit-learning-labs/Tech-Lab-On-Campus/NewsFeed`
+command from above should have placed you in the right folder). You can also simplify your workspace by simply opening
+the Newsfeed folder in VS Code. To check that you are in the right folder on your computer terminal:
+
+1. Run `pwd`
+2. Verify that is says `/local/path/to/bbit-learning-labs/Tech-Lab-On-Campus/NewsFeed`, where "/local/path/to" is your
+local computers path to the bbit-learning-labs folder you cloned. An example of this would be: "/user/USERNAME/Downloads",
+but this will vary from person to person.
+
+To get the web app up and running:
+
+1. Open up a new **VS Code terminal window**, you can use <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>`</kbd>
 2. In the terminal, run `make run-backend` to run the backend
-3. Open up another new terminal window, you can use `` Ctrl+Shift+` `` again
+3. Open up another new terminal window, you can use <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>`</kbd> again
 4. In the terminal, run `make run-frontend` to run the frontend
 
 ✨ You should now be ready to develop! ✨
@@ -97,11 +108,19 @@ If you are encountering issues with docker, you can use Github codespaces instea
 9. Open up a new terminal and run `make run-frontend`
 10. A pop up should appear saying that port 3000 is in use. Click on `Open in Browser`. If not, the link can be opened from the terminal window
 
+### Starting Frontend
+
+- Clicking on http://localhost:3000 in the terminal opens to a blank page in the browser?
+    - Make sure you have done `make run` from the NewsFeed folder (where the Makefile is)
+    - It will probably have opened to 0.0.0.0:3000, just rewrite the url to localhost:3000 in the browser and it should load.
+- npm packages are not loading
+    - If you are a bloomberg engineer, try turning off bbpvn while dev container sets up
+    - Otherwise, try running make clean or deleting any package.json or node_module directories and running:
+    `npm install` from within the `./frontend` folder. (Can reach via `cd frontend`)
+    - If this does not work, try to open in codespaces, see [issues with docker](#issues-with-docker) section above.
+
 ## Resources
 
-- [React Documentation](https://reactjs.org/docs/getting-started.html)
-- [Flask Documentation](https://flask.palletsprojects.com/en/2.0.x/)
-- [Redis Documentation](https://redis.io/documentation)
-- [Docker Documentation](https://docs.docker.com/)
+- [Resources](./resources/)
 
 We hope you enjoy this learning experience and look forward to seeing your innovative solutions!

Tech-Lab-On-Campus/NewsFeed/docs/resources/overview.md

@@ -0,0 +1,12 @@
+# Instructions for creating resource documents
+
+In this directory, you can find introductions to the basic functionality of the technologies that will be used for this tech lab.
+
+The technologies planned to be used are:
+* [Git](./git-basics.md)
+* [Docker](./docker-basics.md)
+* [Python](./python-basics.md)
+* [Redis](./redis-basics.md)
+* [JavaScript](./html-basics.md)
+* [React](./react-basics.md)
+* [NextJS](./next-js-bascis.md)

Tech-Lab-On-Campus/NewsFeed/docs/resources/resources.md

@@ -5,6 +5,7 @@ nav:
   - Frontend: frontend.md
   - Interview Question Prompt: api-question-prompt.md
   - Resources:
+    - Overview: resources/overview.md
     - Git Basics: resources/git-basics.md
     - Docker Basics: resources/docker-basics.md
     - Python Basics: resources/python-basics.md