Build an expense organizer with ES6 and Dropbox

Build an expense organizer with ES6 and Dropbox

    // http://dropbox.github.io/dropbox-sdk-js/Dropbox.html
    
    import { Dropbox } from 'dropbox';
    
    const dbx = new Dropbox({
      accessToken: 'aeOL1E1HS0AAAAAAAAAALX6z1ogWy75HGE_HBN-NNpJNfhnEa1kjF1vsJ_t7Wf8k',
      fetch
    })
    
    const fileListElem = document.querySelector('.js-file-list')
    const loadingElem = document.querySelector('.js-loading')
    const rootPathForm = document.querySelector('.js-root-path__form')
    const rootPathInput = document.querySelector('.js-root-path__input')
    const organizeBtn = document.querySelector('.js-organize-btn')
Christian Jensen2:025 months ago
    
Christian Jensen4:496 months ago
    import { Dropbox } from 'dropbox'
    
    const dbx = new Dropbox({
      accessToken: ,
      fetch
    })
    import { Dropbox } from 'dropbox';
    
    const dbx = new Dropbox({
      accessToken: 'aeOL1E1HS0AAAAAAAAAALX6z1ogWy75HGE_HBN-NNpJNfhnEa1kjF1vsJ_t7Wf8k',
      fetch
    })
    
    // http://dropbox.github.io/dropbox-sdk-js/Dropbox.html
    
    dbx.filesListFolder({
      path: ''
    }).then(res => console.log(res))
    import { Dropbox } from 'dropbox';
    
    const dbx = new Dropbox({
      accessToken: 'aeOL1E1HS0AAAAAAAAAALX6z1ogWy75HGE_HBN-NNpJNfhnEa1kjF1vsJ_t7Wf8k',
      fetch
    })
    
    const fileListElem = document.querySelector('.js-file-list')
    
    const state = {
      files: []
    }
    
    const init = () => {
    import { Dropbox } from 'dropbox';
    
    const dbx = new Dropbox({
      accessToken: 'aeOL1E1HS0AAAAAAAAAALX6z1ogWy75HGE_HBN-NNpJNfhnEa1kjF1vsJ_t7Wf8k',
      fetch
    })
    
    const fileListElem = document.querySelector('.js-file-list')
    
    const state = {
      files: []
    }
    
    const init = () => {
    // http://dropbox.github.io/dropbox-sdk-js/Dropbox.html
    
    import { Dropbox } from 'dropbox';
    
    const dbx = new Dropbox({
      accessToken: 'aeOL1E1HS0AAAAAAAAAALX6z1ogWy75HGE_HBN-NNpJNfhnEa1kjF1vsJ_t7Wf8k',
      fetch
    })
    
    const fileListElem = document.querySelector('.js-file-list')
    
    const state = {
      files: []
    }
    // http://dropbox.github.io/dropbox-sdk-js/Dropbox.html
    
    import { Dropbox } from 'dropbox';
    
    const dbx = new Dropbox({
      accessToken: 'aeOL1E1HS0AAAAAAAAAALX6z1ogWy75HGE_HBN-NNpJNfhnEa1kjF1vsJ_t7Wf8k',
      fetch
    })
    
    const fileListElem = document.querySelector('.js-file-list')
    
    const state = {
      files: []
    }
    // http://dropbox.github.io/dropbox-sdk-js/Dropbox.html
    
    // API explorer: https://dropbox.github.io/dropbox-api-v2-explorer/
    
    import { Dropbox } from 'dropbox';
    
    const dbx = new Dropbox({
      accessToken: 'aeOL1E1HS0AAAAAAAAAALX6z1ogWy75HGE_HBN-NNpJNfhnEa1kjF1vsJ_t7Wf8k',
      fetch
    })
    
    const fileListElem = document.querySelector('.js-file-list')
    
    const state = {
    // http://dropbox.github.io/dropbox-sdk-js/Dropbox.html
    
    import { Dropbox } from 'dropbox';
    
    const dbx = new Dropbox({
      accessToken: 'aeOL1E1HS0AAAAAAAAAALX6z1ogWy75HGE_HBN-NNpJNfhnEa1kjF1vsJ_t7Wf8k',
      fetch
    })
    
    const fileListElem = document.querySelector('.js-file-list')
    const loadingElem = document.querySelector('.js-loading')
    
    const state = {
      files: []
    // http://dropbox.github.io/dropbox-sdk-js/Dropbox.html
    
    import { Dropbox } from 'dropbox';
    
    const dbx = new Dropbox({
      accessToken: 'aeOL1E1HS0AAAAAAAAAALX6z1ogWy75HGE_HBN-NNpJNfhnEa1kjF1vsJ_t7Wf8k',
      fetch
    })
    
    const fileListElem = document.querySelector('.js-file-list')
    const loadingElem = document.querySelector('.js-loading')
    const rootPathForm = document.querySelector('.js-root-path__form')
    const rootPathInput = document.querySelector('.js-root-path__input')
    
    // http://dropbox.github.io/dropbox-sdk-js/Dropbox.html
    
    import { Dropbox } from 'dropbox';
    
    const dbx = new Dropbox({
      accessToken: 'aeOL1E1HS0AAAAAAAAAALX6z1ogWy75HGE_HBN-NNpJNfhnEa1kjF1vsJ_t7Wf8k',
      fetch
    })
    
    const fileListElem = document.querySelector('.js-file-list')
    const loadingElem = document.querySelector('.js-loading')
    const rootPathForm = document.querySelector('.js-root-path__form')
    const rootPathInput = document.querySelector('.js-root-path__input')
    const organizeBtn = document.querySelector('.js-organize-btn')
    // http://dropbox.github.io/dropbox-sdk-js/Dropbox.html
    
    import { Dropbox } from 'dropbox';
    
    const dbx = new Dropbox({
      accessToken: 'aeOL1E1HS0AAAAAAAAAALX6z1ogWy75HGE_HBN-NNpJNfhnEa1kjF1vsJ_t7Wf8k',
      fetch
    })
    
    const fileListElem = document.querySelector('.js-file-list')
    const loadingElem = document.querySelector('.js-loading')
    const rootPathForm = document.querySelector('.js-root-path__form')
    const rootPathInput = document.querySelector('.js-root-path__input')
    const organizeBtn = document.querySelector('.js-organize-btn')
    // http://dropbox.github.io/dropbox-sdk-js/Dropbox.html
    
    import { Dropbox } from 'dropbox';
    
    const dbx = new Dropbox({
      accessToken: 'aeOL1E1HS0AAAAAAAAAALX6z1ogWy75HGE_HBN-NNpJNfhnEa1kjF1vsJ_t7Wf8k',
      fetch
    })
    
    const fileListElem = document.querySelector('.js-file-list')
    const loadingElem = document.querySelector('.js-loading')
    const rootPathForm = document.querySelector('.js-root-path__form')
    const rootPathInput = document.querySelector('.js-root-path__input')
    const organizeBtn = document.querySelector('.js-organize-btn')

Dropbox is a content and collaboration platform trusted by more than 500 million users and 300,000 teams. It also has an API which allows you to add Dropbox features to your apps, such as file storage, sharing, previews, and search.

One example of such an app is an expense organizer, which can help businessess prevent their receipts from turning into chaos. Each employee simply add their receipts to a Dropbox folder, and then the app takes care of organizing them.

In this course, you'll build this organizer app while learning the fundamentals of working with the Dropbox APIs. I'll It'll all be done in plain JavaScript, so no frameworks or libraries required. Along the way you'll also learn several ES6 concepts, like array methods and async/await functions.

About the instructor:

Christian Jensen is a web developer based in Utah. This is his first full-length course, though he's the previously created several popular tutorials on React Hooks on Scrimba, so we're happy to finally have him create a full course.

This course has been sponsored and paid for by Dropbox. To learn more about the Dropbox API, head to www.dropbox.com/developers