{"id":16976957,"url":"https://github.com/johndatserakis/koa-react-notes-web","last_synced_at":"2025-03-22T14:31:55.267Z","repository":{"id":86795332,"uuid":"137617624","full_name":"johndatserakis/koa-react-notes-web","owner":"johndatserakis","description":"🤓 This is a simple SPA built using Koa as the backend, Vue as the first frontend, and React as the second frontend. Features MySQL integration, user authentication, CRUD note actions, and more. ","archived":false,"fork":false,"pushed_at":"2020-09-06T04:00:08.000Z","size":8409,"stargazers_count":66,"open_issues_count":0,"forks_count":10,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-03-18T12:03:26.421Z","etag":null,"topics":["boilerplate","crud","functional-components","hooks","koa","react","react-router","starter","storybook","typescript"],"latest_commit_sha":null,"homepage":"https://koa-react-notes-web.innermonkdesign.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johndatserakis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-16T23:55:11.000Z","updated_at":"2024-02-13T14:48:13.000Z","dependencies_parsed_at":"2023-03-06T14:15:34.392Z","dependency_job_id":null,"html_url":"https://github.com/johndatserakis/koa-react-notes-web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fkoa-react-notes-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fkoa-react-notes-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fkoa-react-notes-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fkoa-react-notes-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johndatserakis","download_url":"https://codeload.github.com/johndatserakis/koa-react-notes-web/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244972337,"owners_count":20540962,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","crud","functional-components","hooks","koa","react","react-router","starter","storybook","typescript"],"created_at":"2024-10-14T01:27:44.095Z","updated_at":"2025-03-22T14:31:55.255Z","avatar_url":"https://github.com/johndatserakis.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://koa-vue-notes-web.innermonkdesign.com/\" target=\"_blank\"\u003e\u003cimg width=\"200\" src=\"./public/koa-react-notes-icon.png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fjohndatserakis%2Fkoa-react-notes-web\u0026text=Check%20out%20koa-react-notes-web%20on%20GitHub\u0026via=innermonkdesign\"\u003e\n  \u003cimg src=\"https://img.shields.io/twitter/url/https/github.com/johndatserakis/koa-react-notes-web.svg?style=social\" alt=\"Tweet\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Koa-React-Notes-Web\n\nThis is a simple SPA built using [Koa](http://koajs.com/) as the backend, [Vue](https://vuejs.org/) as the first frontend, and [React](https://reactjs.org) as the second frontend.\n\n- [Frontend Vue GitHub](https://github.com/johndatserakis/koa-vue-notes-web)\n- [Frontend Vue Demo](https://koa-vue-notes-web.innermonkdesign.com/)\n- [Frontend React GitHub](https://github.com/johndatserakis/koa-react-notes-web)\n- [Frontend React Demo](https://koa-react-notes-web.innermonkdesign.com/)\n- [Backend Koa GitHub](https://github.com/johndatserakis/koa-vue-notes-api)\n\n# Features\n\n- React 16.13.1 (Initialized by create-react-app)\n- Fully written in TypeScript\n- Functional Components\n- Storybook\n- Redux 4.0.1\n- React-Router 5.1.2\n- Redux-Thunks\n- Axios\n- React-Bootstrap\n- Eslint\n- Formik\n- And more...\n\n# Installing / Getting started\n\n``` bash\n# Install dependencies\nnpm i\n\n# Serve with hot reload at localhost:3000\nnpm run watch\n\n# Build for production\nnpm run build\n\n# Lint using eslint\nnpm run lint\n\n# Run Storybook\nnpm run storybook:watch\n\n# Run tests\nnpm run test\n```\n\n# General Information\n\nFor more information on this project you can check out [koa-vue-notes-api](https://github.com/johndatserakis/koa-vue-notes-api) or [koa-vue-notes-web](https://koa-react-notes-web.innermonkdesign.com). The project's general concept is to create a simple notes in using modern technologies. Initially, Koa-Vue-Notes was an app that used Koa on the backend and Vue on the frontend.\n\nThis project changes that up a bit - it's the same `koa-vue-notes-web` app, but written in React. This is perfect for someone who wants to take a good look at both frameworks a little bit more in depth than the usually tutoral blog posts.\n\n# TypeScript\n\nThis frontend is fully built in `TypeScript` which hopefully helps others who are looking for a working example of some different components. Even though I've been using `JavaScript` for about 10 years now, I only recently started using `TypeScript` over the past year or so. In the most recent revamp of this project I decided to rewrite it completely in `TypeScript` due to how much safety it brings - it really make me feel better about the foundation of the app. I really like `TypeScript` and will definitely be using it in all my `JavaScript` projects going forward - the only tough part is integrating third-party libraries (event those written in `TypeScript`), although after a few you get used to it.\n\n# Redux\n\nAfter using `Vuex` for about 2 years now, `Redux` wasn't really to hard to wrap my head around. `Users` and `Notes` each have their own `action` and `reducer` files. I'm utilizing `redux-thunk` in the project to allow action creators to return functions.\n\n# User Authentication Process\n\nAs mentioned in the vue/koa code, the user authentication process is this:\n\n- User create an account\n- User logs in\n- The server sends and `accessToken` and a `refreshToken` back\n- We take the `accessToken` and decode it using `jwt-decode`. This gets us the logged in user's information. We stick this in the Vuex/Redux `user` store. Then we store the `refreshToken` and `accessToken` in the user's `localStorage`.\n- Each protected endpoint will be expecting you to attach the `accessToken` you have to the call (using `Authentication: Bearer`)\n- After a short amount of time, the server will respond with `401 TOKEN EXPIRED`. When you see this - that means you need to send your `refreshToken` and `user.email` to the endpoint that deals with `accessToken` refreshing.\n- Once you do that, you'll received a brand new `accessToken` and `refreshToken`\n- Repeat the process as needed\n\n# App.js\n\nHere's where a chunk of the app takes place. The routes are declared in the render function. You'll also notice a few routes only allow entry if the user is logged in. That can be useful if you're trying to protect some routes - like we are here with `Dashboard`, `CreateNote`, and `EditNote`. Also you'll find some code that handles the initial page load. In some cases, you'll want to load data there, but in this case, I only want to load the user's notes if the load happens on the `Dashboard` page.\n\n# More\n\nThere's a bunch more in the app:\n\n- `Storybook` support because a lot of times I like to create my components independently from the actual app.\n- `Craco` integration so we can stretch our legs a bit without having to eject from `create-react-app`.\n- `netlify.toml` support - you can take a look at how I serve the site on `Netlify` - very simple, and includes a rewrite for the `API` call.\n- `Formik` integration, plus lots of input components that work directly with `Formik` - of course fully written in `TypeScript` and `Functional Components`.\n- Plus more, as I set this up like a real app I'd use in production.\n- `Google Analytics` integration with helper functions for triggering events - I set those triggers to run on actions like signup, login, creating a note, stuff like that.\n\nLet me know if there's anything you'd like me to expand on as far as why I chose to use it in the app, glad to explain further.\n\n# Hit Me Up\n\nGo ahead and fork the project! Message me here if you have questions or submit an issue if needed. I'll be making touch-ups as time goes on. Have fun with this!\n\n# License\n\nCopyright 2018 John Datserakis\n\n[MIT](http://opensource.org/licenses/MIT)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohndatserakis%2Fkoa-react-notes-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohndatserakis%2Fkoa-react-notes-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohndatserakis%2Fkoa-react-notes-web/lists"}