Awesome

Koa-React-Notes-Web

This is a simple SPA built using Koa as the backend, Vue as the first frontend, and React as the second frontend.

Features

React 16.13.1 (Initialized by create-react-app)
Fully written in TypeScript
Functional Components
Storybook
Redux 4.0.1
React-Router 5.1.2
Redux-Thunks
Axios
React-Bootstrap
Eslint
Formik
And more...

Installing / Getting started

# Install dependencies
npm i

# Serve with hot reload at localhost:3000
npm run watch

# Build for production
npm run build

# Lint using eslint
npm run lint

# Run Storybook
npm run storybook:watch

# Run tests
npm run test

General Information

For more information on this project you can check out koa-vue-notes-api or koa-vue-notes-web. 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.

This 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.

TypeScript

This 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.

Redux

After 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.

User Authentication Process

As mentioned in the vue/koa code, the user authentication process is this:

User create an account
User logs in
The server sends and accessToken and a refreshToken back
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.
Each protected endpoint will be expecting you to attach the accessToken you have to the call (using Authentication: Bearer)
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.
Once you do that, you'll received a brand new accessToken and refreshToken
Repeat the process as needed

App.js

Here'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.

There's a bunch more in the app:

Storybook support because a lot of times I like to create my components independently from the actual app.
Craco integration so we can stretch our legs a bit without having to eject from create-react-app.
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.
Formik integration, plus lots of input components that work directly with Formik - of course fully written in TypeScript and Functional Components.
Plus more, as I set this up like a real app I'd use in production.
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.

Let 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.

Hit Me Up

Go 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!

License

MIT