Amaze Cart

Topics Covered

Implementing React Concepts

• React Hooks
• React Context (Store)
• Custom Hooks

Implementing react native concepts

• StyleSheet
• WebView
• React Native Components
• React Native API
• React Native Hooks
• Accessibility
• Splash Screen
• Bottom Sheet
• App Icon
• Android Native Module
• iOS Native Modules
• Animation

Storage

• Async Storage
• react-native-keychain
  • Keychain Storage for iOS
  • Keystore Storage for Android

Flavours & Schemas

• Different Flavours for android Apps.
• Different Schemas for iOS Apps

Adding React Native Vector Icons

• Used React Native Vector Icon Package to render icons.

Adding navigation

• Stack Navigation
  • Authentication & Application have separate stacks
• Drawer Navigation
• Bottom Tab Navigation
• Nested Navigation

Authentication

• Password Authentication
  • dummyjson server
• OAuth Authentication
  • Google Signin
    • google-signin package
  • Github Signin
    • Registered the application in the developer console.
    • OAuth flow using webview.

Testing

• unit testing using React-Native-Testing-Library

Assets (Images & Fonts)

• Linked using npx react-native-asset

To Link The Images Fonts Use THe Below Command

npx react-native-asset

Usages

Start the Bundler

To Start The Metro Bundler

npm start

or

yarn start

Build & Run

To Build and Run the Application on the Simulator

• android

  npm run android:dev (devDebug Variant) | npm run android:demo (demoDebug Variant)

  or

  yarn run android:dev (devDebug Variant) | yarn run android:demo (demoDebug Variant)

• ios

  npm run ios:dev (devDebug Variant) | npm run ios:demo (demoDebug Variant)

  or

  yarn run ios:dev (devDebug Variant) | npm run ios:demo (demoDebug Variant)

Test Runner

To Run The Test Suite

npm test -- --watch

or

yarn test --watchAll

Test Coverage

To Run The Test Suite

npm test --coverage

or

yarn test --watchAll --coverage

Clear Cache

To Clear Cache and Run

npm start --reset-cache

or

yarn start --reset-cache

Screens Preview

Login Page

Google SignIn

GitHub SignIn

Login through Browser

Signup Page

Product Dashboard

Filtered Products

Favorite Products

Product Details in Bottom Sheet in Favorites

Product Details Page

Adding the Product to the Cart

Cart

Empty Cart

Donation Screen Using Native Modules

Note :

• used fakestore Api's to fetch the product related Details

Design Inspired from :

• Dribble Ecommerce Style
• Dribble Login Style