Skip to content

Widget App is a very simple practice app of React Hooks systems. The app will contain four widgets, namely a Search, Accordion, Dropdown, and a Translate widget. The widgets will be accessible from the nav bar. This is a application practice of ReactJS hooks system and functional programming.

Notifications You must be signed in to change notification settings

yunusparvezkhan/widget-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

widget-app

Widget App is a very simple practice app of React Hooks systems. Simply there will be some questions and whenever those are clicked, the answers will expand below. Whenever another question is clicked, previous answer will shrink and that answer will expand below. This is a application practice of ReactJS hooks system and functional programming.


Standard Commit Notations

On Version Release

Version [Version number] Release

On Patch/fix/changes (minor/major)

Patch [Version index].[patch index]

Development Phase commits

v[version number that is currently being developed] Delta [index of major changes, ie. Component additions].[index of small changes following the major change].

Example => v4 Delta 1.8

This Commit title represents that Version 4 is in Development right now, and in the development process so far, one major change have been commited and follwing that change 8 small changes have been commited.

Following any update, if any very minor change is commited, such as spelling mistakes or something mistekenly forgotten, then that commit might have a index following a . (dot) after the version number.

Example => v4 Delta 2.1.1

This commit suggests that some very small change is commited following the v4 Delta 2.1 commit.

On Devnotes update

v[version under development] echo mic [index of devnotes update]

Example => v4 echo mic 1

This Commit title repressents that while Version 4 of the app is in Development phase, devnotes is updated for some announcement/notification and the index of such announcement/notification is 1.

On Readme.md update

Readme update v[version currently under development] n[index of readme update] => Used Currently

Previously this type of commits are done as

README update v[version currently under development] #[index of readme update]

Note:- The first Notation is used currently

then as the extended description

some description



Install in your Development Setup

To install the widget-app in your local development setup, please follow the next steps. Skip the installations, which are already installed in your machine.

On Linux/Mac

  1. First you should have git installed in your linux machine. If you do have git installed, proceed to next steps. If you do not have git installed, type the command below on your linux terminal, and if you are unsure then also do the same.
      sudo apt update
      sudo apt install git
    
  2. Now so that you have git installed in your machine, you need to install nodejs and npm in your machine. If you have it installed you are welcome to move forward
      sudo apt install nodejs
      sudo apt install npm
    
  3. Now, as you have prerequisits installed, you can move forward and clone this app. To do so, change to your desired directory and type the below command on your linux/mac terminal and enter
      git clone https://github.com/yunusparvezkhan/widget-app.git
    
  4. Now you have the repository in your machine. Change directory to the repo by
      cd widget-app
    
  5. Now, you need the dependencies of this app to be installed in order to get it running. To do so, enter the following command,
      npm install
    
  6. After all the installations are done, enter the following command to start the npm server
      npm start
    
  7. After the last command a new browser tab should automatically open. If not opened, then go to your browser and type the following address on the url bar
      localhost:3000
      
      
      Or,
      
      
      127.0.0.1:3000
    
  8. If you do not see an app coming on the screen, then check your terminal for which port the app is running. Put that port number instead of 3000 in the previous process. If you still do not have the app running check all the above steps and troubleshoot

On Windows

  1. Firstly you need to install Chocolaty package maneger in your windows machine to continue to the following steps.
  2. First you should have git installed in your Windows machine. If you do have git installed, proceed to next steps. If you do not have git installed, type the command below on your Windows PowerShell/CMD, and if you are unsure then also do the same.
      choco install git
    
  3. Now so that you have git installed in your machine, you need to install nodejs and npm in your machine. If you have it installed you are welcome to move forward
      choco install nodejs
      choco install npm
    
  4. Now, as you have prerequisits installed, you can move forward and clone this app. To do so, change to your desired directory and type the below command on your Windows PowerShell/CMD and enter
      git clone https://github.com/yunusparvezkhan/widget-app.git
    
  5. Now you have the repository in your machine. Change directory to the repo by
      cd widget-app
    
  6. Now, you need the dependencies of this app to be installed in order to get it running. To do so, enter the following command,
      npm install
    
  7. After all the installations are done, enter the following command to start the npm server
      npm start
    
  8. After the last command a new browser tab should automatically open. If not opened, then go to your browser and type the following address on the url bar
      localhost:3000
      
      Or,
      
      127.0.0.1:3000
    
  9. If you do not see an app coming on the screen, then check your terminal for which port the app is running. Put that port number instead of 3000 in the previous process. If you still do not have the app running check all the above steps and troubleshoot



About

Widget App is a very simple practice app of React Hooks systems. The app will contain four widgets, namely a Search, Accordion, Dropdown, and a Translate widget. The widgets will be accessible from the nav bar. This is a application practice of ReactJS hooks system and functional programming.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published