Added license, checking readme

Author: TowhidKashem

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020-present, Towhid Kashem
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -1,96 +1,107 @@
-<h1 align="center">👻 SnapChat clone</h1>
+<h1 align="center">👻 SnapChat Clone</h1>
 
-<h2 align="center">
-  <a href="https://google.com">[LIVE DEMO]</a>
-</h2>
-<p align="middle">
-  <a href="public/github/snapchat.mp4">
-    <img src="public/github/snapchat.gif" width="400" />
-  </a>
-</p>
-<p align="middle">
-  👆Click the image for a video showing what you can currently do!
-</p>
+# ⚡️Breakdown
 
-# ⚡️ Breakdown
+<div style="overflow:hidden;vertical-align:top">
+  <p style="float:left;width:35%;margin:0">
+    <a href="public/github/snapchat.mp4">
+      <img src="public/github/snapchat.gif" />
+      <br />
+      👆Click to see all implemented features
+    </a>
+  </p>
+  <div style="float:left;width:50%">
+
+  <h2 align="center">
+    <a href="https://google.com">[LIVE DEMO]</a>
+  </h2>
 
 - Built with `React`
   - Functional components using hooks
   - Feature based folder structure
   - `common` directory for shared components
   - Bootstraped using `Create React App`
 - Global state management via `Redux`
