+ 
+ 
+ 
ss
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+ ss
+
+
+
+
+
+
+
+
+
-### Prerequisites
+React
+ components directory houses all shared componentsStorybookRedux
+ Redux Toolkit - the official recommended
+ approach to using Redux which drastically cuts the need to write
+ boilerplate code
+ store.ts file for each feature contains all actions and
+ reducers (the creators are auto generated by RTK)
+ ImmerJS which allows state to
+ be safely mutated removing the need for messy object copying via spread
+ operators
+ useDispatch and useSelector hooks
+ provided by react-redux for accessing state values and
+ dispatching actions over the more verbose connect method
+ thunk for async operationsRedux Devtools Extension for ease of development
+ SASS
+ Typescript
+ Jest and EnzymeCypress
+ data attributes instead of classes or ids as
+ these can change often causing tests to break
+ EslintPrettier (ran as a pre-commit git
+ hook) before it gets pushed to the repo
+ Run these commands in the terminal:
-``` -git clone https://github.com/thejungwon/docker-reactjs.git -cd docker-reactjs -docker build -t docker-reactjs . -docker run -p 80:80 docker-reactjs +$ git clone git@github.com:TowhidKashem/snapchat-clone.git
+ $ cd snapchat-clone$ npm install
+ gulp to concatenate, minify and transpile the files
+ located in public/filters/source/*.js into a single
+ file called filters.min.js
+ .env file enter your new API key, for example:
+ REACT_APP_MAP_BOX_API_KEY=REPLACE_WITH_API_KEY
+ REACT_APP_MAP_BOX_API_KEY=xy.abc123$ npm start
+ https://localhost:3000/
+ https certificate. The
+ getUserMedia API used by the camera requires
+ the https protocol so we run the dev server in
+ https mode.
+ | + Step 1 + | ++ Step 2 + | ++ Step 3 + | +
|---|---|---|
+ 
+ |
+
+ 
+ |
+
+ 
+ |
+
+ 🦮 Guides+ |
+ |
|---|---|
+ 
+ |
+ + 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 red box-shadows as guides. + | +
+ 🛠 Tooling+ |
+ |
|---|---|
+ 
+
+ Storybook is used to showcase the app's custom
+ component library. You can run Storybook using the command
+ |
+
+ 
+ + Redux Devtools Extension is implemented in the app, + it makes things like viewing the state tree, state flow and debugging + much easier, to use it you need to install the browser extension + here + or + here + + |
+
| + End-to-End Tests + | +|
|---|---|
+
+ 
+
+ 👆Click to see all tests run + |
+
+
|
+
| + Unit Tests + | +|
|---|---|
+ 
+ |
+
+
|
+
public/filters/src/*.js, run the command
+ npm run gulp watchJS so that your changes get picked up
+ baseUrl is set to the src directory
+ in tsconfig so you can use clean import paths like
+ import Foo from 'components/Foo'; instead of messy ones like
+ import Foo from '../../components/Foo';. You can also use these in
+ the SASS files, e.g. @import '~styles/foo';
+ /public/api/*.json
+ + Please note I won't be accepting PR's on this project since it's part of my + personal portfolio. You're more than welcome to fork and maintain your own + version if you like! +
++ The Snapchat name, artwork, trademark are all property of Snap Inc. This + project is provided for educational purposes only. It is not affiliated with + and has not been approved by Snap Inc. +
diff --git a/cypress.json b/cypress.json new file mode 100644 index 00000000..3ec0489b --- /dev/null +++ b/cypress.json @@ -0,0 +1,5 @@ +{ + "viewportWidth": 414, + "viewportHeight": 736, + "waitForAnimations": true +} diff --git a/cypress/fixtures/message.json b/cypress/fixtures/message.json new file mode 100644 index 00000000..16a13e90 --- /dev/null +++ b/cypress/fixtures/message.json @@ -0,0 +1,4 @@ +{ + "author": "Lisa", + "message": "Soooo, how was it!?" +} diff --git a/cypress/integration/archive.spec.ts b/cypress/integration/archive.spec.ts new file mode 100644 index 00000000..55fef476 --- /dev/null +++ b/cypress/integration/archive.spec.ts @@ -0,0 +1,63 @@ +///
+
+