Skip to content

aseem2625/simple-dropbox-clone

Repository files navigation

Simple Dropbox clone

Description

A simple yet beautiful project to build a single page application showing basic features of dropbox. [Work in progress]

##Contains:

  • Ducks architecture (https://github.com/erikras/ducks-modular-redux). Simple pattern to write redux apps.
  • ES6 - 7 Support with Babel
  • React Routing
  • Hot module reloading
  • webpack
  • Sass support, just import your styles wherever you need them
  • eslint to keep your js readable

Run the app (Development)

  1. npm install. (yarn install also works fine)
  2. npm start

Build the app (Deployment)

npm run build

This will build the app into the "dist" directory in the root of the project. It contains the index.html along with the minified assets, ready for production.

Base Cloned from:

https://github.com/jpsierens/webpack-react-redux.git

Basic feature added till now:

  1. Open localhost:3000, you'll see landing page

Landing page

  1. Select a folder by clicking anywhere on the row (except name of file, just like dropbox)

Select folder for rename

  1. For single selection, * button appears to rename file. Type some name

Click the * button for rename

  1. Now you can see that folder is renamed. Now, you can "click on folder name" to go inside that folder

Folder with newly given name

  1. Select multiple folder by clicking anywhere on the row (except name of file, just like dropbox)

Select multiple folders

  1. Click on delete button to delete all the selected folders

Delete multiple folders

  1. Click on + button to add new folder in the given directory. Give some name

Add new folder

  1. New folder now appears in the given directory. You can navigate and add further folders inside it.

New folder added

TODO:

  1. Auto rename common item name to (1) (2), etc..

  2. Resolve path bug in response when Renaming of existing items

  3. Add navigation in create bread crumbs

  4. Heavy testing addition of folder -> url should match and browser history should match.

  5. Add pop ups based on user actions

  6. Url appending when clicked on folder be based on path provided from backend

  7. Send id along with name when get details->checking for mismatch

  8. Remove trailing / form url if user manually puts it

  9. Currently support is being added for folder creation. Although, file uploading(only name wise) is on the way.

  10. Add middleware to make promise call to apis and attach to store actions

  11. On demand module loading

  12. Code splitting

  13. Add offline functionality / Service worker[pretty good example since it also has an app shell]

About

A simple Client side dropbox clone.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published