https://github.com/tobistudio/snapchat-react

https://github.com/tobistudio/snapchat-react

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/tobistudio/snapchat-react
• Owner: tobistudio
• License: mit
• Created: 2023-02-08T06:45:05.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-02-08T07:44:50.000Z (almost 2 years ago)
• Last Synced: 2024-11-18T07:17:19.897Z (about 2 months ago)
• Language: TypeScript
• Size: 452 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
👻 Snapchat Clone




  

  

  

  

  

  

  

  

  

  

  

  





  [LIVE APP]







  [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.