You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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`.
4
4
5
-
### Hints:
6
-
***Hint 1:** There is only one function from `backend/app/utils/redis.py` you will need to fetch articles.
7
-
***Hint 2:** In order to get the articles, look at how the data is written into Redis in `backend/app/__init__.py`.
8
-
***Hint 3**: You can test the backend / API changes without the frontend code! Run `localhost:8000/{endpoint}`.
5
+
## Hints:
6
+
***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.
7
+
***Hint 2:** In order to get the articles, look at how the data is written into Redis in `backend/app/__init__.py`.
8
+
***Hint 3**: You can test the backend / API changes without the frontend code! Run `localhost:8000/{endpoint}`.
9
+
-**Hint 4:** The relevant resources can be found from [resources](./resources/overview.md).
9
10
10
-
###Part 1: Write a function to Format Data
11
-
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.
11
+
## Part 1: Write a function to Format Data
12
+
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.
12
13
13
-
###Part 2: Retrieve all News Articles
14
+
## Part 2: Retrieve all News Articles
14
15
In `backend/app/newsfeed.py`, implement the `get_all_news` method. You should:
15
16
16
17
* Figure out how you can retrieve the data from Redis
17
-
* Format the data into Articles
18
-
* Return the data as a list of articles.
18
+
* Format the data into Articles
19
+
* Return the data as a list of articles.
19
20
20
-
Once you finish `get_all_news`, implement `get_newsfeed` function in the `backend/app/__init__.py` for the API. You should be able to utilize the function you implemented above.
21
+
Once you finish `get_all_news`, implement `get_newsfeed` function in the `backend/app/__init__.py` for the API. You should be able to utilize the function you implemented above.
21
22
22
-
23
-
### Part 3: Retrieve Featured News
23
+
## Part 3: Retrieve Featured News
24
24
In `backend/app/newsfeed.py`, implement the `get_featured_news` method. You should:
25
25
26
26
* Get all the articles
27
-
* Sort the articles by most recent published date and return the list
27
+
* Sort the articles by most recent published date and return the list
28
28
29
-
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.
29
+
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.
You are tasked with populating the frontend of a news feed webpage which is going to display news articles. You will populate a _Featured News_ section as well as a _News Feed_ Section. You will take advantage of reusable components in [React](https://react.dev/learn). After that, you will connect the frontend to the backend in order to get data from the api your backend partner built.
4
4
5
-
###Hints
5
+
## Hints
6
6
7
7
-**Hint 1:** Some classes included in `frontend/src/styles/globals.css` may help with styling.
8
8
-**Hint 2:**[Array.map()]((https://www.geeksforgeeks.org/typescript-array-map-method/)) may be useful.
9
9
-**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.
10
+
-**Hint 4:** The relevant resources can be found from [resources](./resources/overview.md).
10
11
11
-
12
-
### Part 1 : Display a Featured News Article
12
+
## Part 1 : Display a Featured News Article
13
13
In `frontend/src/components/FeaturedNews.tsx` implement the component that will display the featured news article.
14
14
15
15
* It should use the props to display:
@@ -20,8 +20,7 @@ In `frontend/src/components/FeaturedNews.tsx` implement the component that will
20
20
Once completing Part 1, Once completing this part, you should be able to see the Featured News Article at the top of the page.
21
21
For more information on how to create a component, refer to the [react basics](./resources/react-basics.md) docs.
22
22
23
-
24
-
### Part 2 : Create a reusable news card to use with general stories
23
+
## Part 2 : Create a reusable news card to use with general stories
25
24
In `frontend/src/components/NewsCard.tsx` implement a reusable news card component to use with the news feed articles (articles that aren't the featured story)
26
25
27
26
* The `NewsCard` component should have these properties:
@@ -32,15 +31,14 @@ In `frontend/src/components/NewsCard.tsx` implement a reusable news card compone
32
31
This component should be reusable so that it can be used to populate all stories on the news page.
33
32
Once completing Part 2, you should be able to see a few test articles on the right side of the screen.
34
33
35
-
36
-
### Part 3 : Populate a news feed with the given `articles`
34
+
## Part 3 : Populate a news feed with the given `articles`
37
35
38
36
In `frontend/src/components/NewsFeed.tsx` populate a news feed using the given articles
39
37
40
38
* Use the reusable News Card Component created in Part 2 to create the articles in the new feeds
41
39
Once completing Part 3, you should be able to see a grid of news articles at the bottom of the page under the Featured News Article Section.
42
40
43
-
###Part 4 : API Integration
41
+
## Part 4 : API Integration
44
42
In `frontend/src/pages/news.tsx` fetch article data from the API call. The Featured Article Data and the News Feed Data should both come from the API
45
43
46
44
* Fetch the featured article from `/api/news/get-featured-article`
@@ -49,9 +47,9 @@ In `frontend/src/pages/news.tsx` fetch article data from the API call. The Featu
49
47
50
48
Once completing Part 4, you should be able to see news articles different from the dummy data originally provided.
51
49
52
-
###Stretch Goals
50
+
## Stretch Goals
53
51
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.
54
52
55
-
1.**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.
56
-
1.**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!
57
-
1.**[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!
53
+
-**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.
54
+
-**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!
55
+
-**[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!
Copy file name to clipboardExpand all lines: Tech-Lab-On-Campus/NewsFeed/docs/index.md
+57-34Lines changed: 57 additions & 34 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,14 +6,14 @@ This tech lab is inspired by the real-world applications and technologies used a
6
6
7
7
## Project Overview
8
8
9
-
Students will work on creating a web application that involves both frontend and backend development. The frontend will be built using React, while the backend will be implemented using Flask. Redis will be used for data caching, and Docker will be utilized to containerize the application for easy deployment.
9
+
Students will work on creating a web application that involves both frontend and backend development. The frontend will be built using React, while the backend will be implemented using Flask. Redis will be used for data storage, and Docker will be utilized to containerize the application for easy deployment.
10
10
11
11
## Technologies Used
12
12
13
13
-**React**: A JavaScript library for building user interfaces.
14
14
-**Flask**: A lightweight WSGI web application framework in Python.
15
-
-**Redis**: An in-memory data structure store, used as a database
16
-
-**Docker**: A platform for developing, shipping, and running applications in containers.
15
+
-**Redis**: An in-memory data structure store, used as a data store.
16
+
-**Docker**: A platform for developing, shipping, and running applications in standardized containers.
17
17
18
18
## Learning Objectives
19
19
@@ -26,78 +26,101 @@ By participating in this tech lab, students will:
26
26
27
27
## Project Tasks
28
28
29
-
### Frontend (React)
30
-
31
-
- Create a user interface to display data retrieved from the backend.
32
-
- Implement forms and components to interact with the backend APIs.
33
-
34
29
### Backend (Flask)
35
30
36
31
- Develop APIs to handle data requests and responses.
37
-
- Integrate Redis for caching data to improve performance.
32
+
- Integrate Redis for storing data to improve performance.
38
33
39
-
### Docker
34
+
### Frontend (NextJS/React)
40
35
41
-
-Containerize the React and Flask applications.
42
-
-Set up Docker Compose to manage multi-container applications.
36
+
-Create a user interface to display data retrieved from the backend.
37
+
-Implement forms and components to interact with the backend APIs.
43
38
44
39
## Getting Started
45
40
46
-
#### Prerequisites
41
+
### Prerequisites
42
+
43
+
Make sure the following technologies are downloaded prior to starting:
47
44
48
-
- Docker
49
-
- Git
50
-
- VS Code
51
-
- VS Code Dev Containers extension
45
+
-[Docker](https://docs.docker.com/desktop/)
46
+
-[Git](https://git-scm.com/downloads)
47
+
-[VS Code](https://code.visualstudio.com/)
48
+
-[VS Code Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
52
49
53
50
To get started with the project, follow these steps:
54
51
55
-
####Fork and Clone the Project Repository
52
+
### Fork and Clone the Project Repository
56
53
57
54
1. Fork the project repository
58
55
2. Clone the forked repo into your working directory, and navigate to it:
2. Install the `Dev Containers` extension [here](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers). If you already have it installed, continue to the next step.
68
65
3. Open up the Command Palette in VSCode by either `Ctrl+Shift+P` (Windows) or `Cmd+Shift+P` (Mac) and type `Dev Containers`.
66
+
VS Code may also show a pop up requesting to repoen in container, you can also click this.
69
67
4. Click on `Dev Containers: Reopen in Container`
70
68
5. VSCode will start downloading some docker images and install the necessary python and npm packages
71
69
72
-
####Run the Website
70
+
### Run the Website
73
71
74
-
1. Open up a new terminal window, you can use `` Ctrl+Shift+` ``
72
+
All of the `make` commands should be run from the Newfeed folder (using the `cd bbit-learning-labs/Tech-Lab-On-Campus/NewsFeed`
73
+
command from above should have placed you in the right folder). You can also simplify your workspace by simply opening
74
+
the Newsfeed folder in VS Code. To check that you are in the right folder on your computer terminal:
75
+
76
+
1. Run `pwd`
77
+
2. Verify that is says `/local/path/to/bbit-learning-labs/Tech-Lab-On-Campus/NewsFeed`, where "/local/path/to" is your
78
+
local computers path to the bbit-learning-labs folder you cloned. An example of this would be: "/user/USERNAME/Downloads",
79
+
but this will vary from person to person.
80
+
81
+
To get the web app up and running:
82
+
83
+
1. Open up a new **VS Code terminal window**, you can use <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>`</kbd>
75
84
2. In the terminal, run `make run-backend` to run the backend
76
-
3. Open up another new terminal window, you can use ``Ctrl+Shift+` `` again
85
+
3. Open up another new terminal window, you can use <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>`</kbd> again
77
86
4. In the terminal, run `make run-frontend` to run the frontend
78
87
79
88
✨ You should now be ready to develop! ✨
80
89
81
-
#### Issues with Docker
90
+
### Developing
91
+
92
+
-[Backend Tasks](./backend.md)
93
+
-[Frontend Tasks](./frontend.md)
94
+
95
+
## Troubleshooting
96
+
97
+
### Issues with Docker
82
98
If you are encountering issues with docker, you can use Github codespaces instead:
83
99
84
-
1. Fork the repo
85
-
2. Navigate to the forked repo
86
-
3. Click on the green `< > Code` button
87
-
4. Select the Codespaces tab and click on the `+` button
100
+
1. Fork the repo
101
+
2. Navigate to the forked repo
102
+
3. Click on the green `< > Code` button
103
+
4. Select the Codespaces tab and click on the `+` button
88
104
5. In codespaces, open a new terminal and run `cd Tech-Lab-On-Campus/NewsFeed/`
89
105
6. run `make install`
90
106
7. run `make redis-in-docker`
91
107
8. run `make run-backend`
92
-
9. Open up a new terminal and run `make run-frontend`
93
-
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
108
+
9. Open up a new terminal and run `make run-frontend`
109
+
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
110
+
111
+
### Starting Frontend
94
112
113
+
- Clicking on http://localhost:3000 in the terminal opens to a blank page in the browser?
114
+
- Make sure you have done `make run` from the NewsFeed folder (where the Makefile is)
115
+
- 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.
116
+
- npm packages are not loading
117
+
- If you are a bloomberg engineer, try turning off bbpvn while dev container sets up
118
+
- Otherwise, try running make clean or deleting any package.json or node_module directories and running:
119
+
`npm install` from within the `./frontend` folder. (Can reach via `cd frontend`)
120
+
- If this does not work, try to open in codespaces, see [issues with docker](#issues-with-docker) section above.
0 commit comments