This app is a side-project I'm developing using React, Redux, ES6, and Firebase as the data store. I have learned a great deal from building this application, now for the third time. The first time I made it with jQuery, the second time with AngularJS.
It is a great example of what a real-world application might be like, which makes it perfect to build it using different technologies that I want to learn or get better with.
You can see that as you change the fields in the edit form, the updates are made everywhere, instantly populating the form rest of the components and filling out the app with some useful UI features and capabilites that you can ultimately operate the application with the more notes you have!
I wanted to be able to take this app and use it anywhere I was right from on my phone. So, I used flexbox to make the rather complex layout of the columns and the edit form rows and filled in remaining spaces which normally would be a problem, it was quite easy with the use of flexbox.
It's not 100% perfect yet. But you can use it, it's functional. I did make some improvements that required some more thought around the UX on mobile, but overall it's pretty usable.
Yarn helps to spead things up a bit, but I use npm as well.
brew install yarn
git clone [email protected]:jaredwilli/webernote-react.git
cd webernote-react
yarn
yarn start
_The app will be served on (http://localhost:3000/).
This is still a Create React App unejected. (Sounds so weird...) But there are tons of cool things you can do
yarn build
Yarn build-start
yarn test [-- --jsdom] [--coverage]
yarn coverage [--watch]
yarn watch-css
yarn build-css
***ORRR..... Read the code :)
yarn run
This app uses prettier to auto format the code on pre-commit. It also has a .prettierrc file for setting some defaults. It is recommended that you install Prettier in your code editor of choice and configure your workspace settings for it to be the same as what this project has defined.
Everyone is welcome, we can turn it into a really useful app together! Of course I am open to anyone looking to contribute. This app is kind of a what I use to build a real-world and production level and quality application using technologies I am not very familiar with so I can pick it up while building a pretty complex single-page-app.
If you are interested in contributing to this project, check out the Issues page and choose from any of the various features, bugs, ideas and other things that you may want to give a shot to add, and open a Pull Request.
Check out the issues, there's and apply the label Roadmap.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent