👻 SnapChat Clone

⚡️Breakdown

👆Click to see all implemented features

[LIVE DEMO] Built with React Functional components using hooks Feature based modular folder structure common directory for shared components Relatively few prod dependencies Global state management via Redux Follows the modular ducks 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 naming conventions Uses thunk middleware for async operations Styled with SASS Type checked with Typescript Unit tested with Jest and Enzyme End-to-end tested with Cypress Selectors use data attributes to avoid writing brittle tests Integration suite covers all essential feature happy paths 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 [LIVE DEMO]

💿 Installation

Run these commands in the terminal:

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

6. 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 a red box-shadow as guide.

🛠 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 the entire test suite being run

All e2e tests are located in cypress/integration/*.spec.ts To run these first make sure the dev server is running via `npm start`, then use the command npm run e2e This will spawn the Cypress electron app Click "Run all specs" at the top right, Cypress will spawn a Chrome instance and you will see all the tests as they're being run: Alternatively you can also 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 being run should you need them.

Unit Tests
	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 These tests are also automatically run on each commit, if there are any failures the commit will also fail

📝 Misc Notes

• In addition to running on the localhost domain the app is also available on the network (useful for viewing on mobile), the actual address is revealed in the terminal after running npm start
• If you want to make changes to the filter files, run the command cd filters && npm run gulp watchJS to watch for changes
• If you want to browse the production build run the command npm run build && npm run serve, then navigate to the local or network addresses revealed in the terminal
• The baseUrl is set to the src directory in tsconfig which means you can use clean import paths like import Foo from 'common/Foo' instead of messy relative paths like import Foo from '../../common/Foo'
• The project was bootsraped using Create React App in case you were wondering where webpack configs and such are. You can always eject if you need access to those things
• 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!

⚖️ License

MIT