4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React
Tags: calculator, electron, weather, clock
Published: 2023-12-06 09:14:38

---
title: 4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React
published: true
date: 2023-11-27 00:25:00 UTC
tags: Calculator,Electron,Weather,Clock
canonical_url: https://reactjsexample.com/4-in-1-calculator-todo-list-clock-weather-desktop-app-with-electron-and-react/
---

 ![4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React](https://github.com/shehari007/mini-react-electron-desktop-app/raw/main/public/logo.png?raw=true)

# MINI 4 in 1 REACT ELECTRON APP FOR DESKTOP
 ![4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React](https://reactjsexample.com/content/images/2023/11/Code_2023-11_14-18-55.jpg)

A clean & elegant design using Ant Design components, a sleek 4 in 1 mini react app based on electron framework. This app include Calculator, Todo List, Clock, Weather App in single distribution.

## Tech Stack

**CLIENT:** React, Hooks, Ant Design 5+, Electron, Node

**OPEN API:** Weather App Details from -> ([https://openweathermap.org/api](https://openweathermap.org/api))

## Features

- Clean Modern design language
- Calculator with keyboard input to perform operations
- Persistent Storage of Todo List so user can save progress on closing app.
- Countdown Timer Alert
- Simple Elegant StopWatch
- Weather App Settings are persistent and have option to save API-KEY and Default city to save Locally
- Can be build for Windows, Linux, MacOS and also deoplyable as a website.

## Screenshots
#See SS here.

#### Home Page View
 ![4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React](https://github.com/shehari007/mini-react-electron-desktop-app/raw/main/screenshots/miniapp%20(1).png?raw=true)
#### Calculator View
 ![4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React](https://github.com/shehari007/mini-react-electron-desktop-app/raw/main/screenshots/miniapp%20(2).png?raw=true)
#### Todo List View
 ![4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React](https://github.com/shehari007/mini-react-electron-desktop-app/raw/main/screenshots/miniapp%20(3).png?raw=true)
#### Clock App View
 ![4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React](https://github.com/shehari007/mini-react-electron-desktop-app/raw/main/screenshots/miniapp%20(4).png?raw=true)
#### Weather App View
 ![4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React](https://github.com/shehari007/mini-react-electron-desktop-app/raw/main/screenshots/miniapp%20(5).png?raw=true)
#### Weather Search View
 ![4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React](https://github.com/shehari007/mini-react-electron-desktop-app/raw/main/screenshots/miniapp%20(6).png?raw=true)
#### About View
 ![4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React](https://github.com/shehari007/mini-react-electron-desktop-app/raw/main/screenshots/miniapp%20(7).png?raw=true)

## Pre Requirements For Local Development

- React 18+
- Node, NPM
- Python with pip
- API-KEY from ([https://openweathermap.org/api](https://openweathermap.org/api)) for weather component to work
- VSCODE With ES6+ Module

## Installation

Clone the project

```
  git clone https://github.com/shehari007/mini-react-electron-desktop-app.git
```

Go to the project directory

```
cd mini-react-electron-desktop-app
```

Install dependencies

```
npm install
```

Start the Electron Project in Windows

```
npm run electron:start
```

Project will open in window mode not in browser as normal react app would, Happy Hacking!

## Deployment

Deployment is never been easy before, package.json is already configured for every platform (Window, Linux, MacOs, Web). Just need to run build commands for each platform as follows:

## For Windows

```
npm run electron:package:win
```

## For Linux

```
npm run electron:package:linux
```

## For MacOS

```
npm run electron:package:mac
```

## For Website

```
npm run build
```

Running these commands will give you a package file (Windows->NSIS .exe) || (Linux->.deb) || (macOS->.dmg) || for wesbite you will get the build folder where you can serve the wesbite using:

```
npm install -g serve
serve -s build
```

## Demo Website Link

[Web Preview Here](https://electron4in1-web-preview.vercel.app/)_This is just a preview of app, data will not save and lost if tab is closed or menu is changed!_

## Demo Windows Setup

Latest release is available for desktop users to test and use the electron application, check out the latest release section and download the application for Windows x64

## !!IMPORTANT NOTE!!

- For this specific app NODE core components enabled & contextIsolation are disabled which is not recommended due to security concerns. However there is no problem with this app as its not used for web browsing and also "CSP inline-scripts" policy is enabled so user can use it with confidence.

- If you enable the preload.js and disabled the node core components the persistent storage wont work.

## License

[MIT](https://choosealicense.com/licenses/mit/)

## GitHub

[View Github](https://github.com/shehari007/mini-react-electron-desktop-app)