UI Frontend : React JS

Jump to bottom

Umangmsharma edited this page Feb 8, 2022 · 4 revisions

Framework used:

React JS

Language used :

JavaScript

Requirements:

node version used : v14.x This can be checked with node -v command

Setup :

Any editor like VScode
import project/client
Open a new terminal
Run "npm install"
Run "npm start"
Application will run on PORT 3000 (http://localhost:3000/)

Functionalities:

Login/Register Page

First page is a login page.
User will login with username and password if the user is existing.
Forget password is provided as well.
If the user is not registered, the user can click register and provide it's credentials.

After signing in

the user will reach the plot page
On the top of the page, user's full name and logout option will be shown.

Check weather

To check the weather of any state, the user needs to click on the state in the map.
On clicking the state, the chosen state along with the time and date modules would be visible.
User needs to select the year, month and day
User also needs to select the mode which shall be either photo or video.
The video shall take longer time to show the data.
If user selects the video mode, further time range needs to be selected from the drop down else the user will choose a particular time in hours and minutes.
After filling in these details, user has to click the "get plot" button.
A loader will display while the data is being fetched.
A popup shall appear which will display the fetched data in the form of the plot.