diff --git a/Tech-Lab-On-Campus/NewsFeed/backend/Dockerfile b/Tech-Lab-On-Campus/NewsFeed/backend/Dockerfile index 79e2d790..a7d73351 100644 --- a/Tech-Lab-On-Campus/NewsFeed/backend/Dockerfile +++ b/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 && \ diff --git a/Tech-Lab-On-Campus/NewsFeed/backend/app/newsfeed.py b/Tech-Lab-On-Campus/NewsFeed/backend/app/newsfeed.py index 163bac43..021e71a7 100644 --- a/Tech-Lab-On-Campus/NewsFeed/backend/app/newsfeed.py +++ b/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 diff --git a/Tech-Lab-On-Campus/NewsFeed/docker-compose.yml b/Tech-Lab-On-Campus/NewsFeed/docker-compose.yml index 761e0cb6..dfb3e493 100644 --- a/Tech-Lab-On-Campus/NewsFeed/docker-compose.yml +++ b/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 diff --git a/Tech-Lab-On-Campus/NewsFeed/docs/backend.md b/Tech-Lab-On-Campus/NewsFeed/docs/backend.md index 29c6c224..d618b6a5 100644 --- a/Tech-Lab-On-Campus/NewsFeed/docs/backend.md +++ b/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. \ No newline at end of file diff --git a/Tech-Lab-On-Campus/NewsFeed/docs/frontend.md b/Tech-Lab-On-Campus/NewsFeed/docs/frontend.md index 133ec07e..32768273 100644 --- a/Tech-Lab-On-Campus/NewsFeed/docs/frontend.md +++ b/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! \ No newline at end of file diff --git a/Tech-Lab-On-Campus/NewsFeed/docs/images/arch_diagram.png b/Tech-Lab-On-Campus/NewsFeed/docs/images/arch_diagram.png new file mode 100644 index 00000000..0c4098bb Binary files /dev/null and b/Tech-Lab-On-Campus/NewsFeed/docs/images/arch_diagram.png differ diff --git a/Tech-Lab-On-Campus/NewsFeed/frontend/Dockerfile b/Tech-Lab-On-Campus/NewsFeed/frontend/Dockerfile index c8fa74d4..b266c2f7 100644 --- a/Tech-Lab-On-Campus/NewsFeed/frontend/Dockerfile +++ b/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"] diff --git a/Tech-Lab-On-Campus/NewsFeed/frontend/src/styles/globals.css b/Tech-Lab-On-Campus/NewsFeed/frontend/src/styles/globals.css index f5377e42..b0d66bc1 100644 --- a/Tech-Lab-On-Campus/NewsFeed/frontend/src/styles/globals.css +++ b/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 }