Add dummyData and create the feed on homepage

src/pages/Home.js

@@ -1,30 +1,97 @@
 import React, { useState } from "react";
+import PropTypes from "prop-types";
 
-import { IconButton, Menu, MenuItem } from "@material-ui/core";
+import {
-import { AccountCircle } from "@material-ui/icons";
+	Card,
+	CardActionArea,
+	CardActions,
+	CardContent,
+	CardMedia,
+	Chip,
+	IconButton,
+	Link,
+	Menu,
+	MenuItem,
+	Typography
+} from "@material-ui/core";
+import { red } from "@material-ui/core/colors";
+import { AccountCircle, Favorite, Link as LinkIcon } from "@material-ui/icons";
 import { useHistory } from "react-router-dom";
 import NavBar from "./shared/NavBar";
 
+import config from "../config";
+// TODO: Replace with API accessed feeds
+import feeds from "./dummyData/feeds.json";
+
+function FeedCard({ feed }) {
+	const [filled, setFilled] = useState(Math.random() > 0.5);
+	let style = {};
+	if (filled) {
+		style={
+			color: red.A400
+		};
+	}
+	return (
+		<Card
+			key={feed.id}
+			style={{
+				maxWidth: "600px",
+				margin: "20px auto",
+			}}
+		>
+			<CardActionArea>
+				<CardMedia
+					image={`${config.thumbnailServer}/${feed.id}.jpg`}
+					title={feed.title}
+					component="img"
+				/>
+				<CardContent>
+					<Typography gutterBottom variant="h5" component="h2">
+						{feed.title}
+					</Typography>
+					<Typography variant="body2" color="textSecondary" component="h2">
+						{feed.description}
+					</Typography>
+					{feed.tags.map((tag, idx) => <Chip label={tag} key={idx} style={{marginRight: "1em"}}/>)}
+				</CardContent>
+			</CardActionArea>
+			<CardActions>
+				<IconButton style={style} onClick={() => setFilled(!filled)}>
+					<Favorite />
+				</IconButton>
+				<Link href={feed.url}>
+					<IconButton>
+						<LinkIcon />
+					</IconButton>
+				</Link>
+			</CardActions>
+		</Card>
+	);
+}
+
+FeedCard.propTypes = {
+	feed: PropTypes.object,
+};
 
 function App() {
 	const history = useHistory();
 	const [anchorEl, setAnchorEl] = useState(null);
 	const open = Boolean(anchorEl);
 
-	const handleMenu = (event) => {
+	function handleMenu(event) {
 		setAnchorEl(event.currentTarget);
-	};
+	}
 
-	const handleClose = () => {
+	function handleClose() {
 		setAnchorEl(null);
-	};
+	}
 
-	const logout = () => {
+	function logout() {
 		handleClose();
 		history.push("/");
-	};
+	}
 
-	return (
+	return (<>
 		<NavBar>
 			<div>
 				<IconButton
@@ -57,7 +124,11 @@ function App() {
 				</Menu>
 			</div>
 		</NavBar>
-	);
+
+		<div>
+			{feeds.map(feed => <FeedCard key={feed.id} feed={feed} />)}
+		</div>
+	</>);
 }
 
 export default App;

src/pages/dummyData/feeds.json

@@ -0,0 +1,121 @@
+[{
+    "id": 1,
+    "title": "replanting underexcited unaccidental",
+    "description": "cornupete horse-litter Kylah Graehme imperil deliquesced problematic herniary sleep-created spitsticker epoxidize neurectopia pareira BURP nucleary enduing Rozek antirobbery biotome rescored",
+    "url": "https://webionite.com/",
+    "tags": ["Mathematics", "Statistics"]
+}, {
+    "id": 2,
+    "title": "remands centered borough",
+    "description": "prosceniums black-blooded testata Winnebagos Hydri couches subumbelliferous Parnassianism assi puppydom previolated table-hop skiatron befavor wistfully meurtriere cuckooing dongon intuitable plentiful",
+    "url": "https://webionite.com/",
+    "tags": ["Statistics", "Machine Learning", "Data Science"]
+}, {
+    "id": 3,
+    "title": "nanocephalous foldboats vehme",
+    "description": "stockbroker synergy creophagism Miltonize cryptanalyzed pumpkinify remortgaging be-smutch threefoldly corporeal detentions Hawthorn ramets zoon Valentine annuluses mechanicocorpuscular indicium periosteorrhaphy raged",
+    "url": "https://webionite.com/",
+    "tags": ["History", "Machine Learning", "Biology"]
+}, {
+    "id": 4,
+    "title": "evangelicals anxious Lardizabalaceae",
+    "description": "polysomes Chaker liabilities bull-bearing extill nonratably Wardieu cometwise faunistically medino Callisaurus vapulation Melrose rentes synovitic spitefuller anisogamic well-rubbed wind-swung unmercifully",
+    "url": "https://webionite.com/",
+    "tags": ["Data Science", "Biology", "Javascript"]
+}, {
+    "id": 5,
+    "title": "razorbill permanency paramountcy",
+    "description": "turtleize nonlubricating Hibernicising Angadreme microstomia quasi-seriously outflux carburated psize appetizers welcomers tombaks Hartselle tonicked exactly Dorena chromodiascope inconclusible genealogic recycles",
+    "url": "https://webionite.com/",
+    "tags": ["Machine Learning", "Biology", "Javascript"]
+}, {
+    "id": 6,
+    "title": "Shawwal rabble-rousing outer-directed",
+    "description": "hyperdoricism rehabber wobbler discourteous RAF Mullin hypocoristically Lyndes outward-bound greedygut protocaseose deep-sided fathercraft shift Warundi Velarde pluggingly subjectlike there'll fractured",
+    "url": "https://webionite.com/",
+    "tags": ["Mathematics", "Statistics"]
+}, {
+    "id": 7,
+    "title": "bifluoride much-honored centurist",
+    "description": "polars typhlon neurine upfill illustre tzarisms preexceptional stretto urosepsis unhaft fibrilation subcreative ungerontic moonshine prehend Thelyphonidae king-ridden Kenzi receptitious twice-appropriated",
+    "url": "https://webionite.com/",
+    "tags": ["Javascript", "Python", "Science"]
+}, {
+    "id": 8,
+    "title": "antechapel vittle self-banished",
+    "description": "UCAR take-down stonesmatch superofrontal stirp praetextae LRSS ten-knotter hemangiomata audaciously yellowish-green-yellow inhuman perfectest spinneys noter space gay-beseen oscinine Skiest extirpator",
+    "url": "https://webionite.com/",
+    "tags": ["Mathematics", "Statistics", "Science"]
+}, {
+    "id": 9,
+    "title": "Harlingen umbeled bhara",
+    "description": "pelletierine hotbrained flamen mnemonic's whity-brown arriccios ruinatious paromologia catabolizing dinanderie renouncement academicism endogenetic supercavitation Shamus hopingly gravimetric creamsacs Rentsch faithfulness",
+    "url": "https://webionite.com/",
+    "tags": ["Data Science", "Science"]
+}, {
+    "id": 10,
+    "title": "Cyclanthales wiseweed anemonol",
+    "description": "garance splaying centesimate Jonina Caddaric irretentiveness pygargus bararite Edessan monkliness conferences aviaries Magnuson stoke reauthorizing rinse uralitic checkrein objurgative Bastien",
+    "url": "https://webionite.com/",
+    "tags": ["Mathematics", "Machine Learning", "Biology"]
+}, {
+    "id": 11,
+    "title": "proaddition Tehuelet Celastrus",
+    "description": "preadopts plumelet prisometer colocynth precontinental intercitizenship Lauter spear-bill humit Metaphen chrysoeriol phenoplast saprolegniaceous mortalness Basilicata neurotics mis-space bendies overurging tome",
+    "url": "https://webionite.com/",
+    "tags": ["Statistics", "Science"]
+}, {
+    "id": 12,
+    "title": "bids vanillin bemaddened",
+    "description": "scribeship poppets Moliones orthographist syllabarium repressurizes Podaliriidae mating Miller well-saffroned wedset disinfect flotilla uncorrelatively beseek diobolon unadoptional German-american dimerization mattboard",
+    "url": "https://webionite.com/",
+    "tags": ["Mathematics", "Javascript"]
+}, {
+    "id": 13,
+    "title": "fraenums redemption quadruplets",
+    "description": "tablecloth insite dolorousness iso-uretine Vareck exta Gallinae enchantresses mudsills Fording cystoradiography raiment fluoroformol polygamist octuplet take-charge ex-enemy self-debasement Scripturarian Manipur",
+    "url": "https://webionite.com/",
+    "tags": ["Mathematics", "Biology"]
+}, {
+    "id": 14,
+    "title": "Ontine Ulex abjudge",
+    "description": "open-bill subcompensated ensteep trichode Quamasia open-spacedly Lazos bijugous cailleach workbasket reflectionist cookshop CRB spot-drill unmendacious imbecile ejective spring-well scotopia adored",
+    "url": "https://webionite.com/",
+    "tags": ["Mathematics", "Python"]
+}, {
+    "id": 15,
+    "title": "Hsiang blazoners murexan",
+    "description": "Nichola kvass chemotaxonomy inhibitors sciomachy fortunation surfeit-swelled newfanglement Tan contrarily octodecillion drum-wound pseudoseptate thick-hided vigilant ling Cycadofilicales interspecies clunking Nabalism",
+    "url": "https://webionite.com/",
+    "tags": ["Biology", "Science"]
+}, {
+    "id": 16,
+    "title": "colleague moneywort greatcoat",
+    "description": "mandated anti-Germanic zoophoric chameleons stingray self-admired Paymaster-General adderbolt subpolygonal sonically linsey-woolseys defalcating sublunary huguenots coactors Arragon Chalybean covariate courtage untremulent",
+    "url": "https://webionite.com/",
+    "tags": ["Mathematics", "Data Science"]
+}, {
+    "id": 17,
+    "title": "stoped minyanim carrotiness",
+    "description": "myrtleberry willeyer witchingly andante unkemptness wooshing ostentation nonathletic sea-boat sardel foolhardily gurneys scialytic semirealistic escape outproduces Tommy self-action whangees devinct",
+    "url": "https://webionite.com/",
+    "tags": ["Machine Learning", "Biology"]
+}, {
+    "id": 18,
+    "title": "Iridis Knutsen tandstickor",
+    "description": "croiik argot anthropologies bedeswoman merchantries flutings wetters easement Finleyville friggle extinguishes unfragmented lardite roweled bloodflower ascidioid Abitibi classers hemomanometer combatable",
+    "url": "https://webionite.com/",
+    "tags": ["Mathematics", "Python"]
+}, {
+    "id": 19,
+    "title": "dieretic Boote littermate",
+    "description": "premedial unioniform Fredel natterjack hepatoptosia autocarpic unsolidarity cionitis cognomens rhinophore multitudinistic Saban unexuberant Lyopoma ambivalence Gibsonia dwang pre-estimate Pro-emersonianism low-rimmed",
+    "url": "https://webionite.com/",
+    "tags": ["History", "Statistics", "Science"]
+}, {
+    "id": 20,
+    "title": "racehorses kineticism scienter",
+    "description": "Triodontoidei protosinner back-list red-eye Emersonian intratracheally Ejam coelomes hard-witted hesitantly Parthia imparities concubines sultane clip-winged co-une moonstone Cuda gumflower plies",
+    "url": "https://webionite.com/",
+    "tags": ["Mathematics", "Data Science"]
+}]