React Native Nw React Calculator

Abstract

1. Introduction

Mobile, desktop and website Apps with the same code

2. Objective

Mobile, desktop and website Apps with the same code

This project demonstrates how JavaScript, React, React Native can be applied to a real-world Mobile App Development problem.

4. Technology Stack

• es6 syntax and babel
• react for the Website App and Desktop App,
• react-native for the iOS & Android Apps
• NW to package the Desktop App
• Electron to package the Desktop App
• flux to organize the data flow management
• css-loader to integrate the styles in the builds
• grunt to create the builds

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• Node.js (LTS) and npm
• A modern web browser
• VS Code or any code editor
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/benoitvallon/react-native-nw-react-calculator.git
cd react-native-nw-react-calculator

1. npm run build to build the project (at least the first time)
2. npm run serve-web to preview in the browser at http://localhost:8000/index.web.html or http://localhost:8000/webpack-dev-server/index.web.html with webpack-dev-server and hot reload enabled
3. npm run build to build the project (at least the first time)
4. npm run serve-nw to launch the desktop app and enable livereload
5. npm run build to build the project (at least the first time)
6. npm run serve-electron to launch the desktop app and enable livereload

npm test

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Add push notifications with Firebase Cloud Messaging
• Add offline support with local caching
• Publish an internal test build on the Play Store

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Which framework is used and why (native vs cross-platform)?
2. How is app state managed across screens?
3. Where is the data stored — locally, Firebase or a REST backend?
4. How are permissions (camera, location, storage) handled?
5. How would you publish this app to the Play Store / App Store?

9. Source Code & License

This project is developed by benoitvallon and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.