Readme

README.md

@@ -1,39 +1,48 @@
 # Vantaa Exercise Reservations
-
 ## Architecture
+### Components
+*   *Frontend:* React.js, MobX & CSS-in-JS
+*   *Backend:* Node.js & Express.js
+*   *Database:* PostgreSQL
+*   *Testing:* Jest
 
-This project is simple client-server application built with
-
-*   Frontend: React.js & MobX
-*   Backend: Node.js & Express.js
-*   Database: PostgreSQL
+### Integrations
+*   *Grynos:* Course directory of Vantaa.
+*   *Telia:* SMS gateway.
+*   *Bambora:* Payment API.
 
-It integrates to Grynos to get the information about current courses available in Vantaa.
+## Getting Started
+The local development is set up using *Docker*.
 
-## Running locally
+We ship with three scripts to help you with setting up the local development, build a staging server, and deploy the app to its staging server.
 
-The local development is set up using docker. Docker is a containerization that help shipping application easy, and without the hassle of installing many many things. We highly recommend you install docker.
+*   run-locally.sh : Start the development servers for frontend, backend and a bundled database visualiser. The frontend and backend servers support hot-reloading.
+*   build-docker.sh : A script to build the image for the app.
+*   deploy-to-dev.sh: A script to build and deploy the Docker container to [Heroku] and make it available in [vantaa-silverfox.herokuapp.com](https://vantaa-silverfox.herokuapp.com).
 
 ### With Docker
-
 Run
-
 ```
-. ./run-locally.sh
+./run-locally.sh
 ```
 
-This local development includes hot reloading on the front-end and the back-end.
+*   The frontend can be found in [localhost:3000](localhost:3000).
+*   The backend can be found in [localhost:5000](localhost:5000).
+*   The database can be connected in [localhost:5432](localhost:5432).
+*   The database visualizer tool (Adminer), and can be accessed via the browser in [localhost:8080](localhost:8080).
 
-## Deployment
+### Without Docker
+Please refer to the READMEs in [`frontend/`](frontend/README.md) and [`backend/`](backend/README.md).  
 
-### Development
+## Deployment
+### Staging
+Deploy to [Heroku](https://www.heroku.com) requires Heroku account with access to the app specified in script below and the [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli).
 
-To deploy, Heroku CLI needs to be set-up along with Docker.
+Use the following script to deploy to Heroku:
 
 ```
-. ./deploy-to-dev.sh
+./deploy-to-dev.sh
 ```
 
 ### Production
-
-TBD
+TBD

backend/README.md

@@ -1,25 +1,13 @@
-# Vantaa - backend
+# Backend
 
 ## Prerequisites
-
-*   Node 8.10 or later
+- Node 8.10 or later
 
 ## Development
-
-The backend is a docker service. Please refer to general installations instruction.
-
-The API is available in `localhost:5000`
-
-## API Calls
-
-list of all available courses: (http://localhost:5000/api/courses).
-list of all available events: (http://localhost:5000/api/events)
-list of all available users: (http://localhost:5000/api/users)
-
-## Implementation Details
-
-The backend starts up on (localhost:5000), then connects to the postgres db on docker using sequalize.
-
-We are using the test API call to get the list of all courses from the Grynos Server.(https://colosseum.grynos.com/ilmoapix/v1/course/search?com=3,6&cgt=176).
-
-This will be later replaced with the actual API once available.
+Can be run as Docker container or as:
+1. Populate [.env](./backend/.env) file at the root of the backend directory with necessary environmental variables for the service to function properly. 
+2. Run 
+```bash
+npm install
+npm run dev
+``` 

frontend/README.md

@@ -1,7 +1,94 @@
-# The FRONT-END
+# Frontend
 
-Welcome! The front-end of this project is built as a **SINGLE PAGE APPLICATION**, using **REACT ⚛️**.
+This README will cover the topics regarding the Frontend application. We will not be discussing about how to get started or development on the Frontend, because those details have been talked in great details [in the project-wide README.md](/README.md)
 
-## Development
+## Technologies and Framework
 
-The front-end hot-reload server is available as a docker service. Please refer to the general installation instruction
+*   Single-page application (SPA) architecture.
+*   React as the view library.
+*   Mobx as state management library. Data is organized in OOP style (not as tree like in Redux).
+*   React-emotion as a CSS-in-JS styling solution.
+*   Prettier as code formatter.
+*   ESLint as linter.
+
+The project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
+
+## Getting Started
+
+Once you have the backend up and running and run:
+
+```bash
+npm install
+npm start
+```
+
+Please note that in development mode the Service worker will be disabled.
+
+To see the production version, install `http-server` globally as:
+
+```bash
+npm install -g http-server
+```
+
+To build and run, use:
+
+```bash
+npm run build
+cd build
+http-server .
+```
+
+Access the site in `localhost:8080`.
+
+## Authentication, Cookies and Local Storage
+
+Authentication token is stored in secure, HTTP-only cookies. On start-up, the frontend will make a test request to see if the token is still valid.
+
+The app stores a flag to see if the user has grant us the right to use cookies or not `localStorage`.
+
+## Styling
+
+### Theming
+
+The application uses a simple Javascript object to hold styling configurations. This object is in [index.js](./src/index.js)
+
+Main parameters and their function:
+
+*   `signInBackGround`: is the background color of the sign-in page
+*   `main`: the main color of the app, used thoroughly in text, shapes, buttons, etc
+*   `complementary`: the secondary color of the app, used for highlighting
+*   `green`: the successful "green" of the app
+*   `error`: is the typical error color code
+
+The app use Calibri as the main font for typography.
+
+### Customization
+
+Certain components (e.g. input, modal and button) have been standardized and are used as the basis of the app. These can be found in `./src/components/`.
+
+### Responsive Design
+
+At the moment, two type of screens are supported: phones and desktop.
+
+## Localization and Internationalization
+
+The app supports localization and internalization of strings and time/date formats. The translations are located in [content.json](./src/stores/content.json). There is no way to switch language currently.
+
+## Progressive Aspects of the App
+
+The app is a PWA (Progressive Web Application). All static assets for frontend are cached by default when environment is production.
+
+## Browser and Device Compatibility
+
+The frontend is tested primarily against multiple iOS and Android versions.
+
+To test PWA features, make sure you use a browser compatible with Service worker and Web app manifests.
+
+### Tested Browsers
+
+| Browser (Platform/Version) |               🐛 Bugs                |
+| -------------------------- | :----------------------------------: |
+| Chrome (v66/Desktop)       |                  -                   |
+| Firefox (v60/Desktop)      |            No blur effect            |
+| Safari (iOS 11)            | No prompt installing to home devices |
+| Safari (v11/Desktop)       | No prompt installing to home devices |

frontend/src/components/button/index.js

@@ -2,35 +2,27 @@ import React from 'react';
 import styled from 'react-emotion';
 import posed from 'react-pose';
 
-const BaseAnimationButton = posed.button({
-    preEnter: {
-        opacity: 0,
-        scale: 0,
-    },
-    enter: {
-        opacity: 1,
-        scale: 1,
-    },
-    exit: {
-        opacity: 0,
-        scale: 0,
-    },
-});
-
-const ButtonStyled = styled(BaseAnimationButton)`
-    background-color: rgba(255, 255, 255, 0.13);
-    border-radius: 8px;
+const ButtonStyled = styled('button')`
+    background-color: transparent;
+    border-radius: 1.5rem;
     border: 1px solid;
-    border-color: rgba(255, 255, 255, 0.8);
-    padding: 1.5rem;
-    color: white;
+    border-color: ${(props) =>
+        props.alternative
+            ? props.theme.complementary
+            : props.color || props.theme.main};
+    padding: 1.5rem 2rem;
+    color: ${(props) =>
+        props.alternative
+            ? props.theme.complementary
+            : props.color || props.theme.main};
     font-size: 2rem;
-    line-height: 0.5rem;
+    line-height: 1rem;
     display: inline-block;
     font-family: Calibri, sans-serif !important;
-    letter-spacing: 0.5px;
+    letter-spacing: 1px;
     outline: none;
     font-weight: bold;
+    text-transform: uppercase;
     cursor: pointer;
     transition: box-shadow 0.5s ease, background-color 0.5s ease,
         border-color 0.5s ease, color 0.7s ease;
@@ -42,17 +34,27 @@ const ButtonStyled = styled(BaseAnimationButton)`
         opacity: 0.5 !important;
         pointer-events: none;
     `};
+
     ${(props) =>
         props.bold &&
         `
-        border-color: ${props.theme.main};
-        color: ${props.theme.main};
+        background-color: ${
+            props.alternative
+                ? props.theme.complementary
+                : props.color || props.theme.main
+        };
+        color: ${
+            props.alternative ? 'rgba(0,0,0, .86)' : 'rgba(255,255,255, .86)'
+        };
     `};
 
     &:hover {
-        color: ${(props) => props.theme.main};
-        border-color: ${(props) => props.theme.main};
-        background-color: white;
+        background-color: ${(props) =>
+            props.alternative
+                ? props.theme.complementary
+                : props.color || props.theme.main};
+        color: ${(props) =>
+            props.alternative ? 'rgba(0,0,0, .86)' : 'rgba(255,255,255, .86)'};
         box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
     }
 `;
@@ -67,10 +69,14 @@ class Button extends React.Component {
             pose,
             children,
             bold,
+            color,
+            alternative,
         } = this.props;
         return (
             <ButtonStyled
+                alternative={alternative}
                 bold={bold}
+                color={color}
                 className={className}
                 style={style}
                 pose={pose}

frontend/src/components/modal/index.js

@@ -103,7 +103,7 @@ const ModalContentAnimatable = posed.div({
 });
 
 export const Content = styled(ModalContentAnimatable)`
-    margin: 2rem 0;
+    margin: 0 0 2rem 0;
 `;
 export const Title = styled('h4')`
     margin: 0 0 2rem 0;

frontend/src/index.css

@@ -52,6 +52,15 @@ input::-webkit-inner-spin-button {
     box-sizing: border-box;
 }
 
+/* styles */
+html {
+    display: flex;
+    background: url('./assets/Sports.png');
+}
+#root {
+    will-change: filter;
+}
+/* responsive designs */
 /* Extra small devices (phones, 600px and down) */
 
 @media only screen and (max-width: 600px) {