This project was bootstrapped with Create React App.
To get started perform the following steps on a windows 7/8/10 pc
- Install node.js from https://nodejs.org/en/download/
- Install Git from https://git-scm.com/download/win and start Git bash.
- Create a directory ($mkdir C:\projects ) & enter it ($cd C:\projects)
- Clone this repository with command ($git clone https://github.com/manishgrd/notify_webapp.git)
- After cloning completes, enter directory.($cd C:\projects\notify_webapp )
- On gitbash run the command $npm install This will install all the required dependencies for the project. It should complete without error and a few warnings ( you can ignore it).
- Run $npm start . This will launch the project in your default web-browser with address localhost:3000 or 127.0.0.1:3000
- There it is, the Notify app is running locally.
- The backend is hosted at hasura.io along with Google firebase integration.
https://ui.astigmatic44.hasura-app.io
-
Login & Signup with the appropriate credentials. On first login the user is asked for permission to show notifications & the status is displayed below.
-
On login the user is taken to the homepage from where they can see the latest notifications appearing just below the top navigation bar.
-
The Navigation bar at the topmost has Buttons to switch back from anypage to homepage and logout the user. Also the user is greeted along with a display of their profile pic.
-
Four buttons are present on the action bar for the following functions: (a)Compose New: Opens a dialog box to select the user and enter the notification message and press Push button to notify the user. (b)View Online: Opens up a drawer on the right listing the online users to notify them directly. Clicking on any user open the compose box with that user preselected (c)All Notifications: opens a separate page listing all the notifications users sent / received in a tabular format that is scrollable. (d)User Profile: To edit the already created user information & upload a profile image
-
Tabular view to see at a glance some of the recent notifications which can be selected for following actions in Bottom navigation bar.
-
To View the full Notification details in a pop up dialog, the user has to click on any particular row in the table.
-
The pop up also provides the Close & Delete Button performing the respective options on the opened Notification message
-
A snackbar that momentarily pops below when a new notification arrives or successfully get delivered, to grab users attention.
-
When the Notify app has active tab & browser focus , notification appears in the Notification area inside the app above the actions bar.
-
When browser is closed or app is not in focus i.e. some other tab in the browser is active Notifications appear on right side of the screen.
-
Clicking the logout button logs out the user & redirects to login page for re-authentication.
-
This Notify app is compatible with the mobile browsers also, that support notifications.