Merge pull request #45 from relaxxpls/master

[v1.5.0] Make into a PWA and improve theme styling

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,41 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.prettierignore

@@ -1,2 +1,3 @@
 node_modules
 build
+public/index.html

README.md

@@ -2,25 +2,46 @@
 
 ## Requirements
 
-* React 16.8+
+* React 17+
 
 ## Getting started
 
+* Note: Enviroment variables are located [here](https://drive.google.com/drive/folders/1HCzepWZyzKJg0-yOyt4ZW46gO3z4-mHv?usp=sharing), and will only be accessible to the core developers.
+* Before starting, make sure to [install Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable). Also, **avoid** using npm in this repository.
+
 ### Development
 
-* Install required modules:
+* Clone this repository
+
+  ```powershell
+  git clone https://github.com/wncc/ResoBin.git
+  cd ResoBin
+  ```
+
+* Install dependencies:
 
   ```powershell
   yarn install
   ```
 
-* Run development server:
+* Copy the environment variables to the base directory (current directory)
+* Finally, run the development server:
 
   ```powershell
   yarn start
   ```
 
-* Frontend server runs at [`http://localhost:3000`](http://localhost:3000)
+* The frontend server runs at [`http://localhost:3000`](http://localhost:3000), and might take a few minutes to start.
+
+### Production
+
+* Build the project
+
+  ```powershell
+  yarn build
+  ```
+
+* Serve the `/build` directory using your webserver (Nginx or Apache)
 
 ### Production (deployment with Docker)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "resobin",
-  "version": "1.2.2",
+  "version": "1.4.1",
   "private": true,
   "repository": {
     "type": "git",
@@ -17,13 +17,13 @@
     "lint:styles": "stylelint src/**/*.{js,jsx} --fix"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.6.2",
-    "@sentry/react": "^6.16.0",
-    "@sentry/tracing": "^6.16.0",
+    "@reduxjs/toolkit": "^1.7.1",
+    "@sentry/react": "^6.16.1",
+    "@sentry/tracing": "^6.16.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "antd": "^4.17.3",
+    "antd": "^4.17.4",
     "axios": "^0.24.0",
     "date-fns": "^2.27.0",
     "dompurify": "^2.3.4",
@@ -35,11 +35,11 @@
     "react-dom": "^17.0.2",
     "react-dropzone": "^11.4.2",
     "react-helmet-async": "^1.2.2",
-    "react-pdf": "^5.5.0",
+    "react-pdf": "^5.6.0",
     "react-quill": "2.0.0-beta.4",
     "react-redux": "^7.2.6",
-    "react-router-dom": "^6.0.2",
-    "react-scripts": "4.0.3",
+    "react-router-dom": "^6.2.1",
+    "react-scripts": "5.0.0",
     "react-transition-group": "^4.4.2",
     "redux-persist": "^6.0.0",
     "styled-components": "^5.3.3",
@@ -48,13 +48,13 @@
   },
   "devDependencies": {
     "@stylelint/postcss-css-in-js": "^0.37.2",
-    "eslint-config-airbnb": "^19.0.2",
+    "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-promise": "^6.0.0",
     "prettier": "^2.5.1",
     "redux-logger": "^3.0.6",
-    "stylelint": "^14.1.0",
+    "stylelint": "^14.2.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^24.0.0",

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="/icons/mstile-150x150.png"/>
+      <TileColor>#707aff</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

public/index.html

@@ -2,31 +2,93 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/static/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="A course planner by DevCom, IIT Bombay."
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/static/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>ResoBin</title>
+    <meta name="description" content="Your true study buddy. Built with &hearts; by DevCom, IIT Bombay." />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+
+    <!-- Generated with https://realfavicongenerator.net -->
+    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="194x194" href="%PUBLIC_URL%/favicon-194x194.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/android-chrome-192x192.png">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#616adc">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta name="msapplication-TileColor" content="#707aff">
+    <meta name="msapplication-TileImage" content="%PUBLIC_URL%/mstile-144x144.png">
+    <meta name="msapplication-config" content="%PUBLIC_URL%/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
 
-    <!-- ? umami analytics -->
-    <script
-      async
-      defer
-      data-website-id="%REACT_APP_UMAMI_WEBSITE_ID%"
-      src="%REACT_APP_UMAMI_HOST%/umami.js"
-    ></script>
+    <title>ResoBin</title>
   </head>
 
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div class="spinner">
+      <img src="%PUBLIC_URL%/images/devcom/DC_logo_black.png" alt="logo" />
+    </div>
+
+    <style>
+      #root:not(:empty) + .spinner {
+        display: none;
+      }
+
+      .spinner {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: #ffffff;
+      }
+
+      .spinner img {
+        display: block;
+        position: relative;
+        left: 50%;
+        top: 50%;
+        width: 150px;
+        height: 150px;
+        margin: -75px 0 0 -75px;
+        border-radius: 50%;
+        box-shadow: 0 3px 3px 0 rgba(255, 56, 106, 1);
+        transform: translate3d(0, 0, 0);
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      .spinner img:after,
+      .spinner img:before {
+        content: '';
+        position: absolute;
+        border-radius: 50%;
+      }
+
+      .spinner img:before {
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        bottom: 5px;
+        box-shadow: 0 3px 3px 0 rgb(255, 228, 32);
+        animation: spin 3s linear infinite;
+      }
+
+      .spinner img:after {
+        top: 15px;
+        left: 15px;
+        right: 15px;
+        bottom: 15px;
+        box-shadow: 0 3px 3px 0 rgba(61, 175, 255, 1);
+        animation: spin 1.5s linear infinite;
+      }
+    </style>
   </body>
 </html>

public/manifest.json

@@ -1,25 +1,40 @@
 {
+  "name": "ResoBin by DevCom, IIT Bombay",
   "short_name": "ResoBin",
-  "name": "A course planner by DevCom, IIT Bombay.",
+  "description": "Your true study buddy.",
   "icons": [
     {
-      "src": "static/favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
     },
     {
-      "src": "static/logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/?source=pwa",
+  "background_color": "#1b1728",
+  "display": "standalone",
+  "scope": "/",
+  "theme_color": "#ffffff",
+  "shortcuts": [
+    {
+      "short_name": "Courses",
+      "name": "Course Finder",
+      "description": "Search and filter for courses.",
+      "url": "/courses?source=pwa"
     },
     {
-      "src": "static/logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
+      "short_name": "Timetable",
+      "name": "My timetable",
+      "description": "View and modify timetable.",
+      "url": "/timetable?source=pwa"
     }
   ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "lang": "en-US",
+  "categories": [
+    "education"
+  ]
 }