Development (#102)

* Update README.md

* [FRONTEND] Preview quotes and generate URL (#100)

* [FIX] Reupload the frontend code
[ADDED] Template files to the react app
[ENHANCEMENT] Reduced api calls to server

* Updated static quote

* .gitignore fix

* Width refactor in zues layout and change in static quote in frontend

* Release/docs/v1.2 (#101)

* [ Major Docs Updated ] | Documentation | updated ./README.md

* [ Major Docs Updated ] | Documentation | updated ./README.md

Co-authored-by: Shubhankar Kotnala <skshubhankar@gmail.com>
Co-authored-by: nishantpersonal <nishantvenugopalnair@gmail.com>

.gitignore

@@ -102,3 +102,8 @@ dist
 
 # TernJS port file
 .tern-port
+
+
+# Frontend 
+frontend/build
+frontend/node_modules

README.md

@@ -3,7 +3,7 @@ Dynamic quote generator for your GitHub readmes
 
 ![banner](./assets/README.png)
 
-![alt](https://img.shields.io/apm/l/vim-mode?label=license&logo=dark-green) ![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-success) ![Open Source? Yes!](https://badgen.net/badge/Open%20Source%20%3F/Yes%21/blue?icon=github) [![GitHub contributors](https://img.shields.io/github/contributors/shravan20/github-readme-quotes.svg)](https://github.com/shravan20/github-readme-quotes/graphs/contributors) ![Pull Request Counts](https://img.shields.io/bitbucket/pr/shravan20/github-readme-quotes) ![last commit](https://img.shields.io/github/last-commit/shravan20/github-readme-quotes) ![deployment-status](https://img.shields.io/website?url=https%3A%2F%2Fgithub-readme-quotes.herokuapp.com%2Fquote) 
+![alt](https://img.shields.io/apm/l/vim-mode?label=license&logo=dark-green) ![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-success) ![Open Source? Yes!](https://badgen.net/badge/Open%20Source%20%3F/Yes%21/blue?icon=github) [![GitHub contributors](https://img.shields.io/github/contributors/shravan20/github-readme-quotes.svg)](https://github.com/shravan20/github-readme-quotes/graphs/contributors) ![Pull Request Counts](https://img.shields.io/bitbucket/pr/shravan20/github-readme-quotes) ![last commit](https://img.shields.io/github/last-commit/shravan20/github-readme-quotes) ![deployment-status](https://img.shields.io/website?url=https%3A%2F%2Fgithub-readme-quotes.herokuapp.com%2Fquote) [![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://github.com/shravan20/github-readme-quotes/)
 <a href="https://discord.gg/QJ8cnPHgVZ">
   <img align="center" src="https://img.shields.io/discord/779439447736451132?label=discord-server&style=flat-square" />
 </a>
@@ -13,6 +13,12 @@ Dynamic quote generator for your GitHub readmes
 
 <br>
 
+### Use [User Interface](http://github-readme-quotes.herokuapp.com/), to view designed quotes and copy link and paste it directly
+
+<img src="./assets/uiScreen.gif" width=100% align="center"/>
+
+---
+
 ##  Features
 
 | Sl No  | Feature Name  | Description  |

frontend/README.md

@@ -0,0 +1,29 @@
+# Github Readme Quotes - Frontend 
+
+This module is used for the frontend of the server of Github Readme Quotes, where you can get your own customized quotes in two simple steps, 
+- Customise the quotes
+- Copy the text to be used directly in your readme
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+> NOTE: This is a development version of the app, in order to run the whole server, build the production version using `npm run build` and then start the server.

frontend/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.11.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.3.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.1",
+    "web-vitals": "^0.2.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

frontend/public/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <title>Github Quotes for Readme</title>
+</head>
+
+<body style="background-color: white;">
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>

frontend/public/manifest.json

@@ -0,0 +1,20 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

frontend/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

frontend/src/components/App/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

frontend/src/components/App/App.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Dashboard from '../Dashboard';
+
+function App(props) {
+  return (
+    <Dashboard {...props}/>
+  );
+}
+
+export default App;

frontend/src/components/App/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

frontend/src/components/Dashboard/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import useScrollTrigger from '@material-ui/core/useScrollTrigger';
+import Container from '@material-ui/core/Container';
+import { dashConstants } from '../../config/constants';
+import Home from '../Pages/Home';
+
+function ElevationScroll(props) {
+    const { children, window } = props;
+    // Note that you normally won't need to set the window ref as useScrollTrigger
+    // will default to window.
+    // This is only being set here because the demo is in an iframe.
+    const trigger = useScrollTrigger({
+        disableHysteresis: true,
+        threshold: 0,
+        target: window ? window() : undefined,
+    });
+
+    return React.cloneElement(children, {
+        elevation: trigger ? 4 : 0,
+    });
+}
+
+function Dashboard(props) {
+    return (
+        <React.Fragment>
+            <CssBaseline />
+            <ElevationScroll {...props}>
+                <AppBar>
+                    <Toolbar>
+                        <Typography variant="h6">{dashConstants.APP_NAME}</Typography>
+                    </Toolbar>
+                </AppBar>
+            </ElevationScroll>
+            <Toolbar />
+            <Container style={{backgroundColor:'white'}}>
+                <Home/>
+            </Container>
+        </React.Fragment>
+    );
+}
+
+export default Dashboard;

frontend/src/components/Pages/Home/index.js

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { Typography, Grid } from '@material-ui/core';
+import TemplateCard from '../../organisms/TemplateCard';
+import { themes, animations, layouts } from '../../../config/cardTemplate';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+
+const Home = () => {
+
+    const [theme, setTheme] = useState(themes[0]);
+    const [animation, setAnimation] = useState(animations[0]);
+    const [layout, setLayout] = useState(layouts[0]);
+
+    return (
+        <React.Fragment>
+            <Typography variant='h5' align='center' component='h2' style={{ margin: '20px' }}>Make your own personalised style for the Quotes</Typography>
+
+            <Grid
+                container
+                alignItems="center"
+                spacing={3}
+            >
+
+                <Grid item xs={12} sm={6} md={4}>
+                    <Autocomplete
+                        id="theme"
+                        options={themes}
+                        value={theme}
+                        style={{ width: 300 }}
+                        onChange={(_event, newValue) => {
+                            if (newValue != null)
+                                setTheme(newValue)
+                        }}
+                        renderInput={(params) => <TextField {...params} label="Theme" variant="outlined" />}
+                    />
+                </Grid>
+                <Grid item xs={12} sm={6} md={4}>
+                    <Autocomplete
+                        id="layout"
+                        options={layouts}
+                        value={layout}
+                        onChange={(_event, newValue) => {
+                            if (newValue != null)
+                                setLayout(newValue)
+                        }}
+                        style={{ width: 300 }}
+                        renderInput={(params) => <TextField {...params} label="Layout" variant="outlined" />}
+                    />
+                </Grid>
+                <Grid item xs={12} sm={12} md={4}>
+                    <Autocomplete
+                        id="animation"
+                        options={animations}
+                        value={animation}
+                        onChange={(_event, newValue) => {
+                            if (newValue != null)
+                                setAnimation(newValue)
+                        }}
+                        style={{ width: 300 }}
+                        renderInput={(params) => <TextField {...params} label="Animation" variant="outlined" />}
+                    />
+
+                </Grid>
+
+            </Grid>
+
+            <Grid container spacing={4}>
+                <Grid item xs={12}>
+                    <TemplateCard theme={theme} animation={animation} layout={layout} />
+                </Grid>
+                <Grid item xs={12}>
+                    <Typography align="center">Other layouts</Typography>
+                    {console.log("All Layouts ", layouts)}
+                </Grid>
+                {
+                    layouts.filter((item) => item !== layout).map((restLayout) => {
+                        return (
+                            <Grid key={restLayout} item xs={12} sm={12} md={6}>
+                                <TemplateCard theme={theme} animation={animation} layout={restLayout} />
+                            </Grid>
+                        )
+                    })
+                }
+            </Grid>
+
+        </React.Fragment>
+    )
+}
+
+export default Home;