├── src ├── styles │ └── index.css ├── postcss.config.js ├── setupTests.js ├── pages │ ├── NotFound.js │ ├── ArticlesList.js │ ├── Article.js │ ├── About.js │ ├── Home.js │ └── article-content.js ├── App.test.js ├── reportWebVitals.js ├── components │ ├── CommentsList.js │ ├── NavBar.js │ ├── Articles.js │ └── AddCommentForm.js ├── index.js ├── App.css ├── App.js └── logo.svg ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── images │ ├── blog1.jpg │ ├── blog2.jpg │ └── blog3.jpg ├── manifest.json └── index.html ├── tailwind.config.js ├── .gitignore ├── package.json └── README.md /src/styles/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desicoder2021/mern-blog-front/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desicoder2021/mern-blog-front/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desicoder2021/mern-blog-front/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/images/blog1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desicoder2021/mern-blog-front/HEAD/public/images/blog1.jpg -------------------------------------------------------------------------------- /public/images/blog2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desicoder2021/mern-blog-front/HEAD/public/images/blog2.jpg -------------------------------------------------------------------------------- /public/images/blog3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desicoder2021/mern-blog-front/HEAD/public/images/blog3.jpg -------------------------------------------------------------------------------- /src/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require("tailwindcss"), require("autoprefixer")], 3 | }; 4 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {}, 6 | }, 7 | variants: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | }; 12 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/pages/NotFound.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const NotFound = () => { 4 | return ( 5 |

6 | 404: Page not found 7 |

8 | ); 9 | }; 10 | 11 | export default NotFound; 12 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/components/CommentsList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const CommentsList = ({ comments }) => { 4 | return ( 5 | <> 6 |

7 | Comments : 8 |

9 | {comments.map((comment, index) => ( 10 |
11 |

{comment.username}

12 |

{comment.text}

13 |
14 | ))} 15 | 16 | ); 17 | }; 18 | 19 | export default CommentsList; 20 | -------------------------------------------------------------------------------- /src/pages/ArticlesList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import articleContent from "./article-content"; 3 | 4 | import Articles from "../components/Articles"; 5 | 6 | const ArticlesList = () => { 7 | return ( 8 | <> 9 |

10 | Articles 11 |

12 |
13 |
14 | 15 |
16 |
17 | 18 | ); 19 | }; 20 | 21 | export default ArticlesList; 22 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import "whatwg-fetch"; 2 | import React from "react"; 3 | import ReactDOM from "react-dom"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | import "./styles/tailwind.css"; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById("root") 13 | ); 14 | 15 | // If you want to start measuring performance in your app, pass a function 16 | // to log results (for example: reportWebVitals(console.log)) 17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 18 | reportWebVitals(); 19 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/NavBar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | const NavBar = () => { 5 | return ( 6 | 25 | ); 26 | }; 27 | 28 | export default NavBar; 29 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 2 | // Pages 3 | import Home from "./pages/Home"; 4 | import About from "./pages/About"; 5 | import ArticlesList from "./pages/ArticlesList"; 6 | import Article from "./pages/Article"; 7 | import NotFound from "./pages/NotFound"; 8 | 9 | // Components 10 | import NavBar from "./components/NavBar"; 11 | 12 | function App() { 13 | return ( 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | ); 27 | } 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-blog", 3 | "version": "0.1.0", 4 | "private": true, 5 | "proxy": "http://localhost:8000/", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.12.0", 8 | "@testing-library/react": "^11.2.7", 9 | "@testing-library/user-event": "^12.8.3", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-router-dom": "^5.2.0", 13 | "react-scripts": "4.0.3", 14 | "web-vitals": "^1.1.2", 15 | "whatwg-fetch": "^3.6.2" 16 | }, 17 | "scripts": { 18 | "build:css": "postcss src/styles/index.css -o src/styles/tailwind.css", 19 | "watch:css": "postcss src/styles/index.css -o src/styles/tailwind.css --watch", 20 | "react-scripts:start": "sleep 5 && react-scripts start", 21 | "start": "run-p watch:css react-scripts:start", 22 | "build": "run-s build:css react-scripts:build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | }, 44 | "devDependencies": { 45 | "autoprefixer": "^10.2.6", 46 | "npm-run-all": "^4.1.5", 47 | "postcss": "^8.3.0", 48 | "postcss-cli": "^8.3.1", 49 | "tailwindcss": "^2.1.4" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/components/Articles.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | const Articles = ({ articles }) => { 5 | return ( 6 | <> 7 | {articles.map((article, index) => ( 8 |
9 |
10 | 11 | blog 16 | 17 |
18 | 19 |

20 | {article.title} 21 |

22 | 23 |

24 | {article.content[0].substring(0, 115)}... 25 |

26 |
27 | 31 | Learn more... 32 | 33 |
34 |
35 |
36 |
37 | ))} 38 | 39 | ); 40 | }; 41 | 42 | export default Articles; 43 | -------------------------------------------------------------------------------- /src/pages/Article.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import articleContent from "./article-content"; 3 | import Articles from "../components/Articles"; 4 | import NotFound from "./NotFound"; 5 | import CommentsList from "../components/CommentsList"; 6 | import AddCommetForm from "../components/AddCommentForm"; 7 | 8 | const Article = ({ match }) => { 9 | const name = match.params.name; 10 | const article = articleContent.find((article) => article.name === name); 11 | 12 | const [articleInfo, setArticleInfo] = useState({ comments: [] }); 13 | 14 | useEffect(() => { 15 | const fetchData = async () => { 16 | const result = await fetch(`/api/articles/${name}`); 17 | const body = await result.json(); 18 | console.log(body); 19 | setArticleInfo(body); 20 | }; 21 | fetchData(); 22 | }, [name]); 23 | 24 | if (!article) return ; 25 | const otherArticles = articleContent.filter( 26 | (article) => article.name !== name 27 | ); 28 | return ( 29 | <> 30 |

31 | {article.title} 32 |

33 | {article.content.map((paragraph, index) => ( 34 |

35 | {paragraph} 36 |

37 | ))} 38 | 39 | 40 | 41 |

42 | Other Articles 43 |

44 |
45 | 46 |
47 | 48 | ); 49 | }; 50 | 51 | export default Article; 52 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/components/AddCommentForm.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | const AddCommentForm = ({ articleName, setArticleInfo }) => { 4 | const [username, setUsername] = useState(""); 5 | const [commentText, setCommentText] = useState(""); 6 | 7 | const addComment = async () => { 8 | const result = await fetch(`/api/articles/${articleName}/add-comments`, { 9 | method: "post", 10 | body: JSON.stringify({ username, text: commentText }), 11 | headers: { 12 | "Content-Type": "application/json", 13 | }, 14 | }); 15 | const body = await result.json(); 16 | setArticleInfo(body); 17 | setUsername(""); 18 | setCommentText(""); 19 | }; 20 | 21 | return ( 22 |
23 |

Add a Comment

24 | 27 | setUsername(e.target.value)} 32 | /> 33 | 36 |