A SnapChat clone built with React, Redux and Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier
[Live App] • [Video Demo]
- Only functional components using hooks
- 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
commondirectory houses all shared components
- Custom component library showcased in
- Relatively few prod dependencies
Global state management via
Redux Toolkit- the official recommended approach to using Redux which drastically cuts the need to write boilerplate code
store.tsfile 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
ImmerJSwhich allows state to be safely mutated removing the need for messy object copying via spread operators
useSelectorhooks provided by
react-reduxfor accessing state values and dispatching actions over the more verbose
thunkfor async operations
Integrates the powerful
Redux Devtools Extensionfor ease of development
- 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
- To let the compiler catch bugs at build time instead of letting users catch them at runtime!
- Unit tested with
End-to-end tested with
dataattributes instead of classes or ids as these can change often causing tests to break
- Integration suite covers all essential feature happy paths
- Selectors use
- Linted using
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
Run these commands in the terminal:
$ git clone [email protected]:TowhidKashem/snapchat-clone.git
$ cd snapchat-clone
$ npm install
- 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
gulpto concatenate, minify and transpile the files located in
public/filters/source/*.jsinto a single file called
- This will:
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
.env.samplefile at the root of the project to just
Inside enter your new API key, for example:
$ npm start
The app should open automatically in your browser usually at
In Chrome you will receive a "Your connection is not private"
Click "Advanced" > "Proceed to localhost (unsafe)"
You'll get this warning because the app uses a self signed
getUserMediaAPI used by the camera requires the
httpsprotocol so we run the dev server in https mode.
- You'll get this warning because the app uses a self signed
- Click "Advanced" > "Proceed to localhost (unsafe)"
- After this you will be prompted to give access to your webcam, click "Allow"
- In Chrome you will receive a "Your connection is not private" warning
Step 1 Step 2 Step 3
- The app should open automatically in your browser usually at
- You're all set! ?
|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.|
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
? Misc Notes
If you want to make changes to the filter files located in
public/filters/src/*.js, run the command
npm run gulp watchJSso that your changes get picked up
baseUrlis set to the
srcdirectory in tsconfig so you can use clean import paths like
import Foo from 'common/Foo';instead of messy ones like
import Foo from '../../common/Foo';. You can also use these in the SASS files, e.g.
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
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.