[{"data":1,"prerenderedAt":3205},["ShallowReactive",2],{"blog-building-news-aggregator-app":3},{"id":4,"title":5,"author":6,"body":7,"date":3193,"description":3194,"draft":3195,"extension":3196,"image":3197,"meta":3198,"navigation":170,"path":3199,"seo":3200,"sitemap":3201,"stem":3202,"tags":3203,"__hash__":3204},"blog\u002Fblog\u002Fbuilding-news-aggregator-app.md","Building a News Aggregator App with AllNewsAPI","AllNewsAPI Team",{"type":8,"value":9,"toc":3179},"minimark",[10,14,19,22,41,45,48,59,63,66,122,125,143,147,154,376,380,386,787,791,796,1506,1510,1516,2749,2753,2759,3091,3095,3102,3110,3114,3129,3136,3140,3143,3160,3164,3167,3175],[11,12,13],"p",{},"In this tutorial, we'll build a complete news aggregator application using AllNewsAPI and React. By the end, you'll have a fully functional app that displays news from multiple countries and categories.",[15,16,18],"h2",{"id":17},"what-well-build","What We'll Build",[11,20,21],{},"Our news aggregator will feature:",[23,24,25,29,32,35,38],"ul",{},[26,27,28],"li",{},"Country-based news filtering (244 countries supported)",[26,30,31],{},"Category selection (business, technology, sports, entertainment, and more)",[26,33,34],{},"Search functionality",[26,36,37],{},"Responsive design",[26,39,40],{},"Real-time updates",[15,42,44],{"id":43},"prerequisites","Prerequisites",[11,46,47],{},"Before we start, make sure you have:",[23,49,50,53,56],{},[26,51,52],{},"Node.js installed (v16 or higher)",[26,54,55],{},"An AllNewsAPI account and API key",[26,57,58],{},"Basic knowledge of React and JavaScript",[15,60,62],{"id":61},"step-1-project-setup","Step 1: Project Setup",[11,64,65],{},"Create a new React app using Vite:",[67,68,73],"pre",{"className":69,"code":70,"language":71,"meta":72,"style":72},"language-bash shiki shiki-themes github-light github-dark","npm create vite@latest news-aggregator -- --template react\ncd news-aggregator\nnpm install\n","bash","",[74,75,76,105,114],"code",{"__ignoreMap":72},[77,78,81,85,89,92,95,99,102],"span",{"class":79,"line":80},"line",1,[77,82,84],{"class":83},"sScJk","npm",[77,86,88],{"class":87},"sZZnC"," create",[77,90,91],{"class":87}," vite@latest",[77,93,94],{"class":87}," news-aggregator",[77,96,98],{"class":97},"sj4cs"," --",[77,100,101],{"class":97}," --template",[77,103,104],{"class":87}," react\n",[77,106,108,111],{"class":79,"line":107},2,[77,109,110],{"class":97},"cd",[77,112,113],{"class":87}," news-aggregator\n",[77,115,117,119],{"class":79,"line":116},3,[77,118,84],{"class":83},[77,120,121],{"class":87}," install\n",[11,123,124],{},"Install additional dependencies:",[67,126,128],{"className":69,"code":127,"language":71,"meta":72,"style":72},"npm install axios date-fns\n",[74,129,130],{"__ignoreMap":72},[77,131,132,134,137,140],{"class":79,"line":80},[77,133,84],{"class":83},[77,135,136],{"class":87}," install",[77,138,139],{"class":87}," axios",[77,141,142],{"class":87}," date-fns\n",[15,144,146],{"id":145},"step-2-create-the-api-service","Step 2: Create the API Service",[11,148,149,150,153],{},"Create a file ",[74,151,152],{},"src\u002Fservices\u002FnewsApi.js",":",[67,155,159],{"className":156,"code":157,"language":158,"meta":72,"style":72},"language-javascript shiki shiki-themes github-light github-dark","import axios from 'axios';\n\nconst API_KEY = import.meta.env.VITE_NEWS_API_KEY;\nconst BASE_URL = 'https:\u002F\u002Fapi.allnewsapi.com';\n\nconst newsApi = axios.create({\n  baseURL: BASE_URL,\n  params: {\n    apikey: API_KEY\n  }\n});\n\nexport const getHeadlines = async (country = 'us', category = null) => {\n  try {\n    const params = { country };\n    if (category) params.category = category;\n    \n    const response = await newsApi.get('\u002Fheadlines', { params });\n    return response.data;\n  } catch (error) {\n    console.error('Error fetching headlines:', error);\n    throw error;\n  }\n};\n\nexport const searchNews = async (query, country = 'us') => {\n  try {\n    const response = await newsApi.get('\u002Fheadlines', {\n      params: { q: query, country }\n    });\n    return response.data;\n  } catch (error) {\n    console.error('Error searching news:', error);\n    throw error;\n  }\n};\n\nexport default newsApi;\n","javascript",[74,160,161,166,172,177,183,188,194,200,206,212,218,224,229,235,241,247,253,259,265,271,277,283,289,294,300,305,311,316,322,328,334,339,344,350,355,360,365,370],{"__ignoreMap":72},[77,162,163],{"class":79,"line":80},[77,164,165],{},"import axios from 'axios';\n",[77,167,168],{"class":79,"line":107},[77,169,171],{"emptyLinePlaceholder":170},true,"\n",[77,173,174],{"class":79,"line":116},[77,175,176],{},"const API_KEY = import.meta.env.VITE_NEWS_API_KEY;\n",[77,178,180],{"class":79,"line":179},4,[77,181,182],{},"const BASE_URL = 'https:\u002F\u002Fapi.allnewsapi.com';\n",[77,184,186],{"class":79,"line":185},5,[77,187,171],{"emptyLinePlaceholder":170},[77,189,191],{"class":79,"line":190},6,[77,192,193],{},"const newsApi = axios.create({\n",[77,195,197],{"class":79,"line":196},7,[77,198,199],{},"  baseURL: BASE_URL,\n",[77,201,203],{"class":79,"line":202},8,[77,204,205],{},"  params: {\n",[77,207,209],{"class":79,"line":208},9,[77,210,211],{},"    apikey: API_KEY\n",[77,213,215],{"class":79,"line":214},10,[77,216,217],{},"  }\n",[77,219,221],{"class":79,"line":220},11,[77,222,223],{},"});\n",[77,225,227],{"class":79,"line":226},12,[77,228,171],{"emptyLinePlaceholder":170},[77,230,232],{"class":79,"line":231},13,[77,233,234],{},"export const getHeadlines = async (country = 'us', category = null) => {\n",[77,236,238],{"class":79,"line":237},14,[77,239,240],{},"  try {\n",[77,242,244],{"class":79,"line":243},15,[77,245,246],{},"    const params = { country };\n",[77,248,250],{"class":79,"line":249},16,[77,251,252],{},"    if (category) params.category = category;\n",[77,254,256],{"class":79,"line":255},17,[77,257,258],{},"    \n",[77,260,262],{"class":79,"line":261},18,[77,263,264],{},"    const response = await newsApi.get('\u002Fheadlines', { params });\n",[77,266,268],{"class":79,"line":267},19,[77,269,270],{},"    return response.data;\n",[77,272,274],{"class":79,"line":273},20,[77,275,276],{},"  } catch (error) {\n",[77,278,280],{"class":79,"line":279},21,[77,281,282],{},"    console.error('Error fetching headlines:', error);\n",[77,284,286],{"class":79,"line":285},22,[77,287,288],{},"    throw error;\n",[77,290,292],{"class":79,"line":291},23,[77,293,217],{},[77,295,297],{"class":79,"line":296},24,[77,298,299],{},"};\n",[77,301,303],{"class":79,"line":302},25,[77,304,171],{"emptyLinePlaceholder":170},[77,306,308],{"class":79,"line":307},26,[77,309,310],{},"export const searchNews = async (query, country = 'us') => {\n",[77,312,314],{"class":79,"line":313},27,[77,315,240],{},[77,317,319],{"class":79,"line":318},28,[77,320,321],{},"    const response = await newsApi.get('\u002Fheadlines', {\n",[77,323,325],{"class":79,"line":324},29,[77,326,327],{},"      params: { q: query, country }\n",[77,329,331],{"class":79,"line":330},30,[77,332,333],{},"    });\n",[77,335,337],{"class":79,"line":336},31,[77,338,270],{},[77,340,342],{"class":79,"line":341},32,[77,343,276],{},[77,345,347],{"class":79,"line":346},33,[77,348,349],{},"    console.error('Error searching news:', error);\n",[77,351,353],{"class":79,"line":352},34,[77,354,288],{},[77,356,358],{"class":79,"line":357},35,[77,359,217],{},[77,361,363],{"class":79,"line":362},36,[77,364,299],{},[77,366,368],{"class":79,"line":367},37,[77,369,171],{"emptyLinePlaceholder":170},[77,371,373],{"class":79,"line":372},38,[77,374,375],{},"export default newsApi;\n",[15,377,379],{"id":378},"step-3-create-the-news-card-component","Step 3: Create the News Card Component",[11,381,382,383,153],{},"Create ",[74,384,385],{},"src\u002Fcomponents\u002FNewsCard.jsx",[67,387,391],{"className":388,"code":389,"language":390,"meta":72,"style":72},"language-jsx shiki shiki-themes github-light github-dark","import { formatDistanceToNow } from 'date-fns';\n\nfunction NewsCard({ article }) {\n  return (\n    \u003Cdiv className=\"news-card\">\n      {article.image && (\n        \u003Cimg \n          src={article.image} \n          alt={article.title}\n          className=\"news-card__image\"\n        \u002F>\n      )}\n      \u003Cdiv className=\"news-card__content\">\n        \u003Ch3 className=\"news-card__title\">{article.title}\u003C\u002Fh3>\n        \u003Cp className=\"news-card__description\">{article.description}\u003C\u002Fp>\n        \u003Cdiv className=\"news-card__meta\">\n          \u003Cspan className=\"news-card__source\">{article.source.name}\u003C\u002Fspan>\n          \u003Cspan className=\"news-card__time\">\n            {formatDistanceToNow(new Date(article.publishedAt), { addSuffix: true })}\n          \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Ca \n          href={article.url} \n          target=\"_blank\" \n          rel=\"noopener noreferrer\"\n          className=\"news-card__link\"\n        >\n          Read More →\n        \u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  );\n}\n\nexport default NewsCard;\n","jsx",[74,392,393,412,416,434,442,463,473,484,494,504,514,519,524,540,561,581,596,617,632,658,667,676,685,695,707,717,726,731,736,744,753,762,767,772,776],{"__ignoreMap":72},[77,394,395,399,403,406,409],{"class":79,"line":80},[77,396,398],{"class":397},"szBVR","import",[77,400,402],{"class":401},"sVt8B"," { formatDistanceToNow } ",[77,404,405],{"class":397},"from",[77,407,408],{"class":87}," 'date-fns'",[77,410,411],{"class":401},";\n",[77,413,414],{"class":79,"line":107},[77,415,171],{"emptyLinePlaceholder":170},[77,417,418,421,424,427,431],{"class":79,"line":116},[77,419,420],{"class":397},"function",[77,422,423],{"class":83}," NewsCard",[77,425,426],{"class":401},"({ ",[77,428,430],{"class":429},"s4XuR","article",[77,432,433],{"class":401}," }) {\n",[77,435,436,439],{"class":79,"line":179},[77,437,438],{"class":397},"  return",[77,440,441],{"class":401}," (\n",[77,443,444,447,451,454,457,460],{"class":79,"line":185},[77,445,446],{"class":401},"    \u003C",[77,448,450],{"class":449},"s9eBZ","div",[77,452,453],{"class":83}," className",[77,455,456],{"class":397},"=",[77,458,459],{"class":87},"\"news-card\"",[77,461,462],{"class":401},">\n",[77,464,465,468,471],{"class":79,"line":190},[77,466,467],{"class":401},"      {article.image ",[77,469,470],{"class":397},"&&",[77,472,441],{"class":401},[77,474,475,478,481],{"class":79,"line":196},[77,476,477],{"class":401},"        \u003C",[77,479,480],{"class":449},"img",[77,482,483],{"class":401}," \n",[77,485,486,489,491],{"class":79,"line":202},[77,487,488],{"class":83},"          src",[77,490,456],{"class":397},[77,492,493],{"class":401},"{article.image} \n",[77,495,496,499,501],{"class":79,"line":208},[77,497,498],{"class":83},"          alt",[77,500,456],{"class":397},[77,502,503],{"class":401},"{article.title}\n",[77,505,506,509,511],{"class":79,"line":214},[77,507,508],{"class":83},"          className",[77,510,456],{"class":397},[77,512,513],{"class":87},"\"news-card__image\"\n",[77,515,516],{"class":79,"line":220},[77,517,518],{"class":401},"        \u002F>\n",[77,520,521],{"class":79,"line":226},[77,522,523],{"class":401},"      )}\n",[77,525,526,529,531,533,535,538],{"class":79,"line":231},[77,527,528],{"class":401},"      \u003C",[77,530,450],{"class":449},[77,532,453],{"class":83},[77,534,456],{"class":397},[77,536,537],{"class":87},"\"news-card__content\"",[77,539,462],{"class":401},[77,541,542,544,547,549,551,554,557,559],{"class":79,"line":237},[77,543,477],{"class":401},[77,545,546],{"class":449},"h3",[77,548,453],{"class":83},[77,550,456],{"class":397},[77,552,553],{"class":87},"\"news-card__title\"",[77,555,556],{"class":401},">{article.title}\u003C\u002F",[77,558,546],{"class":449},[77,560,462],{"class":401},[77,562,563,565,567,569,571,574,577,579],{"class":79,"line":243},[77,564,477],{"class":401},[77,566,11],{"class":449},[77,568,453],{"class":83},[77,570,456],{"class":397},[77,572,573],{"class":87},"\"news-card__description\"",[77,575,576],{"class":401},">{article.description}\u003C\u002F",[77,578,11],{"class":449},[77,580,462],{"class":401},[77,582,583,585,587,589,591,594],{"class":79,"line":249},[77,584,477],{"class":401},[77,586,450],{"class":449},[77,588,453],{"class":83},[77,590,456],{"class":397},[77,592,593],{"class":87},"\"news-card__meta\"",[77,595,462],{"class":401},[77,597,598,601,603,605,607,610,613,615],{"class":79,"line":255},[77,599,600],{"class":401},"          \u003C",[77,602,77],{"class":449},[77,604,453],{"class":83},[77,606,456],{"class":397},[77,608,609],{"class":87},"\"news-card__source\"",[77,611,612],{"class":401},">{article.source.name}\u003C\u002F",[77,614,77],{"class":449},[77,616,462],{"class":401},[77,618,619,621,623,625,627,630],{"class":79,"line":261},[77,620,600],{"class":401},[77,622,77],{"class":449},[77,624,453],{"class":83},[77,626,456],{"class":397},[77,628,629],{"class":87},"\"news-card__time\"",[77,631,462],{"class":401},[77,633,634,637,640,643,646,649,652,655],{"class":79,"line":267},[77,635,636],{"class":401},"            {",[77,638,639],{"class":83},"formatDistanceToNow",[77,641,642],{"class":401},"(",[77,644,645],{"class":397},"new",[77,647,648],{"class":83}," Date",[77,650,651],{"class":401},"(article.publishedAt), { addSuffix: ",[77,653,654],{"class":97},"true",[77,656,657],{"class":401}," })}\n",[77,659,660,663,665],{"class":79,"line":273},[77,661,662],{"class":401},"          \u003C\u002F",[77,664,77],{"class":449},[77,666,462],{"class":401},[77,668,669,672,674],{"class":79,"line":279},[77,670,671],{"class":401},"        \u003C\u002F",[77,673,450],{"class":449},[77,675,462],{"class":401},[77,677,678,680,683],{"class":79,"line":285},[77,679,477],{"class":401},[77,681,682],{"class":449},"a",[77,684,483],{"class":401},[77,686,687,690,692],{"class":79,"line":291},[77,688,689],{"class":83},"          href",[77,691,456],{"class":397},[77,693,694],{"class":401},"{article.url} \n",[77,696,697,700,702,705],{"class":79,"line":296},[77,698,699],{"class":83},"          target",[77,701,456],{"class":397},[77,703,704],{"class":87},"\"_blank\"",[77,706,483],{"class":401},[77,708,709,712,714],{"class":79,"line":302},[77,710,711],{"class":83},"          rel",[77,713,456],{"class":397},[77,715,716],{"class":87},"\"noopener noreferrer\"\n",[77,718,719,721,723],{"class":79,"line":307},[77,720,508],{"class":83},[77,722,456],{"class":397},[77,724,725],{"class":87},"\"news-card__link\"\n",[77,727,728],{"class":79,"line":313},[77,729,730],{"class":401},"        >\n",[77,732,733],{"class":79,"line":318},[77,734,735],{"class":401},"          Read More →\n",[77,737,738,740,742],{"class":79,"line":324},[77,739,671],{"class":401},[77,741,682],{"class":449},[77,743,462],{"class":401},[77,745,746,749,751],{"class":79,"line":330},[77,747,748],{"class":401},"      \u003C\u002F",[77,750,450],{"class":449},[77,752,462],{"class":401},[77,754,755,758,760],{"class":79,"line":336},[77,756,757],{"class":401},"    \u003C\u002F",[77,759,450],{"class":449},[77,761,462],{"class":401},[77,763,764],{"class":79,"line":341},[77,765,766],{"class":401},"  );\n",[77,768,769],{"class":79,"line":346},[77,770,771],{"class":401},"}\n",[77,773,774],{"class":79,"line":352},[77,775,171],{"emptyLinePlaceholder":170},[77,777,778,781,784],{"class":79,"line":357},[77,779,780],{"class":397},"export",[77,782,783],{"class":397}," default",[77,785,786],{"class":401}," NewsCard;\n",[15,788,790],{"id":789},"step-4-create-the-filter-component","Step 4: Create the Filter Component",[11,792,382,793,153],{},[74,794,795],{},"src\u002Fcomponents\u002FFilters.jsx",[67,797,799],{"className":388,"code":798,"language":390,"meta":72,"style":72},"function Filters({ country, category, onCountryChange, onCategoryChange }) {\n  const countries = [\n    { code: 'us', name: 'United States' },\n    { code: 'gb', name: 'United Kingdom' },\n    { code: 'ca', name: 'Canada' },\n    { code: 'au', name: 'Australia' },\n    { code: 'de', name: 'Germany' },\n    { code: 'fr', name: 'France' },\n    { code: 'jp', name: 'Japan' }\n  ];\n\n  const categories = [\n    'business',\n    'entertainment',\n    'finance',\n    'food',\n    'health',\n    'politics',\n    'science',\n    'sports',\n    'technology',\n    'world'\n  ];\n\n  return (\n    \u003Cdiv className=\"filters\">\n      \u003Cdiv className=\"filter-group\">\n        \u003Clabel htmlFor=\"country\">Country:\u003C\u002Flabel>\n        \u003Cselect \n          id=\"country\"\n          value={country} \n          onChange={(e) => onCountryChange(e.target.value)}\n        >\n          {countries.map(c => (\n            \u003Coption key={c.code} value={c.code}>{c.name}\u003C\u002Foption>\n          ))}\n        \u003C\u002Fselect>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv className=\"filter-group\">\n        \u003Clabel htmlFor=\"category\">Category:\u003C\u002Flabel>\n        \u003Cselect \n          id=\"category\"\n          value={category || ''} \n          onChange={(e) => onCategoryChange(e.target.value || null)}\n        >\n          \u003Coption value=\"\">All Categories\u003C\u002Foption>\n          {categories.map(cat => (\n            \u003Coption key={cat} value={cat}>\n              {cat.charAt(0).toUpperCase() + cat.slice(1)}\n            \u003C\u002Foption>\n          ))}\n        \u003C\u002Fselect>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  );\n}\n\nexport default Filters;\n",[74,800,801,831,845,862,876,890,904,918,932,947,952,956,967,975,982,989,996,1003,1010,1017,1024,1031,1036,1040,1044,1050,1065,1080,1102,1111,1121,1131,1156,1160,1178,1206,1211,1219,1227,1232,1247,1268,1277,1287,1306,1335,1340,1362,1379,1400,1439,1449,1454,1463,1472,1481,1486,1491,1496],{"__ignoreMap":72},[77,802,803,805,808,810,813,816,819,821,824,826,829],{"class":79,"line":80},[77,804,420],{"class":397},[77,806,807],{"class":83}," Filters",[77,809,426],{"class":401},[77,811,812],{"class":429},"country",[77,814,815],{"class":401},", ",[77,817,818],{"class":429},"category",[77,820,815],{"class":401},[77,822,823],{"class":429},"onCountryChange",[77,825,815],{"class":401},[77,827,828],{"class":429},"onCategoryChange",[77,830,433],{"class":401},[77,832,833,836,839,842],{"class":79,"line":107},[77,834,835],{"class":397},"  const",[77,837,838],{"class":97}," countries",[77,840,841],{"class":397}," =",[77,843,844],{"class":401}," [\n",[77,846,847,850,853,856,859],{"class":79,"line":116},[77,848,849],{"class":401},"    { code: ",[77,851,852],{"class":87},"'us'",[77,854,855],{"class":401},", name: ",[77,857,858],{"class":87},"'United States'",[77,860,861],{"class":401}," },\n",[77,863,864,866,869,871,874],{"class":79,"line":179},[77,865,849],{"class":401},[77,867,868],{"class":87},"'gb'",[77,870,855],{"class":401},[77,872,873],{"class":87},"'United Kingdom'",[77,875,861],{"class":401},[77,877,878,880,883,885,888],{"class":79,"line":185},[77,879,849],{"class":401},[77,881,882],{"class":87},"'ca'",[77,884,855],{"class":401},[77,886,887],{"class":87},"'Canada'",[77,889,861],{"class":401},[77,891,892,894,897,899,902],{"class":79,"line":190},[77,893,849],{"class":401},[77,895,896],{"class":87},"'au'",[77,898,855],{"class":401},[77,900,901],{"class":87},"'Australia'",[77,903,861],{"class":401},[77,905,906,908,911,913,916],{"class":79,"line":196},[77,907,849],{"class":401},[77,909,910],{"class":87},"'de'",[77,912,855],{"class":401},[77,914,915],{"class":87},"'Germany'",[77,917,861],{"class":401},[77,919,920,922,925,927,930],{"class":79,"line":202},[77,921,849],{"class":401},[77,923,924],{"class":87},"'fr'",[77,926,855],{"class":401},[77,928,929],{"class":87},"'France'",[77,931,861],{"class":401},[77,933,934,936,939,941,944],{"class":79,"line":208},[77,935,849],{"class":401},[77,937,938],{"class":87},"'jp'",[77,940,855],{"class":401},[77,942,943],{"class":87},"'Japan'",[77,945,946],{"class":401}," }\n",[77,948,949],{"class":79,"line":214},[77,950,951],{"class":401},"  ];\n",[77,953,954],{"class":79,"line":220},[77,955,171],{"emptyLinePlaceholder":170},[77,957,958,960,963,965],{"class":79,"line":226},[77,959,835],{"class":397},[77,961,962],{"class":97}," categories",[77,964,841],{"class":397},[77,966,844],{"class":401},[77,968,969,972],{"class":79,"line":231},[77,970,971],{"class":87},"    'business'",[77,973,974],{"class":401},",\n",[77,976,977,980],{"class":79,"line":237},[77,978,979],{"class":87},"    'entertainment'",[77,981,974],{"class":401},[77,983,984,987],{"class":79,"line":243},[77,985,986],{"class":87},"    'finance'",[77,988,974],{"class":401},[77,990,991,994],{"class":79,"line":249},[77,992,993],{"class":87},"    'food'",[77,995,974],{"class":401},[77,997,998,1001],{"class":79,"line":255},[77,999,1000],{"class":87},"    'health'",[77,1002,974],{"class":401},[77,1004,1005,1008],{"class":79,"line":261},[77,1006,1007],{"class":87},"    'politics'",[77,1009,974],{"class":401},[77,1011,1012,1015],{"class":79,"line":267},[77,1013,1014],{"class":87},"    'science'",[77,1016,974],{"class":401},[77,1018,1019,1022],{"class":79,"line":273},[77,1020,1021],{"class":87},"    'sports'",[77,1023,974],{"class":401},[77,1025,1026,1029],{"class":79,"line":279},[77,1027,1028],{"class":87},"    'technology'",[77,1030,974],{"class":401},[77,1032,1033],{"class":79,"line":285},[77,1034,1035],{"class":87},"    'world'\n",[77,1037,1038],{"class":79,"line":291},[77,1039,951],{"class":401},[77,1041,1042],{"class":79,"line":296},[77,1043,171],{"emptyLinePlaceholder":170},[77,1045,1046,1048],{"class":79,"line":302},[77,1047,438],{"class":397},[77,1049,441],{"class":401},[77,1051,1052,1054,1056,1058,1060,1063],{"class":79,"line":307},[77,1053,446],{"class":401},[77,1055,450],{"class":449},[77,1057,453],{"class":83},[77,1059,456],{"class":397},[77,1061,1062],{"class":87},"\"filters\"",[77,1064,462],{"class":401},[77,1066,1067,1069,1071,1073,1075,1078],{"class":79,"line":313},[77,1068,528],{"class":401},[77,1070,450],{"class":449},[77,1072,453],{"class":83},[77,1074,456],{"class":397},[77,1076,1077],{"class":87},"\"filter-group\"",[77,1079,462],{"class":401},[77,1081,1082,1084,1087,1090,1092,1095,1098,1100],{"class":79,"line":318},[77,1083,477],{"class":401},[77,1085,1086],{"class":449},"label",[77,1088,1089],{"class":83}," htmlFor",[77,1091,456],{"class":397},[77,1093,1094],{"class":87},"\"country\"",[77,1096,1097],{"class":401},">Country:\u003C\u002F",[77,1099,1086],{"class":449},[77,1101,462],{"class":401},[77,1103,1104,1106,1109],{"class":79,"line":324},[77,1105,477],{"class":401},[77,1107,1108],{"class":449},"select",[77,1110,483],{"class":401},[77,1112,1113,1116,1118],{"class":79,"line":330},[77,1114,1115],{"class":83},"          id",[77,1117,456],{"class":397},[77,1119,1120],{"class":87},"\"country\"\n",[77,1122,1123,1126,1128],{"class":79,"line":336},[77,1124,1125],{"class":83},"          value",[77,1127,456],{"class":397},[77,1129,1130],{"class":401},"{country} \n",[77,1132,1133,1136,1138,1141,1144,1147,1150,1153],{"class":79,"line":341},[77,1134,1135],{"class":83},"          onChange",[77,1137,456],{"class":397},[77,1139,1140],{"class":401},"{(",[77,1142,1143],{"class":429},"e",[77,1145,1146],{"class":401},") ",[77,1148,1149],{"class":397},"=>",[77,1151,1152],{"class":83}," onCountryChange",[77,1154,1155],{"class":401},"(e.target.value)}\n",[77,1157,1158],{"class":79,"line":346},[77,1159,730],{"class":401},[77,1161,1162,1165,1168,1170,1173,1176],{"class":79,"line":352},[77,1163,1164],{"class":401},"          {countries.",[77,1166,1167],{"class":83},"map",[77,1169,642],{"class":401},[77,1171,1172],{"class":429},"c",[77,1174,1175],{"class":397}," =>",[77,1177,441],{"class":401},[77,1179,1180,1183,1186,1189,1191,1194,1197,1199,1202,1204],{"class":79,"line":357},[77,1181,1182],{"class":401},"            \u003C",[77,1184,1185],{"class":449},"option",[77,1187,1188],{"class":83}," key",[77,1190,456],{"class":397},[77,1192,1193],{"class":401},"{c.code} ",[77,1195,1196],{"class":83},"value",[77,1198,456],{"class":397},[77,1200,1201],{"class":401},"{c.code}>{c.name}\u003C\u002F",[77,1203,1185],{"class":449},[77,1205,462],{"class":401},[77,1207,1208],{"class":79,"line":362},[77,1209,1210],{"class":401},"          ))}\n",[77,1212,1213,1215,1217],{"class":79,"line":367},[77,1214,671],{"class":401},[77,1216,1108],{"class":449},[77,1218,462],{"class":401},[77,1220,1221,1223,1225],{"class":79,"line":372},[77,1222,748],{"class":401},[77,1224,450],{"class":449},[77,1226,462],{"class":401},[77,1228,1230],{"class":79,"line":1229},39,[77,1231,171],{"emptyLinePlaceholder":170},[77,1233,1235,1237,1239,1241,1243,1245],{"class":79,"line":1234},40,[77,1236,528],{"class":401},[77,1238,450],{"class":449},[77,1240,453],{"class":83},[77,1242,456],{"class":397},[77,1244,1077],{"class":87},[77,1246,462],{"class":401},[77,1248,1250,1252,1254,1256,1258,1261,1264,1266],{"class":79,"line":1249},41,[77,1251,477],{"class":401},[77,1253,1086],{"class":449},[77,1255,1089],{"class":83},[77,1257,456],{"class":397},[77,1259,1260],{"class":87},"\"category\"",[77,1262,1263],{"class":401},">Category:\u003C\u002F",[77,1265,1086],{"class":449},[77,1267,462],{"class":401},[77,1269,1271,1273,1275],{"class":79,"line":1270},42,[77,1272,477],{"class":401},[77,1274,1108],{"class":449},[77,1276,483],{"class":401},[77,1278,1280,1282,1284],{"class":79,"line":1279},43,[77,1281,1115],{"class":83},[77,1283,456],{"class":397},[77,1285,1286],{"class":87},"\"category\"\n",[77,1288,1290,1292,1294,1297,1300,1303],{"class":79,"line":1289},44,[77,1291,1125],{"class":83},[77,1293,456],{"class":397},[77,1295,1296],{"class":401},"{category ",[77,1298,1299],{"class":397},"||",[77,1301,1302],{"class":87}," ''",[77,1304,1305],{"class":401},"} \n",[77,1307,1309,1311,1313,1315,1317,1319,1321,1324,1327,1329,1332],{"class":79,"line":1308},45,[77,1310,1135],{"class":83},[77,1312,456],{"class":397},[77,1314,1140],{"class":401},[77,1316,1143],{"class":429},[77,1318,1146],{"class":401},[77,1320,1149],{"class":397},[77,1322,1323],{"class":83}," onCategoryChange",[77,1325,1326],{"class":401},"(e.target.value ",[77,1328,1299],{"class":397},[77,1330,1331],{"class":97}," null",[77,1333,1334],{"class":401},")}\n",[77,1336,1338],{"class":79,"line":1337},46,[77,1339,730],{"class":401},[77,1341,1343,1345,1347,1350,1352,1355,1358,1360],{"class":79,"line":1342},47,[77,1344,600],{"class":401},[77,1346,1185],{"class":449},[77,1348,1349],{"class":83}," value",[77,1351,456],{"class":397},[77,1353,1354],{"class":87},"\"\"",[77,1356,1357],{"class":401},">All Categories\u003C\u002F",[77,1359,1185],{"class":449},[77,1361,462],{"class":401},[77,1363,1365,1368,1370,1372,1375,1377],{"class":79,"line":1364},48,[77,1366,1367],{"class":401},"          {categories.",[77,1369,1167],{"class":83},[77,1371,642],{"class":401},[77,1373,1374],{"class":429},"cat",[77,1376,1175],{"class":397},[77,1378,441],{"class":401},[77,1380,1382,1384,1386,1388,1390,1393,1395,1397],{"class":79,"line":1381},49,[77,1383,1182],{"class":401},[77,1385,1185],{"class":449},[77,1387,1188],{"class":83},[77,1389,456],{"class":397},[77,1391,1392],{"class":401},"{cat} ",[77,1394,1196],{"class":83},[77,1396,456],{"class":397},[77,1398,1399],{"class":401},"{cat}>\n",[77,1401,1403,1406,1409,1411,1414,1417,1420,1423,1426,1429,1432,1434,1437],{"class":79,"line":1402},50,[77,1404,1405],{"class":401},"              {cat.",[77,1407,1408],{"class":83},"charAt",[77,1410,642],{"class":401},[77,1412,1413],{"class":97},"0",[77,1415,1416],{"class":401},").",[77,1418,1419],{"class":83},"toUpperCase",[77,1421,1422],{"class":401},"() ",[77,1424,1425],{"class":397},"+",[77,1427,1428],{"class":401}," cat.",[77,1430,1431],{"class":83},"slice",[77,1433,642],{"class":401},[77,1435,1436],{"class":97},"1",[77,1438,1334],{"class":401},[77,1440,1442,1445,1447],{"class":79,"line":1441},51,[77,1443,1444],{"class":401},"            \u003C\u002F",[77,1446,1185],{"class":449},[77,1448,462],{"class":401},[77,1450,1452],{"class":79,"line":1451},52,[77,1453,1210],{"class":401},[77,1455,1457,1459,1461],{"class":79,"line":1456},53,[77,1458,671],{"class":401},[77,1460,1108],{"class":449},[77,1462,462],{"class":401},[77,1464,1466,1468,1470],{"class":79,"line":1465},54,[77,1467,748],{"class":401},[77,1469,450],{"class":449},[77,1471,462],{"class":401},[77,1473,1475,1477,1479],{"class":79,"line":1474},55,[77,1476,757],{"class":401},[77,1478,450],{"class":449},[77,1480,462],{"class":401},[77,1482,1484],{"class":79,"line":1483},56,[77,1485,766],{"class":401},[77,1487,1489],{"class":79,"line":1488},57,[77,1490,771],{"class":401},[77,1492,1494],{"class":79,"line":1493},58,[77,1495,171],{"emptyLinePlaceholder":170},[77,1497,1499,1501,1503],{"class":79,"line":1498},59,[77,1500,780],{"class":397},[77,1502,783],{"class":397},[77,1504,1505],{"class":401}," Filters;\n",[15,1507,1509],{"id":1508},"step-5-create-the-main-app-component","Step 5: Create the Main App Component",[11,1511,1512,1513,153],{},"Update ",[74,1514,1515],{},"src\u002FApp.jsx",[67,1517,1519],{"className":388,"code":1518,"language":390,"meta":72,"style":72},"import { useState, useEffect } from 'react';\nimport { getHeadlines, searchNews } from '.\u002Fservices\u002FnewsApi';\nimport NewsCard from '.\u002Fcomponents\u002FNewsCard';\nimport Filters from '.\u002Fcomponents\u002FFilters';\nimport '.\u002FApp.css';\n\nfunction App() {\n  const [articles, setArticles] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n  const [country, setCountry] = useState('us');\n  const [category, setCategory] = useState(null);\n  const [searchQuery, setSearchQuery] = useState('');\n\n  useEffect(() => {\n    fetchNews();\n  }, [country, category]);\n\n  const fetchNews = async () => {\n    try {\n      setLoading(true);\n      setError(null);\n      const data = await getHeadlines(country, category);\n      setArticles(data.articles || []);\n    } catch (err) {\n      setError('Failed to fetch news. Please try again later.');\n      console.error(err);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const handleSearch = async (e) => {\n    e.preventDefault();\n    if (!searchQuery.trim()) {\n      fetchNews();\n      return;\n    }\n\n    try {\n      setLoading(true);\n      setError(null);\n      const data = await searchNews(searchQuery, country);\n      setArticles(data.articles || []);\n    } catch (err) {\n      setError('Search failed. Please try again.');\n      console.error(err);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    \u003Cdiv className=\"app\">\n      \u003Cheader className=\"app-header\">\n        \u003Ch1>News Aggregator\u003C\u002Fh1>\n        \u003Cp>Powered by AllNewsAPI\u003C\u002Fp>\n      \u003C\u002Fheader>\n\n      \u003Cdiv className=\"app-controls\">\n        \u003CFilters\n          country={country}\n          category={category}\n          onCountryChange={setCountry}\n          onCategoryChange={setCategory}\n        \u002F>\n\n        \u003Cform onSubmit={handleSearch} className=\"search-form\">\n          \u003Cinput\n            type=\"text\"\n            placeholder=\"Search news...\"\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            className=\"search-input\"\n          \u002F>\n          \u003Cbutton type=\"submit\" className=\"search-button\">\n            Search\n          \u003C\u002Fbutton>\n        \u003C\u002Fform>\n      \u003C\u002Fdiv>\n\n      \u003Cmain className=\"app-content\">\n        {loading && \u003Cdiv className=\"loading\">Loading news...\u003C\u002Fdiv>}\n        \n        {error && \u003Cdiv className=\"error\">{error}\u003C\u002Fdiv>}\n        \n        {!loading && !error && articles.length === 0 && (\n          \u003Cdiv className=\"no-results\">No articles found\u003C\u002Fdiv>\n        )}\n        \n        {!loading && !error && articles.length > 0 && (\n          \u003Cdiv className=\"news-grid\">\n            {articles.map((article, index) => (\n              \u003CNewsCard key={index} article={article} \u002F>\n            ))}\n          \u003C\u002Fdiv>\n        )}\n      \u003C\u002Fmain>\n    \u003C\u002Fdiv>\n  );\n}\n\nexport default App;\n",[74,1520,1521,1535,1549,1563,1577,1586,1590,1600,1626,1653,1680,1705,1730,1757,1761,1774,1782,1787,1791,1810,1817,1828,1839,1858,1871,1882,1893,1903,1912,1923,1928,1933,1937,1959,1969,1988,1995,2002,2006,2010,2016,2026,2036,2052,2062,2070,2081,2089,2097,2107,2111,2115,2119,2125,2140,2156,2170,2183,2191,2195,2211,2219,2230,2241,2252,2263,2268,2273,2299,2307,2318,2329,2340,2361,2372,2378,2403,2409,2418,2427,2436,2441,2458,2486,2492,2518,2523,2561,2582,2588,2593,2623,2639,2663,2686,2692,2701,2706,2715,2724,2729,2734,2739],{"__ignoreMap":72},[77,1522,1523,1525,1528,1530,1533],{"class":79,"line":80},[77,1524,398],{"class":397},[77,1526,1527],{"class":401}," { useState, useEffect } ",[77,1529,405],{"class":397},[77,1531,1532],{"class":87}," 'react'",[77,1534,411],{"class":401},[77,1536,1537,1539,1542,1544,1547],{"class":79,"line":107},[77,1538,398],{"class":397},[77,1540,1541],{"class":401}," { getHeadlines, searchNews } ",[77,1543,405],{"class":397},[77,1545,1546],{"class":87}," '.\u002Fservices\u002FnewsApi'",[77,1548,411],{"class":401},[77,1550,1551,1553,1556,1558,1561],{"class":79,"line":116},[77,1552,398],{"class":397},[77,1554,1555],{"class":401}," NewsCard ",[77,1557,405],{"class":397},[77,1559,1560],{"class":87}," '.\u002Fcomponents\u002FNewsCard'",[77,1562,411],{"class":401},[77,1564,1565,1567,1570,1572,1575],{"class":79,"line":179},[77,1566,398],{"class":397},[77,1568,1569],{"class":401}," Filters ",[77,1571,405],{"class":397},[77,1573,1574],{"class":87}," '.\u002Fcomponents\u002FFilters'",[77,1576,411],{"class":401},[77,1578,1579,1581,1584],{"class":79,"line":185},[77,1580,398],{"class":397},[77,1582,1583],{"class":87}," '.\u002FApp.css'",[77,1585,411],{"class":401},[77,1587,1588],{"class":79,"line":190},[77,1589,171],{"emptyLinePlaceholder":170},[77,1591,1592,1594,1597],{"class":79,"line":196},[77,1593,420],{"class":397},[77,1595,1596],{"class":83}," App",[77,1598,1599],{"class":401},"() {\n",[77,1601,1602,1604,1607,1610,1612,1615,1618,1620,1623],{"class":79,"line":202},[77,1603,835],{"class":397},[77,1605,1606],{"class":401}," [",[77,1608,1609],{"class":97},"articles",[77,1611,815],{"class":401},[77,1613,1614],{"class":97},"setArticles",[77,1616,1617],{"class":401},"] ",[77,1619,456],{"class":397},[77,1621,1622],{"class":83}," useState",[77,1624,1625],{"class":401},"([]);\n",[77,1627,1628,1630,1632,1635,1637,1640,1642,1644,1646,1648,1650],{"class":79,"line":208},[77,1629,835],{"class":397},[77,1631,1606],{"class":401},[77,1633,1634],{"class":97},"loading",[77,1636,815],{"class":401},[77,1638,1639],{"class":97},"setLoading",[77,1641,1617],{"class":401},[77,1643,456],{"class":397},[77,1645,1622],{"class":83},[77,1647,642],{"class":401},[77,1649,654],{"class":97},[77,1651,1652],{"class":401},");\n",[77,1654,1655,1657,1659,1662,1664,1667,1669,1671,1673,1675,1678],{"class":79,"line":214},[77,1656,835],{"class":397},[77,1658,1606],{"class":401},[77,1660,1661],{"class":97},"error",[77,1663,815],{"class":401},[77,1665,1666],{"class":97},"setError",[77,1668,1617],{"class":401},[77,1670,456],{"class":397},[77,1672,1622],{"class":83},[77,1674,642],{"class":401},[77,1676,1677],{"class":97},"null",[77,1679,1652],{"class":401},[77,1681,1682,1684,1686,1688,1690,1693,1695,1697,1699,1701,1703],{"class":79,"line":220},[77,1683,835],{"class":397},[77,1685,1606],{"class":401},[77,1687,812],{"class":97},[77,1689,815],{"class":401},[77,1691,1692],{"class":97},"setCountry",[77,1694,1617],{"class":401},[77,1696,456],{"class":397},[77,1698,1622],{"class":83},[77,1700,642],{"class":401},[77,1702,852],{"class":87},[77,1704,1652],{"class":401},[77,1706,1707,1709,1711,1713,1715,1718,1720,1722,1724,1726,1728],{"class":79,"line":226},[77,1708,835],{"class":397},[77,1710,1606],{"class":401},[77,1712,818],{"class":97},[77,1714,815],{"class":401},[77,1716,1717],{"class":97},"setCategory",[77,1719,1617],{"class":401},[77,1721,456],{"class":397},[77,1723,1622],{"class":83},[77,1725,642],{"class":401},[77,1727,1677],{"class":97},[77,1729,1652],{"class":401},[77,1731,1732,1734,1736,1739,1741,1744,1746,1748,1750,1752,1755],{"class":79,"line":231},[77,1733,835],{"class":397},[77,1735,1606],{"class":401},[77,1737,1738],{"class":97},"searchQuery",[77,1740,815],{"class":401},[77,1742,1743],{"class":97},"setSearchQuery",[77,1745,1617],{"class":401},[77,1747,456],{"class":397},[77,1749,1622],{"class":83},[77,1751,642],{"class":401},[77,1753,1754],{"class":87},"''",[77,1756,1652],{"class":401},[77,1758,1759],{"class":79,"line":237},[77,1760,171],{"emptyLinePlaceholder":170},[77,1762,1763,1766,1769,1771],{"class":79,"line":243},[77,1764,1765],{"class":83},"  useEffect",[77,1767,1768],{"class":401},"(() ",[77,1770,1149],{"class":397},[77,1772,1773],{"class":401}," {\n",[77,1775,1776,1779],{"class":79,"line":249},[77,1777,1778],{"class":83},"    fetchNews",[77,1780,1781],{"class":401},"();\n",[77,1783,1784],{"class":79,"line":255},[77,1785,1786],{"class":401},"  }, [country, category]);\n",[77,1788,1789],{"class":79,"line":261},[77,1790,171],{"emptyLinePlaceholder":170},[77,1792,1793,1795,1798,1800,1803,1806,1808],{"class":79,"line":267},[77,1794,835],{"class":397},[77,1796,1797],{"class":83}," fetchNews",[77,1799,841],{"class":397},[77,1801,1802],{"class":397}," async",[77,1804,1805],{"class":401}," () ",[77,1807,1149],{"class":397},[77,1809,1773],{"class":401},[77,1811,1812,1815],{"class":79,"line":273},[77,1813,1814],{"class":397},"    try",[77,1816,1773],{"class":401},[77,1818,1819,1822,1824,1826],{"class":79,"line":279},[77,1820,1821],{"class":83},"      setLoading",[77,1823,642],{"class":401},[77,1825,654],{"class":97},[77,1827,1652],{"class":401},[77,1829,1830,1833,1835,1837],{"class":79,"line":285},[77,1831,1832],{"class":83},"      setError",[77,1834,642],{"class":401},[77,1836,1677],{"class":97},[77,1838,1652],{"class":401},[77,1840,1841,1844,1847,1849,1852,1855],{"class":79,"line":291},[77,1842,1843],{"class":397},"      const",[77,1845,1846],{"class":97}," data",[77,1848,841],{"class":397},[77,1850,1851],{"class":397}," await",[77,1853,1854],{"class":83}," getHeadlines",[77,1856,1857],{"class":401},"(country, category);\n",[77,1859,1860,1863,1866,1868],{"class":79,"line":296},[77,1861,1862],{"class":83},"      setArticles",[77,1864,1865],{"class":401},"(data.articles ",[77,1867,1299],{"class":397},[77,1869,1870],{"class":401}," []);\n",[77,1872,1873,1876,1879],{"class":79,"line":302},[77,1874,1875],{"class":401},"    } ",[77,1877,1878],{"class":397},"catch",[77,1880,1881],{"class":401}," (err) {\n",[77,1883,1884,1886,1888,1891],{"class":79,"line":307},[77,1885,1832],{"class":83},[77,1887,642],{"class":401},[77,1889,1890],{"class":87},"'Failed to fetch news. Please try again later.'",[77,1892,1652],{"class":401},[77,1894,1895,1898,1900],{"class":79,"line":313},[77,1896,1897],{"class":401},"      console.",[77,1899,1661],{"class":83},[77,1901,1902],{"class":401},"(err);\n",[77,1904,1905,1907,1910],{"class":79,"line":318},[77,1906,1875],{"class":401},[77,1908,1909],{"class":397},"finally",[77,1911,1773],{"class":401},[77,1913,1914,1916,1918,1921],{"class":79,"line":324},[77,1915,1821],{"class":83},[77,1917,642],{"class":401},[77,1919,1920],{"class":97},"false",[77,1922,1652],{"class":401},[77,1924,1925],{"class":79,"line":330},[77,1926,1927],{"class":401},"    }\n",[77,1929,1930],{"class":79,"line":336},[77,1931,1932],{"class":401},"  };\n",[77,1934,1935],{"class":79,"line":341},[77,1936,171],{"emptyLinePlaceholder":170},[77,1938,1939,1941,1944,1946,1948,1951,1953,1955,1957],{"class":79,"line":346},[77,1940,835],{"class":397},[77,1942,1943],{"class":83}," handleSearch",[77,1945,841],{"class":397},[77,1947,1802],{"class":397},[77,1949,1950],{"class":401}," (",[77,1952,1143],{"class":429},[77,1954,1146],{"class":401},[77,1956,1149],{"class":397},[77,1958,1773],{"class":401},[77,1960,1961,1964,1967],{"class":79,"line":352},[77,1962,1963],{"class":401},"    e.",[77,1965,1966],{"class":83},"preventDefault",[77,1968,1781],{"class":401},[77,1970,1971,1974,1976,1979,1982,1985],{"class":79,"line":357},[77,1972,1973],{"class":397},"    if",[77,1975,1950],{"class":401},[77,1977,1978],{"class":397},"!",[77,1980,1981],{"class":401},"searchQuery.",[77,1983,1984],{"class":83},"trim",[77,1986,1987],{"class":401},"()) {\n",[77,1989,1990,1993],{"class":79,"line":362},[77,1991,1992],{"class":83},"      fetchNews",[77,1994,1781],{"class":401},[77,1996,1997,2000],{"class":79,"line":367},[77,1998,1999],{"class":397},"      return",[77,2001,411],{"class":401},[77,2003,2004],{"class":79,"line":372},[77,2005,1927],{"class":401},[77,2007,2008],{"class":79,"line":1229},[77,2009,171],{"emptyLinePlaceholder":170},[77,2011,2012,2014],{"class":79,"line":1234},[77,2013,1814],{"class":397},[77,2015,1773],{"class":401},[77,2017,2018,2020,2022,2024],{"class":79,"line":1249},[77,2019,1821],{"class":83},[77,2021,642],{"class":401},[77,2023,654],{"class":97},[77,2025,1652],{"class":401},[77,2027,2028,2030,2032,2034],{"class":79,"line":1270},[77,2029,1832],{"class":83},[77,2031,642],{"class":401},[77,2033,1677],{"class":97},[77,2035,1652],{"class":401},[77,2037,2038,2040,2042,2044,2046,2049],{"class":79,"line":1279},[77,2039,1843],{"class":397},[77,2041,1846],{"class":97},[77,2043,841],{"class":397},[77,2045,1851],{"class":397},[77,2047,2048],{"class":83}," searchNews",[77,2050,2051],{"class":401},"(searchQuery, country);\n",[77,2053,2054,2056,2058,2060],{"class":79,"line":1289},[77,2055,1862],{"class":83},[77,2057,1865],{"class":401},[77,2059,1299],{"class":397},[77,2061,1870],{"class":401},[77,2063,2064,2066,2068],{"class":79,"line":1308},[77,2065,1875],{"class":401},[77,2067,1878],{"class":397},[77,2069,1881],{"class":401},[77,2071,2072,2074,2076,2079],{"class":79,"line":1337},[77,2073,1832],{"class":83},[77,2075,642],{"class":401},[77,2077,2078],{"class":87},"'Search failed. Please try again.'",[77,2080,1652],{"class":401},[77,2082,2083,2085,2087],{"class":79,"line":1342},[77,2084,1897],{"class":401},[77,2086,1661],{"class":83},[77,2088,1902],{"class":401},[77,2090,2091,2093,2095],{"class":79,"line":1364},[77,2092,1875],{"class":401},[77,2094,1909],{"class":397},[77,2096,1773],{"class":401},[77,2098,2099,2101,2103,2105],{"class":79,"line":1381},[77,2100,1821],{"class":83},[77,2102,642],{"class":401},[77,2104,1920],{"class":97},[77,2106,1652],{"class":401},[77,2108,2109],{"class":79,"line":1402},[77,2110,1927],{"class":401},[77,2112,2113],{"class":79,"line":1441},[77,2114,1932],{"class":401},[77,2116,2117],{"class":79,"line":1451},[77,2118,171],{"emptyLinePlaceholder":170},[77,2120,2121,2123],{"class":79,"line":1456},[77,2122,438],{"class":397},[77,2124,441],{"class":401},[77,2126,2127,2129,2131,2133,2135,2138],{"class":79,"line":1465},[77,2128,446],{"class":401},[77,2130,450],{"class":449},[77,2132,453],{"class":83},[77,2134,456],{"class":397},[77,2136,2137],{"class":87},"\"app\"",[77,2139,462],{"class":401},[77,2141,2142,2144,2147,2149,2151,2154],{"class":79,"line":1474},[77,2143,528],{"class":401},[77,2145,2146],{"class":449},"header",[77,2148,453],{"class":83},[77,2150,456],{"class":397},[77,2152,2153],{"class":87},"\"app-header\"",[77,2155,462],{"class":401},[77,2157,2158,2160,2163,2166,2168],{"class":79,"line":1483},[77,2159,477],{"class":401},[77,2161,2162],{"class":449},"h1",[77,2164,2165],{"class":401},">News Aggregator\u003C\u002F",[77,2167,2162],{"class":449},[77,2169,462],{"class":401},[77,2171,2172,2174,2176,2179,2181],{"class":79,"line":1488},[77,2173,477],{"class":401},[77,2175,11],{"class":449},[77,2177,2178],{"class":401},">Powered by AllNewsAPI\u003C\u002F",[77,2180,11],{"class":449},[77,2182,462],{"class":401},[77,2184,2185,2187,2189],{"class":79,"line":1493},[77,2186,748],{"class":401},[77,2188,2146],{"class":449},[77,2190,462],{"class":401},[77,2192,2193],{"class":79,"line":1498},[77,2194,171],{"emptyLinePlaceholder":170},[77,2196,2198,2200,2202,2204,2206,2209],{"class":79,"line":2197},60,[77,2199,528],{"class":401},[77,2201,450],{"class":449},[77,2203,453],{"class":83},[77,2205,456],{"class":397},[77,2207,2208],{"class":87},"\"app-controls\"",[77,2210,462],{"class":401},[77,2212,2214,2216],{"class":79,"line":2213},61,[77,2215,477],{"class":401},[77,2217,2218],{"class":97},"Filters\n",[77,2220,2222,2225,2227],{"class":79,"line":2221},62,[77,2223,2224],{"class":83},"          country",[77,2226,456],{"class":397},[77,2228,2229],{"class":401},"{country}\n",[77,2231,2233,2236,2238],{"class":79,"line":2232},63,[77,2234,2235],{"class":83},"          category",[77,2237,456],{"class":397},[77,2239,2240],{"class":401},"{category}\n",[77,2242,2244,2247,2249],{"class":79,"line":2243},64,[77,2245,2246],{"class":83},"          onCountryChange",[77,2248,456],{"class":397},[77,2250,2251],{"class":401},"{setCountry}\n",[77,2253,2255,2258,2260],{"class":79,"line":2254},65,[77,2256,2257],{"class":83},"          onCategoryChange",[77,2259,456],{"class":397},[77,2261,2262],{"class":401},"{setCategory}\n",[77,2264,2266],{"class":79,"line":2265},66,[77,2267,518],{"class":401},[77,2269,2271],{"class":79,"line":2270},67,[77,2272,171],{"emptyLinePlaceholder":170},[77,2274,2276,2278,2281,2284,2286,2289,2292,2294,2297],{"class":79,"line":2275},68,[77,2277,477],{"class":401},[77,2279,2280],{"class":449},"form",[77,2282,2283],{"class":83}," onSubmit",[77,2285,456],{"class":397},[77,2287,2288],{"class":401},"{handleSearch} ",[77,2290,2291],{"class":83},"className",[77,2293,456],{"class":397},[77,2295,2296],{"class":87},"\"search-form\"",[77,2298,462],{"class":401},[77,2300,2302,2304],{"class":79,"line":2301},69,[77,2303,600],{"class":401},[77,2305,2306],{"class":449},"input\n",[77,2308,2310,2313,2315],{"class":79,"line":2309},70,[77,2311,2312],{"class":83},"            type",[77,2314,456],{"class":397},[77,2316,2317],{"class":87},"\"text\"\n",[77,2319,2321,2324,2326],{"class":79,"line":2320},71,[77,2322,2323],{"class":83},"            placeholder",[77,2325,456],{"class":397},[77,2327,2328],{"class":87},"\"Search news...\"\n",[77,2330,2332,2335,2337],{"class":79,"line":2331},72,[77,2333,2334],{"class":83},"            value",[77,2336,456],{"class":397},[77,2338,2339],{"class":401},"{searchQuery}\n",[77,2341,2343,2346,2348,2350,2352,2354,2356,2359],{"class":79,"line":2342},73,[77,2344,2345],{"class":83},"            onChange",[77,2347,456],{"class":397},[77,2349,1140],{"class":401},[77,2351,1143],{"class":429},[77,2353,1146],{"class":401},[77,2355,1149],{"class":397},[77,2357,2358],{"class":83}," setSearchQuery",[77,2360,1155],{"class":401},[77,2362,2364,2367,2369],{"class":79,"line":2363},74,[77,2365,2366],{"class":83},"            className",[77,2368,456],{"class":397},[77,2370,2371],{"class":87},"\"search-input\"\n",[77,2373,2375],{"class":79,"line":2374},75,[77,2376,2377],{"class":401},"          \u002F>\n",[77,2379,2381,2383,2386,2389,2391,2394,2396,2398,2401],{"class":79,"line":2380},76,[77,2382,600],{"class":401},[77,2384,2385],{"class":449},"button",[77,2387,2388],{"class":83}," type",[77,2390,456],{"class":397},[77,2392,2393],{"class":87},"\"submit\"",[77,2395,453],{"class":83},[77,2397,456],{"class":397},[77,2399,2400],{"class":87},"\"search-button\"",[77,2402,462],{"class":401},[77,2404,2406],{"class":79,"line":2405},77,[77,2407,2408],{"class":401},"            Search\n",[77,2410,2412,2414,2416],{"class":79,"line":2411},78,[77,2413,662],{"class":401},[77,2415,2385],{"class":449},[77,2417,462],{"class":401},[77,2419,2421,2423,2425],{"class":79,"line":2420},79,[77,2422,671],{"class":401},[77,2424,2280],{"class":449},[77,2426,462],{"class":401},[77,2428,2430,2432,2434],{"class":79,"line":2429},80,[77,2431,748],{"class":401},[77,2433,450],{"class":449},[77,2435,462],{"class":401},[77,2437,2439],{"class":79,"line":2438},81,[77,2440,171],{"emptyLinePlaceholder":170},[77,2442,2444,2446,2449,2451,2453,2456],{"class":79,"line":2443},82,[77,2445,528],{"class":401},[77,2447,2448],{"class":449},"main",[77,2450,453],{"class":83},[77,2452,456],{"class":397},[77,2454,2455],{"class":87},"\"app-content\"",[77,2457,462],{"class":401},[77,2459,2461,2464,2466,2469,2471,2473,2475,2478,2481,2483],{"class":79,"line":2460},83,[77,2462,2463],{"class":401},"        {loading ",[77,2465,470],{"class":397},[77,2467,2468],{"class":401}," \u003C",[77,2470,450],{"class":449},[77,2472,453],{"class":83},[77,2474,456],{"class":397},[77,2476,2477],{"class":87},"\"loading\"",[77,2479,2480],{"class":401},">Loading news...\u003C\u002F",[77,2482,450],{"class":449},[77,2484,2485],{"class":401},">}\n",[77,2487,2489],{"class":79,"line":2488},84,[77,2490,2491],{"class":401},"        \n",[77,2493,2495,2498,2500,2502,2504,2506,2508,2511,2514,2516],{"class":79,"line":2494},85,[77,2496,2497],{"class":401},"        {error ",[77,2499,470],{"class":397},[77,2501,2468],{"class":401},[77,2503,450],{"class":449},[77,2505,453],{"class":83},[77,2507,456],{"class":397},[77,2509,2510],{"class":87},"\"error\"",[77,2512,2513],{"class":401},">{error}\u003C\u002F",[77,2515,450],{"class":449},[77,2517,2485],{"class":401},[77,2519,2521],{"class":79,"line":2520},86,[77,2522,2491],{"class":401},[77,2524,2526,2529,2531,2534,2536,2539,2542,2544,2547,2550,2553,2556,2559],{"class":79,"line":2525},87,[77,2527,2528],{"class":401},"        {",[77,2530,1978],{"class":397},[77,2532,2533],{"class":401},"loading ",[77,2535,470],{"class":397},[77,2537,2538],{"class":397}," !",[77,2540,2541],{"class":401},"error ",[77,2543,470],{"class":397},[77,2545,2546],{"class":401}," articles.",[77,2548,2549],{"class":97},"length",[77,2551,2552],{"class":397}," ===",[77,2554,2555],{"class":97}," 0",[77,2557,2558],{"class":397}," &&",[77,2560,441],{"class":401},[77,2562,2564,2566,2568,2570,2572,2575,2578,2580],{"class":79,"line":2563},88,[77,2565,600],{"class":401},[77,2567,450],{"class":449},[77,2569,453],{"class":83},[77,2571,456],{"class":397},[77,2573,2574],{"class":87},"\"no-results\"",[77,2576,2577],{"class":401},">No articles found\u003C\u002F",[77,2579,450],{"class":449},[77,2581,462],{"class":401},[77,2583,2585],{"class":79,"line":2584},89,[77,2586,2587],{"class":401},"        )}\n",[77,2589,2591],{"class":79,"line":2590},90,[77,2592,2491],{"class":401},[77,2594,2596,2598,2600,2602,2604,2606,2608,2610,2612,2614,2617,2619,2621],{"class":79,"line":2595},91,[77,2597,2528],{"class":401},[77,2599,1978],{"class":397},[77,2601,2533],{"class":401},[77,2603,470],{"class":397},[77,2605,2538],{"class":397},[77,2607,2541],{"class":401},[77,2609,470],{"class":397},[77,2611,2546],{"class":401},[77,2613,2549],{"class":97},[77,2615,2616],{"class":397}," >",[77,2618,2555],{"class":97},[77,2620,2558],{"class":397},[77,2622,441],{"class":401},[77,2624,2626,2628,2630,2632,2634,2637],{"class":79,"line":2625},92,[77,2627,600],{"class":401},[77,2629,450],{"class":449},[77,2631,453],{"class":83},[77,2633,456],{"class":397},[77,2635,2636],{"class":87},"\"news-grid\"",[77,2638,462],{"class":401},[77,2640,2642,2645,2647,2650,2652,2654,2657,2659,2661],{"class":79,"line":2641},93,[77,2643,2644],{"class":401},"            {articles.",[77,2646,1167],{"class":83},[77,2648,2649],{"class":401},"((",[77,2651,430],{"class":429},[77,2653,815],{"class":401},[77,2655,2656],{"class":429},"index",[77,2658,1146],{"class":401},[77,2660,1149],{"class":397},[77,2662,441],{"class":401},[77,2664,2666,2669,2672,2674,2676,2679,2681,2683],{"class":79,"line":2665},94,[77,2667,2668],{"class":401},"              \u003C",[77,2670,2671],{"class":97},"NewsCard",[77,2673,1188],{"class":83},[77,2675,456],{"class":397},[77,2677,2678],{"class":401},"{index} ",[77,2680,430],{"class":83},[77,2682,456],{"class":397},[77,2684,2685],{"class":401},"{article} \u002F>\n",[77,2687,2689],{"class":79,"line":2688},95,[77,2690,2691],{"class":401},"            ))}\n",[77,2693,2695,2697,2699],{"class":79,"line":2694},96,[77,2696,662],{"class":401},[77,2698,450],{"class":449},[77,2700,462],{"class":401},[77,2702,2704],{"class":79,"line":2703},97,[77,2705,2587],{"class":401},[77,2707,2709,2711,2713],{"class":79,"line":2708},98,[77,2710,748],{"class":401},[77,2712,2448],{"class":449},[77,2714,462],{"class":401},[77,2716,2718,2720,2722],{"class":79,"line":2717},99,[77,2719,757],{"class":401},[77,2721,450],{"class":449},[77,2723,462],{"class":401},[77,2725,2727],{"class":79,"line":2726},100,[77,2728,766],{"class":401},[77,2730,2732],{"class":79,"line":2731},101,[77,2733,771],{"class":401},[77,2735,2737],{"class":79,"line":2736},102,[77,2738,171],{"emptyLinePlaceholder":170},[77,2740,2742,2744,2746],{"class":79,"line":2741},103,[77,2743,780],{"class":397},[77,2745,783],{"class":397},[77,2747,2748],{"class":401}," App;\n",[15,2750,2752],{"id":2751},"step-6-add-styling","Step 6: Add Styling",[11,2754,382,2755,2758],{},[74,2756,2757],{},"src\u002FApp.css"," with your preferred styles. Here's a basic example:",[67,2760,2764],{"className":2761,"code":2762,"language":2763,"meta":72,"style":72},"language-css shiki shiki-themes github-light github-dark",".app {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 20px;\n}\n\n.app-header {\n  text-align: center;\n  margin-bottom: 30px;\n}\n\n.news-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 20px;\n}\n\n.news-card {\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  overflow: hidden;\n  transition: transform 0.2s;\n}\n\n.news-card:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n","css",[74,2765,2766,2773,2789,2803,2817,2821,2825,2832,2844,2858,2862,2866,2873,2885,2922,2935,2939,2943,2950,2969,2983,2995,3011,3015,3019,3026,3045,3087],{"__ignoreMap":72},[77,2767,2768,2771],{"class":79,"line":80},[77,2769,2770],{"class":83},".app",[77,2772,1773],{"class":401},[77,2774,2775,2778,2781,2784,2787],{"class":79,"line":107},[77,2776,2777],{"class":97},"  max-width",[77,2779,2780],{"class":401},": ",[77,2782,2783],{"class":97},"1200",[77,2785,2786],{"class":397},"px",[77,2788,411],{"class":401},[77,2790,2791,2794,2796,2798,2801],{"class":79,"line":116},[77,2792,2793],{"class":97},"  margin",[77,2795,2780],{"class":401},[77,2797,1413],{"class":97},[77,2799,2800],{"class":97}," auto",[77,2802,411],{"class":401},[77,2804,2805,2808,2810,2813,2815],{"class":79,"line":179},[77,2806,2807],{"class":97},"  padding",[77,2809,2780],{"class":401},[77,2811,2812],{"class":97},"20",[77,2814,2786],{"class":397},[77,2816,411],{"class":401},[77,2818,2819],{"class":79,"line":185},[77,2820,771],{"class":401},[77,2822,2823],{"class":79,"line":190},[77,2824,171],{"emptyLinePlaceholder":170},[77,2826,2827,2830],{"class":79,"line":196},[77,2828,2829],{"class":83},".app-header",[77,2831,1773],{"class":401},[77,2833,2834,2837,2839,2842],{"class":79,"line":202},[77,2835,2836],{"class":97},"  text-align",[77,2838,2780],{"class":401},[77,2840,2841],{"class":97},"center",[77,2843,411],{"class":401},[77,2845,2846,2849,2851,2854,2856],{"class":79,"line":208},[77,2847,2848],{"class":97},"  margin-bottom",[77,2850,2780],{"class":401},[77,2852,2853],{"class":97},"30",[77,2855,2786],{"class":397},[77,2857,411],{"class":401},[77,2859,2860],{"class":79,"line":214},[77,2861,771],{"class":401},[77,2863,2864],{"class":79,"line":220},[77,2865,171],{"emptyLinePlaceholder":170},[77,2867,2868,2871],{"class":79,"line":226},[77,2869,2870],{"class":83},".news-grid",[77,2872,1773],{"class":401},[77,2874,2875,2878,2880,2883],{"class":79,"line":231},[77,2876,2877],{"class":97},"  display",[77,2879,2780],{"class":401},[77,2881,2882],{"class":97},"grid",[77,2884,411],{"class":401},[77,2886,2887,2890,2892,2895,2897,2900,2902,2905,2907,2910,2912,2914,2916,2919],{"class":79,"line":237},[77,2888,2889],{"class":97},"  grid-template-columns",[77,2891,2780],{"class":401},[77,2893,2894],{"class":97},"repeat",[77,2896,642],{"class":401},[77,2898,2899],{"class":97},"auto-fill",[77,2901,815],{"class":401},[77,2903,2904],{"class":97},"minmax",[77,2906,642],{"class":401},[77,2908,2909],{"class":97},"300",[77,2911,2786],{"class":397},[77,2913,815],{"class":401},[77,2915,1436],{"class":97},[77,2917,2918],{"class":397},"fr",[77,2920,2921],{"class":401},"));\n",[77,2923,2924,2927,2929,2931,2933],{"class":79,"line":243},[77,2925,2926],{"class":97},"  gap",[77,2928,2780],{"class":401},[77,2930,2812],{"class":97},[77,2932,2786],{"class":397},[77,2934,411],{"class":401},[77,2936,2937],{"class":79,"line":249},[77,2938,771],{"class":401},[77,2940,2941],{"class":79,"line":255},[77,2942,171],{"emptyLinePlaceholder":170},[77,2944,2945,2948],{"class":79,"line":261},[77,2946,2947],{"class":83},".news-card",[77,2949,1773],{"class":401},[77,2951,2952,2955,2957,2959,2961,2964,2967],{"class":79,"line":267},[77,2953,2954],{"class":97},"  border",[77,2956,2780],{"class":401},[77,2958,1436],{"class":97},[77,2960,2786],{"class":397},[77,2962,2963],{"class":97}," solid",[77,2965,2966],{"class":97}," #ddd",[77,2968,411],{"class":401},[77,2970,2971,2974,2976,2979,2981],{"class":79,"line":273},[77,2972,2973],{"class":97},"  border-radius",[77,2975,2780],{"class":401},[77,2977,2978],{"class":97},"8",[77,2980,2786],{"class":397},[77,2982,411],{"class":401},[77,2984,2985,2988,2990,2993],{"class":79,"line":279},[77,2986,2987],{"class":97},"  overflow",[77,2989,2780],{"class":401},[77,2991,2992],{"class":97},"hidden",[77,2994,411],{"class":401},[77,2996,2997,3000,3003,3006,3009],{"class":79,"line":285},[77,2998,2999],{"class":97},"  transition",[77,3001,3002],{"class":401},": transform ",[77,3004,3005],{"class":97},"0.2",[77,3007,3008],{"class":397},"s",[77,3010,411],{"class":401},[77,3012,3013],{"class":79,"line":291},[77,3014,771],{"class":401},[77,3016,3017],{"class":79,"line":296},[77,3018,171],{"emptyLinePlaceholder":170},[77,3020,3021,3024],{"class":79,"line":302},[77,3022,3023],{"class":83},".news-card:hover",[77,3025,1773],{"class":401},[77,3027,3028,3031,3033,3036,3038,3041,3043],{"class":79,"line":307},[77,3029,3030],{"class":97},"  transform",[77,3032,2780],{"class":401},[77,3034,3035],{"class":97},"translateY",[77,3037,642],{"class":401},[77,3039,3040],{"class":97},"-4",[77,3042,2786],{"class":397},[77,3044,1652],{"class":401},[77,3046,3047,3050,3052,3054,3057,3059,3062,3064,3067,3069,3071,3074,3076,3078,3080,3082,3085],{"class":79,"line":313},[77,3048,3049],{"class":97},"  box-shadow",[77,3051,2780],{"class":401},[77,3053,1413],{"class":97},[77,3055,3056],{"class":97}," 4",[77,3058,2786],{"class":397},[77,3060,3061],{"class":97}," 12",[77,3063,2786],{"class":397},[77,3065,3066],{"class":97}," rgba",[77,3068,642],{"class":401},[77,3070,1413],{"class":97},[77,3072,3073],{"class":401},",",[77,3075,1413],{"class":97},[77,3077,3073],{"class":401},[77,3079,1413],{"class":97},[77,3081,3073],{"class":401},[77,3083,3084],{"class":97},"0.1",[77,3086,1652],{"class":401},[77,3088,3089],{"class":79,"line":318},[77,3090,771],{"class":401},[15,3092,3094],{"id":3093},"step-7-environment-variables","Step 7: Environment Variables",[11,3096,3097,3098,3101],{},"Create a ",[74,3099,3100],{},".env"," file:",[67,3103,3108],{"className":3104,"code":3106,"language":3107},[3105],"language-text","VITE_NEWS_API_KEY=your_api_key_here\n","text",[74,3109,3106],{"__ignoreMap":72},[15,3111,3113],{"id":3112},"step-8-run-your-app","Step 8: Run Your App",[67,3115,3117],{"className":69,"code":3116,"language":71,"meta":72,"style":72},"npm run dev\n",[74,3118,3119],{"__ignoreMap":72},[77,3120,3121,3123,3126],{"class":79,"line":80},[77,3122,84],{"class":83},[77,3124,3125],{"class":87}," run",[77,3127,3128],{"class":87}," dev\n",[11,3130,3131,3132,3135],{},"Visit ",[74,3133,3134],{},"http:\u002F\u002Flocalhost:5173"," to see your news aggregator in action!",[15,3137,3139],{"id":3138},"next-steps","Next Steps",[11,3141,3142],{},"Enhance your app with:",[23,3144,3145,3148,3151,3154,3157],{},[26,3146,3147],{},"Pagination for large result sets",[26,3149,3150],{},"Favorite articles feature",[26,3152,3153],{},"Dark mode toggle",[26,3155,3156],{},"Social sharing buttons",[26,3158,3159],{},"Article bookmarking",[15,3161,3163],{"id":3162},"conclusion","Conclusion",[11,3165,3166],{},"You've built a fully functional news aggregator! This foundation can be extended with more features and customization to suit your needs.",[11,3168,3169,3170,3174],{},"Check out our ",[682,3171,3173],{"href":3172},"\u002Fdocs","API documentation"," for more advanced features and endpoints.",[3176,3177,3178],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":72,"searchDepth":107,"depth":107,"links":3180},[3181,3182,3183,3184,3185,3186,3187,3188,3189,3190,3191,3192],{"id":17,"depth":107,"text":18},{"id":43,"depth":107,"text":44},{"id":61,"depth":107,"text":62},{"id":145,"depth":107,"text":146},{"id":378,"depth":107,"text":379},{"id":789,"depth":107,"text":790},{"id":1508,"depth":107,"text":1509},{"id":2751,"depth":107,"text":2752},{"id":3093,"depth":107,"text":3094},{"id":3112,"depth":107,"text":3113},{"id":3138,"depth":107,"text":3139},{"id":3162,"depth":107,"text":3163},"2024-11-28","A step-by-step tutorial on creating a modern news aggregator application using AllNewsAPI and React",false,"md","\u002Fblog\u002Fbuilding-a-news-aggregator-app-with-allnewsapi.webp",{},"\u002Fblog\u002Fbuilding-news-aggregator-app",{"title":5,"description":3194},{"loc":3199},"blog\u002Fbuilding-news-aggregator-app","tutorial","3kiQ0CRdSChl_DZIZ1_wnhLs0y-1HxMh8mZE0cktxq4",1783882207699]