Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/towhidkashem/snapchat-clone

👻 A Snapchat clone built with React and Redux. Written in Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier!
https://github.com/towhidkashem/snapchat-clone

augementedreality camera clone cypress face-filters front-end front-end-development frontend javascript jest react react-demo-app react-demo-project redux sass side-project snapchat storybook threejs typescript

Last synced: about 3 hours ago
JSON representation

👻 A Snapchat clone built with React and Redux. Written in Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier!

Host: GitHub
URL: https://github.com/towhidkashem/snapchat-clone
Owner: TowhidKashem
License: mit
Created: 2020-04-28T00:19:35.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2022-10-29T15:45:38.000Z (almost 2 years ago)
Last Synced: 2024-09-24T06:03:12.805Z (about 12 hours ago)
Topics: augementedreality, camera, clone, cypress, face-filters, front-end, front-end-development, frontend, javascript, jest, react, react-demo-app, react-demo-project, redux, sass, side-project, snapchat, storybook, threejs, typescript
Language: TypeScript
Homepage: https://towhidkashem.github.io/snapchat-clone/
Size: 472 MB
Stars: 1,082
Watchers: 25
Forks: 237
Open Issues: 2
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

👻 Snapchat Clone

[LIVE APP]

Preview

[Live App]
•
[Video Demo]

⚡️Breakdown

Built with React
- Only functional components using hooks
- Folder structure:
  - Flat - no greater than one level deep
  - Modular - each folder contains all the relevant files needed to make
    up a particular feature (components, styles, tests, actions, etc).
    Having everything close at hand reduces cognitive load and deleting
    a folder removes the feature entirely from the code base without
    having to worry about left over code
  - Organized semantically by Feature (not by the traditional
    "components/containers" model), this way of reasoning is more human
    friendly
  - components directory houses all shared components
- Custom component library showcased in Storybook
- Relatively few prod dependencies

Global state management via Redux
- Uses Redux Toolkit - the official recommended
  approach to using Redux which drastically cuts the need to write
  boilerplate code
- A single store.ts file for each feature contains all actions and
  reducers (the creators are auto generated by RTK)
- Flat state tree avoids deeply nested properties
- RTK has built-in support for ImmerJS which allows state to
  be safely mutated removing the need for messy object copying via spread
  operators
- Uses the useDispatch and useSelector hooks
  provided by react-redux for accessing state values and
  dispatching actions over the more verbose connect method
- Uses thunk for async operations
- Integrates the powerful
  Redux Devtools Extension for ease of development

Styled with SASS
- Each view's set of rules are scoped to a single parent element via
  nesting to avoid style clashes
- Use of variables, extendables and mixins to keep things DRY and uniform

Written in Typescript
- To let the compiler catch bugs at build time instead of letting users
  catch them at runtime!

Unit tested with Jest and Enzyme

End-to-end tested with Cypress
- Selectors use data attributes instead of classes or ids as
  these can change often causing tests to break
- Integration suite covers all essential feature happy paths

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

💿 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
    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

This part is optional but strongly recommended, 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
- In the .env file 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

$ npm start
- The app should open automatically in your browser usually at
  https://localhost:3000/
  - In Chrome you will receive a "Your connection is not private"
    warning
    - 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.
  - After this you will be prompted to give access to your webcam, click
    "Allow"
Step 1

Step 2

Step 3

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. 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
npm run storybook

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

🧪 Testing

End-to-End Tests

👆Click to see all tests run

All e2e tests are located in
cypress/integration/*.spec.ts
- To run these first make sure the dev server is up and running
  via npm start, then use the command
  npm run e2e
- This will open the Cypress electron app. Click "Run all specs"
  at the top right, you'll then get a Chrome instance and see all
  the tests being run

Alternatively you can run the test suite in the terminal using the
command npm run e2e-headless. This command still
generates videos in cypress/videos/*.mp4 of the tests
should you need them

Unit Tests

All the shared components in the components 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

These tests are also automatically run on each commit, if there are
any failures the commit will also fail

📝 Misc Notes

If you want to make changes to the filter files located in
public/filters/src/*.js, run the command
npm run gulp watchJS so that your changes get picked up

The project's 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';

This is a purely front end demo, the "API" is nothing but a bunch of json
files with hard coded dummy data, they're located in
/public/api/*.json

⚠️ Contributing

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!

⚖️ License

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.