├── .env ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── Pages ├── Detail.js └── Home.js ├── index.js ├── reportWebVitals.js └── setupTests.js /.env: -------------------------------------------------------------------------------- 1 | REACT_APP_URL=http://localhost:9000/ -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend App 2 | 3 | 4 | ## Installation 5 | 6 | Frontend app installation 7 | ```bash 8 | npm install 9 | ``` 10 | 11 | ## Run 12 | 13 | ```bash 14 | npm start 15 | ``` -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.2", 7 | "@testing-library/react": "^12.1.3", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^0.26.0", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-router-dom": "^6.2.1", 13 | "react-scripts": "5.0.0", 14 | "web-vitals": "^2.1.4" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abbasikov/vertrical_test_frontend/831c3b416ce2fc56b63a19d9fe4f4b9e7cb9d52f/public/favicon.ico -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abbasikov/vertrical_test_frontend/831c3b416ce2fc56b63a19d9fe4f4b9e7cb9d52f/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abbasikov/vertrical_test_frontend/831c3b416ce2fc56b63a19d9fe4f4b9e7cb9d52f/public/logo512.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .App{ 8 | text-align: center; 9 | margin-top: 6%; 10 | } 11 | .App button{ 12 | padding: 10px 28px; 13 | border-radius: 10px; 14 | border: 1px solid black; 15 | box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75); 16 | cursor: pointer; 17 | margin-bottom: 22px; 18 | } 19 | .App button:hover{ 20 | background-image: linear-gradient(to right, #29323C, #485563, #2B5876, #4E4376); 21 | color: aliceblue; 22 | border: 1px solid white; 23 | } 24 | .App input{ 25 | width: 50%; 26 | padding: 10px 12px; 27 | border-radius: 12px; 28 | border: 1px solid black; 29 | outline: none; 30 | box-shadow: 4px 1px 8px black; 31 | } 32 | .App input:hover{ 33 | border: aliceblue; 34 | } 35 | 36 | .btn{ 37 | margin-left: 15px; 38 | } 39 | 40 | .result{ 41 | display: flex; 42 | flex-wrap: wrap; 43 | box-sizing: border-box; 44 | margin: 22px; 45 | width: 100%; 46 | justify-content: center; 47 | align-items: center; 48 | } 49 | .center{ 50 | display: flex; 51 | margin: 16px; 52 | box-shadow: 4px 1px 8px black; 53 | padding: 6px; 54 | border-radius: 6px; 55 | 56 | width: 250px; 57 | 58 | } 59 | .center-img{ 60 | width: 40%; 61 | display: flex; 62 | } 63 | .center-img img{ 64 | width: 100%; 65 | } 66 | .content{ 67 | display: flex; 68 | flex-direction: column; 69 | /* justify-content: space-evenly; */ 70 | width: 80%; 71 | /* margin: 14px; */ 72 | } 73 | .title{ 74 | padding-bottom:6% ; 75 | } 76 | .title{ 77 | font-weight: bold; 78 | text-decoration: underline; 79 | letter-spacing: 1px; 80 | color: #29323C; 81 | cursor: pointer; 82 | } 83 | .detail-img { 84 | display: flex; 85 | flex-direction: column; 86 | justify-content: center; 87 | align-items: center; 88 | margin-top: 12px; 89 | } 90 | .detail-img img{ 91 | width: 80%; 92 | height: 550px; 93 | } 94 | .detail-img p{ 95 | margin-top: 32px; 96 | margin-bottom: 32px; 97 | font-size: 22px; 98 | font-weight: bold; 99 | } 100 | .detail-des p { 101 | font-size: 22px; 102 | font-weight: bold; 103 | margin: 22px; 104 | cursor: pointer; 105 | } 106 | .detail-des p:hover { 107 | color: blue; 108 | } 109 | .error{ 110 | color: red; 111 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | 2 | import './App.css'; 3 | import { 4 | Routes, 5 | Route, 6 | } from "react-router-dom"; 7 | import Home from "./Pages/Home"; 8 | import Detail from "./Pages/Detail"; 9 | 10 | function App() { 11 | return ( 12 | 13 | } /> 14 | } /> 15 | 16 | ); 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/Pages/Detail.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useLocation, useNavigate } from 'react-router-dom' 3 | 4 | const Detail = () => { 5 | const location = useLocation(); 6 | let navigate = useNavigate(); 7 | return ( 8 | <> 9 |
10 |

{ navigate('/') }}>Back

11 |
12 |
13 | # 14 |

{location.state.description}

15 |
16 | 17 | 18 | ) 19 | } 20 | 21 | export default Detail -------------------------------------------------------------------------------- /src/Pages/Home.js: -------------------------------------------------------------------------------- 1 | 2 | import { useState } from 'react'; 3 | import axios from 'axios'; 4 | import { useNavigate } from 'react-router-dom'; 5 | 6 | const Home = () => { 7 | let navigate = useNavigate(); 8 | const [value, setValue] = useState(''); 9 | const [error, setError] = useState(null); 10 | const [data, setData] = useState([]); 11 | const handleKeyDown = (event) => { 12 | if (event.key === 'Enter') { 13 | handleSearch() 14 | } 15 | } 16 | const handleSearch = async () => { 17 | setData([]) 18 | if (!value) 19 | setError('Please Enter title') 20 | else { 21 | try { 22 | setError(null) 23 | const response = await axios.get(`${process.env.REACT_APP_URL}?title=${value}`) 24 | if (response) setData(response.data) 25 | } catch (error) { 26 | setError("Title not found!!!") 27 | } 28 | } 29 | } 30 | return ( 31 |
32 | setValue(e.target.value)} type={'text'} placeholder='Enter Title' /> 33 | 34 | {error &&

{error}

} 35 |
36 | {data.map((item) => ( 37 |
38 |
39 | # 40 |
41 |
42 |
43 |

{ navigate('/detail', { state: item }) }}>{item.title}

44 |
45 |
46 |

{item.subDescription}

47 |
48 |
49 |
50 | ))} 51 |
52 |
53 | ) 54 | } 55 | 56 | export default Home -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import { 5 | BrowserRouter, 6 | } from "react-router-dom"; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | 13 | , 14 | document.getElementById('root') 15 | ); 16 | -------------------------------------------------------------------------------- /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/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 | --------------------------------------------------------------------------------