DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

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

MINI 4 in 1 REACT ELECTRON APP FOR DESKTOP

4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React

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)

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

Calculator View

4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React

Todo List View

4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React

Clock App View

4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React

Weather App View

4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React

Weather Search View

4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React

About View

4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React

Pre Requirements For Local Development

Installation

Clone the project

  git clone https://github.com/shehari007/mini-react-electron-desktop-app.git
Enter fullscreen mode Exit fullscreen mode

Go to the project directory

cd mini-react-electron-desktop-app
Enter fullscreen mode Exit fullscreen mode

Install dependencies

npm install
Enter fullscreen mode Exit fullscreen mode

Start the Electron Project in Windows

npm run electron:start
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

For Linux

npm run electron:package:linux
Enter fullscreen mode Exit fullscreen mode

For MacOS

npm run electron:package:mac
Enter fullscreen mode Exit fullscreen mode

For Website

npm run build
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Demo Website Link

Web Preview HereThis 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

GitHub

View Github

Top comments (0)