Git Product home page Git Product logo

todo's Introduction

TODO Example

TODO example app using CSS Grid Layout. Based on my another project: React GridBox.

Entire code is in the '/src' directory. Boilerplate has only slightly changed. I do not use react-create-app because our great savior Dan still has not added decorators.

Project is based on a blueprint with which I had not previously dealt (last year I worked only on SLDS). I did not want to use Bootstrap because it is too mainstream.

Tested only on Chrome Canary!

[Demo]

Manual

  • Adding a new list: double click on the wallpaper.
  • Dragging: Mouse left-click to free space (without inputs and buttons) on the list.

Features

  • Draggable lists and notes with two states (undone, done).
  • Search field.
  • Automatic saving to localStorage.
  • Import and export to file.
  • oAuth basic support (only name and avatar from FB)

Known Issues

Overlapping of cards, no min / max dimensions, crazy cursor on drag, poor performance

These are deficiencies in the react-gridbox library that I created in only one day two months ago. I will improve this library in the future.

Only Chrome support

This is React framework error. Seriously. This problem occurs because react inline styles with the value 'repeat()' are unnecessarily parsed by the framework. I already have a solution, but I need to change some lines in the react-gridbox to fix this bug.

FAQ

"Something" does not work after some time (a few hours, days after first use)?

I probably improved or added "something" and store in localStorage does not match the new configuration. I will try to add a store validation mechanism in the future. Meanwhile:

localStorage.clear()

Tech Stack

react, redux, redux-thunk, redux-persist, react-gridbox, blueprint, oauth-js

TODO (I mean "to do") List

  • DnD to files
  • Beautify CSS (similar to tr..lo)
  • react-router-redux
  • react-gridbox issues
  • change blueprint to something normal!!!
  • reorganize views and components
  • refactor SASS imports
  • server side rendering
  • multiple languages
  • notifications

todo's People

Contributors

ku8ar avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.