Skip to content

Latest commit

 

History

History
94 lines (64 loc) · 2.74 KB

README.md

File metadata and controls

94 lines (64 loc) · 2.74 KB
Raw

Quick start

  1. Clone repo using git clone https://github.com/naxa-developers/<Your Project>
  2. Run npm i in order to install dependencies.
  3. Now you can run npm start to see the example app at http://localhost:8080
  4. Copy .env.sample and paste in the root directory and rename it to .env.

Features/Library You need to know

  • React
  • Openlayers
  • Connected React Router
  • Redux
  • Redux Persist
  • Redux Sauce
  • Redux Saga
  • Immer
  • Date-fns
  • React-slick
  • Typescript
  • Eslint
  • Prettier

Custom Component

  - Table Component (Used for Working on Table Easily,Dynamically).

Custom Hooks

  - usePagination (Used for Working on Pagination Easily without Writing all the Logic
                  repetitively).

Useful Util Functions

- sortByKey - (Used for sorting any array of object with a key given to it and
              the key can be made dynamic as well).
              
- isEmpty(obj) - Check if an object or an array is empty.
  
- toCamelCase(word) - Convert string to camel case
  
- snakeCaseToCamel(str) - Convert snakecase string to camelcase
  
- convertToBase64(file) - An async function to convert file object to base64 format
  
- getFileExtension(filename) - A function to get extension from filename.
  
-	getFormData(payload) - get form data for all fields of the object.
  
- getImageSource(object) - <img> tag src attribute can take file/blob or string as source
  
- jsonDiff(masterData, data) - PATCH requests do not need all the data but only changed data 
this util diffs and gives only changed data

- hasKey(obj, key) - Check if an object has a specific key.

- keepObjectKeys(data, keyArr) - A function to keep only the given keys of an object

- removeObjectKeys(data, keyArr) - A function to remove specific keys of an object

- sortByKey(array, key, type) - sort an array of object with key as ascending descending.

Folder Structure

  -- src/
    -- actions/             -->  for redux actions
    -- assets/              -->  for static assets and styles
    -- components/          -->  for components
        -- common/          -->  for shared components
    -- hooks/               -->  for custom hooks
    -- reducers/            -->  for redux reducers
    -- routes/              -->  for all routes
    -- sagas/               -->  for redux sagas
    -- selectors/           -->  for getting derived state from store
    -- services/            -->  for api requests
    -- utils/               -->  for utility / helper functions
    -- views/               -->  for page specific components / container components

[Help]

If you are having problem using any of those mentioned features (utils, hooks, components) feel free to tell anyone in the frontend channel.