Latest feedback updates

Tech-Lab-On-Campus/NewsFeed/backend/Dockerfile

@@ -1,11 +1,12 @@
 FROM python:3.12-slim
 
-WORKDIR /app
+WORKDIR /workspace/backend
 
 COPY . .
 
 # Ensure the resources directory is copied
-COPY ./resources ./resources
+# COPY ./resources ./resources
+# COPY resources/ /resources/
 
 RUN --mount=type=cache,target=/root/.cache \
     python3.12 -m pip install -U pip && \

Tech-Lab-On-Campus/NewsFeed/backend/app/newsfeed.py

@@ -24,8 +24,8 @@ def get_all_news() -> list[Article]:
     return []
 
 
-def get_featured_news() -> Article | None:
+def get_featured_article() -> Article | None:
     """Get the featured news article from the datastore."""
-    # 1. Get all the articles
-    # 2. Return as a list of articles sorted by most recent date
+    # 1. Get all the articles and sort by most recent
+    # 2. Return the most recent article
     return None

Tech-Lab-On-Campus/NewsFeed/docker-compose.yml

@@ -4,21 +4,53 @@ services:
     hostname: redis
     ports:
       - "6379:6379"
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
 
-  dev:
+  frontend:
     build:
-      context: .
+      context: ./frontend
       dockerfile: Dockerfile
     ports:
       - "3000:3000"
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    environment:
+      - BACKEND_API_URL=http://backend:8000
+    command: npm run dev
+
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    ports:
       - "8000:8000"
-    init: true
-    tty: true
-    depends_on:
-      - redis
+    volumes:
+      - ./backend:/workspace/backend
     environment:
       - REDIS_HOST=redis
       - REDIS_PORT=6379
+      - FLASK_APP=backend/app
+      - FLASK_ENV=development
+    depends_on:
+      redis:
+        condition: service_healthy
+    command: python -m flask run --host=0.0.0.0 --port=8000 --debug
+
+  dev:
+    build:
+      context: .
+      dockerfile: Dockerfile
     volumes:
       - .:/workspace
+    init: true
+    tty: true
+    depends_on:
+      - frontend
+      - backend
+      - redis
     command: /bin/bash

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

@@ -7,6 +7,7 @@ You are tasked to get news articles from Redis Cache. You will be implementing t
 * **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).
+- **Hint 5:** You will have to parse a datetime returned from Redis. Heres a useful [resource](https://docs.python.org/3/library/datetime.html#datetime.date.fromisoformat).
 
 ## 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.
@@ -24,8 +25,6 @@ Once you finish `get_all_news`, implement `get_newsfeed` function in the `backen
 In `backend/app/newsfeed.py`, implement the `get_featured_news` method. You should:
 
 * Get all the articles
-* Sort the articles by most recent published date and return the list
-
-Once you finish `get_featured_news`, implement `get_featured_article` function in the `backend/app/__init__.py` for the API. You should be able to utilize the function you implemented above.
-
+* Sort the articles by most recent published date and return the most recent article
 
+Once you finish `get_featured_news`, implement `get_featured_article` function in the `backend/app/__init__.py` for the API. You should be able to utilize the function you implemented above.

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

@@ -4,7 +4,7 @@ You are tasked with populating the frontend of a news feed webpage which is goin
 
 ## Hints
 
-- **Hint 1:** Some classes included in `frontend/src/styles/globals.css` may help with styling.
+- **Hint 1:** Some classes included in `frontend/src/styles/globals.css` may help with styling. Read [HTML Basics](./resources/html-basics.md) for more details on how to use them.
 - **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).
@@ -51,5 +51,4 @@ Once completing Part 4, you should be able to see news articles different from t
 You now have a news feed up and running connected to a backend service! You can follow up with some of the following optimizations if interested.
 
 - **Responsiveness:** a website typically adjusts itself to fit the screen it is being displayed on in order to make it most presentable to the end user. Play around with the layout and responsive properties to find the best experience.
-- **Styling:** this is a pretty plain website that we have so far. Are there any styling properties or elements you can add to make it look more like a news website? Look at [Bloomberg News](https://www.bloomberg.com) for inspo!
-- **[Deploy to Heroku](https://github.com/marketplace/actions/deploy-to-heroku):** You have a full website now, which you can deploy to heroku to use as part of your portfolio!
+- **Styling:** this is a pretty plain website that we have so far. Are there any styling properties or elements you can add to make it look more like a news website? Look at [Bloomberg News](https://www.bloomberg.com) for inspo!

Tech-Lab-On-Campus/NewsFeed/frontend/Dockerfile

@@ -6,7 +6,7 @@ COPY package*.json ./
 
 RUN npm install
 
+# Remove build step for development
 COPY . .
-RUN npm run build
 
 CMD ["npm", "run", "dev"]

Tech-Lab-On-Campus/NewsFeed/frontend/src/styles/globals.css

@@ -53,7 +53,6 @@ There are plenty of different styling frameworks to use, and we encourage you to
 .featured-story-summary {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   @apply line-clamp-[8] lg:line-clamp-none text-body
 }
 .featured-story-author {
@@ -103,7 +102,6 @@ There are plenty of different styling frameworks to use, and we encourage you to
 .story-summary {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   @apply line-clamp-[8] lg:line-clamp-none text-body
 }