-  - Follows the modular [ducks](https://github.com/erikras/ducks-modular-redux) proposal to bundle action types, creators and reducers all in one file
+  - Follows the modular [ducks](https://github.com/erikras/ducks-modular-redux) proposal to bundle action types, creators and reducers all in one file (reducing the need to jump around)
   - Flat state tree (avoids deeply nested properties)
   - Follows official Redux styleguide recomendations for naming actions and action types, e.g. `camera/photosFetched` vs `SET_PHOTOS`
   - Uses `thunk` middleware for async operations
 - Type checked with `Typescript`
 - Unit tested with `Jest` and `Enzyme`
-- End-to-end tested in `Cypress`
+- End-to-end tested with `Cypress`
 - Custom component library showcased in `Storybook`
 - Linted using `Eslint`
 - Code is auto formatted using `Prettier` (ran as a pre-commit git hook) before it gets pushed to the repo
+- Feels close to a native app if you "add to homescreen" on mobile
+
+<h2 align="center">
+  <a href="https://google.com">[LIVE DEMO]</a>
+</h2>
+
+  </div>
+</div>
 
 # 💿 Installation
 
 Run these commands in the terminal:
 
-- `> git clone [email protected]:TowhidKashem/snapchat-clone.git`
-- `> cd snapchat-clone`
-- `> npm install`
-  - This will:
-    - Install the dependencies in package.json
-    - Checkout [jeelizFaceFilter](https://github.com/jeeliz/jeelizFaceFilter_) package (used for filters) and set it to the last version this project was tested and confirmed to work with
-    - Run `gulp` to concatenate, minify and transpile the files located in `public/filters/source/*.js` into a single file called `filters.min.js`
-- This part is optional but strongly recomended, without it you won't be able to view any of the snap map features:
-  - Make a Mapbox account and [get a free API key](https://docs.mapbox.com/help/glossary/access-token/)
-  - Rename the `.env.sample` file at the root of the project to just `.env`
-  - Inside enter your new API key, for example:
-    - Before: `REACT_APP_MAP_BOX_API_KEY=<REPLACE_WITH_API_KEY>`
-    - After: `REACT_APP_MAP_BOX_API_KEY=az.xyz123`
-- `> npm start`
-  - The app should open automatically in your browser at `https://localhost:3000/`
-    - In Chrome you will receive a "Your connection is not private" error
-      - Click "Advanced" > "Proceed to localhost (unsafe)"
+1. `> git clone [email protected]:TowhidKashem/snapchat-clone.git`
+2. `> cd snapchat-clone`
+3. `> npm install`
+
+- This will:
+  - Install the dependencies in package.json
+  - Checkout [jeelizFaceFilter](https://github.com/jeeliz/jeelizFaceFilter_) package (used for the filters) and set it to the last version this project was tested and confirmed to work with
+  - Run `gulp` to concatenate, minify and transpile the files located in `public/filters/source/*.js` into a single file called `filters.min.js`
+
+4. This part is optional but strongly recomended, without it you won't be able to view any of the snap map features:
+
+   - Make a Mapbox account and [get a free API key](https://docs.mapbox.com/help/glossary/access-token/)
+   - Rename the `.env.sample` file at the root of the project to just `.env`
+   - Inside enter your new API key, for example:
+     - Before: `REACT_APP_MAP_BOX_API_KEY=<REPLACE_WITH_API_KEY>`
+     - After: `REACT_APP_MAP_BOX_API_KEY=xy.abc123`
+
+5. `> npm start`
+
+- The app should open automatically in your browser at `https://localhost:3000/`
+  - In Chrome you will receive a "Your connection is not private" error
+    - Click "Advanced" > "Proceed to localhost (unsafe)"
+      - You'll get this warning because the app uses a self signed `https` certificate. The `getUserMedia` API used by the camera requires the `https` protocol so we run the dev server in https mode.
 
 <p align="middle">
   <img src="public/github/https-step-1.png" width="400" />
   <img src="public/github/https-step-2.png" width="400" /> 
 </p>
 
-You'll get this warning because the app uses a self signed `https` certificate. The `getUserMedia` API used by the camera requires the `https` protocol so we run the dev server in https mode.
-
-- After this you will be prompted to give access to your webcam, click "Allow"
+6. After this you will be prompted to give access to your webcam, click "Allow"
 
 <p align="middle">
-  <img src="public/github/camera-access.png" width="400" />
+  <img src="public/github/camera-access.png" width="300" />
 </p>
 
-- You're all set up!
+7. You're all set!
 
 # 🦮 Guides
 
-Not all the buttons are actionable, many of them are there just for show since this is a minimal demo. The video at the top of this README shows all the things you can currently do.
+<div style="overflow:hidden">
+  <img src="public/github/guide.png" width="150" style="float:left;margin-right:20px" />
+
+Not all the buttons are actionable, many of them are there just for show since this is a minimal demo. [This video]() shows all the things you can currently do.
 
 Where it's not obvious which buttons actually work I added a red box-shadow as guide:
 
-<p align="middle">
-  <img src="public/github/guide.png" width="300" />
-</p>
+</div>
 
 # 🛠 Tooling
 
-- The app has it's own component library and uses Storybook to showcase them. You can run Storybook using the command `npm run storybook`.
-
 <p align="middle">
-  <img src="public/github/storybook.png" width="600" />
+  <img src="public/github/storybook.png" width="400" />
+  <img src="public/github/redux-extension.png" width="400" />
 </p>
 
-- The Redux Devtools Extension is implemented in the app, it makes things like viewing the state, state flow and debugging much easier, you can install the browser extension [here](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en) or [here](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/).
-
-<p align="middle">
-  <img src="public/github/redux-extension.png" width="600" />
-</p>
+- The app has it's own component library and uses Storybook to showcase it. You can run Storybook using the command `npm run storybook`.
+- The Redux Devtools Extension is implemented in the app, it makes things like viewing the state, state flow and debugging much easier, to use it you need to install the browser extension [here](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en) or [here](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/).
 
 # 🧪 Testing
 
@@ -119,17 +130,25 @@ There are two types of tests in the app (end to end and unit).
 
 ## Unit tests:
 
+<div style="overflow:hidden">
+    <img src="public/github/unit-tests.png" width="150" style="float:left;margin-right:40px" />
+
 - All the shared components in the `common` directory have unit tests inside their respective folders. They end with a `*.test.tsx` extension.
-  - To run the unit test suite use the command `npm run test` then enter `a` to run all tests
-    - These tests are also automatically run on each commit, if there are any failures the commit will also fail
+- To run the unit test suite use the command `npm run test` then enter `a` to run all tests
+- These tests are also automatically run on each commit, if there are any failures the commit will also fail
+</div>
 
-<p align="middle">
-    <img src="public/github/unit-tests.png" width="400" />
-</p>
+# 📝 Misc Notes
+
+- In addition to running on the localhost domain the app is also available on your network at `https://192.168.0.185:3000` (useful for viewing on mobile)
+- If you want to make changes to the filter files, run the command `cd filters && gulp watchJS` to watch for changes
+- If you want to browse the production build run the commands `npm run build && npm run serve`, then navigate to `http://localhost:5000` locally or `http://192.168.0.185:5000` on the network
+- Webpack root dir is set to `src` which means we can use clean import paths like these `import Foo from common/Foo` vs messy relative paths like `import Foo from ../../common/Foo`
+- This is purely a front end demo project, the "api" is nothing but a bunch of hard coded json files located in `/public/api/*.json`. All data is dummy data!
 
 # ⚠️ Contributing
 
-**Please note I will not be accepting PR's on this project** since it is part of my personal portfolio. You're more than welcome to fork and maintain your own version if you like!
+Please note **I will not be accepting PR's on this project** since it is part of my personal portfolio. You're more than welcome to fork and maintain your own version if you like!
 
 # ⚖️ License
 

TODO.txt

@@ -7,4 +7,12 @@ Last:
 
 git ignoew .env file
 
-test windows
+test windows
+
+mention dummy api?
+
+get rid of actual address from screenshots
+
+how to not push .env file to github pages but still work?
+
+styled with scss