Skip to content

awongCM/post-it-notes-board-react

Repository files navigation

PostIt Noteboard React App

My very own simple Post-It Notes Bbulletin board App

Ingredients used

  • ReactJS
  • NodeJS (static web server for Heroku)
  • React Draggable
  • Axios
  • Webpack
  • Babel
  • SASS
  • Yarn/NPM
  • Rails 5 API Server

Installation Process

  1. Download the zipped file
  2. Run npm install or yarn install
  3. Run npm start or yarn start
  4. Browse http://localhost:3000

Usage

Pretty much like every user story board that any agile team uses and works with, we all know how important it is to communicate our ideas and processes amongst team members when building new features in our products for our clients. They have traditionally been captured/written on post-it-notes, therefore we always put them up on the wallboard for everyone to see.

I thought it would be an interesting and fun project to come up with my own user story board app that any person can create and attach post it notes on the wallboard. You can even drag them around the board too!

Have fun!

Instructions

  • You can add post-it notes by clicking one of the three buttons at the top.
  • Click on any one of the existing/new post-it notes to edit notes content, then anywhere on the board to save.
  • You can delete post-it notes by hovering over the top right hand corner of post-it notes.

Demo

alt text

Demo link

Todos

  1. To persist positional values for all existing post-it-notes in the DB instead of having being 'scattered' all around the board when refreshing the browser.
  2. Explore other interesting usecases for draggable react components.

Credits

All credit goes to this wonderful React/Rails Tutorial. I just took it to the next level. 🤗🤘🔥🌈

License

This project is licensed under the MIT License - see the LICENSE.md file for details

About

PostIt NotesBoard React

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published