sepro / memoboard

Flask and React based intranet app where you can create and share lists (e.g. shopping list, todo, ...)

MemoBoard

Single page web app to keep track of various things, like shopping lists, to dos, ... The backend is written in python using flask and flask-restful. The front end is coded around the react and redux js libraries. Ideal to run on a hobby webserver (e.g. raspberry pi).

Installation

Installation instruction for deployment on a linux system.

Clone the repository

git clone https://github.com/sepro/MemoBoard.git MemoBoard

Set up a virtual environment

cd MemoBoard
python -m venv venv

Activate the environment and install packages (Windows)

venv\\Scripts\\activate.bat
pip install -r requirements.txt

Activate the environment and install packages

source venv/bin/activate
pip install -r requirements.txt

Configure MemoBoard

vim config.py

Create the database and migration

# create database
flask createdb

Note: When running this through a webservice and using SQLite, make sure the user www-data has read/write access to the file.

Run tests and run app

python run_tests.py

flask run

Check the web how to configure the webserver of your choice (tested with uwsgi and nginx) to serve memoboard. In case a sqlite database is used, make sure the file is readable and writeable by the webserver.

Front-end development

Install all packages through npm

npm install

Test (using Mocha)

npm test

Build ./memoboard/static/js/bundle.js using webpack

npm run-script build

Contribute to Memoboard

Everyone that wishes to contribute to this project is welcome to reach out. Especially developers with JSX and React experience are invited so scrutinize and improve my code (this was my first project with that technology and there is room for growth and improvement)

Acknowledgements

This project makes use of several python packages and javascript libraries, without these development would have been much more complicated. The favicon is from http://www.freefavicon.com/.

memoboard's Issues

links in markdown behave a bit weird

mallowfy should return response object

check feedback on reddit https://www.reddit.com/r/flask/comments/55209k/a_memo_board_using_flask_and_react/d887nvi

react-lite to shrink bundle.js

Empty list button

jsPDF issue with mocha tests

uses an in-browser only function. Not sure how this can be fixed

download list (as pdf)

Add a download button for each list

add a web app manifest

https://developer.mozilla.org/en-US/docs/Web/Manifest

screenshot out of date

turn links into clickable links automatically

date-fns instead of moment

Minor issue, date-fns seems to be encouraged over moment.js. Might swap them

Clean up code

semi colons are not used consistently after imports, ...

Collapse is slow over network

Should use state to quickly show/hide items and sync the api in the background

PDF export clipped on long lists

hide time from date

takes up a bit too much space

smoother animations using react-flip-move

putting this here as a reminder, might be nice to look into: https://github.com/joshwcomeau/react-flip-move

reload data from server every 500 ms

in case multiple people are adding things simultaniously manual refresh is no longer necessary

Confirmation when deleting a list with items

Restplus instead of restful

and add swagger docs

shift focus to new list when adding a new list

Check binds

https://daveceddia.com/avoid-bind-when-passing-props/ This might be handled incorrectly in a few cases !

Cleaner code with more components

Panel headers and editable versions should be different components

place lists better (sort by size ... different type of grid ...

Pull requests?

Are you open to pull requests?

Items with long name should wrap

on phone screens long item names cause problems

Add graphql api with graphene ?

This is a good base for playing with graphql (potentially in another branch)

Incompatible with certain android browsers

Does work with chrome for android (could be react related and therefore not easily fixable)