Note Taking App

A Full-Stack Application to validate OAuth authorization-code flow with PKCE and to manage notes.

The goal of this project is to implement an application called note-app to manage notes taking. For it, we will implement a back-end Spring Boot application called springboot-note to provice REST APIs for resource access and a font-end ReactJS application called note-react-app to provide browser access. Besides, we will use OAuth 2.0 and JWT Authentication supported by Spring Authorization Server secure both applications.

Get Started

• Online Service

  • The users/passwords are:coder and nocoder.

• Local Service

  • Make sure Docker is installed, then in a terminal, make sure you are inside note-app root folder. Run the following command to start docker compose containers:

    docker compose up -d

    Then access http://127.0.0.1/ in browser

  • To stop and remove docker-compose containers and network, in the terminal and inside note-app folder, run the command below

    docker compose down -v

• CI/CD pipeline status

  • The note-app-update-pipeline can be viewed on http://172.96.205.185:8080/

Features

• Login/Logout with OAuth 2 Authorization Code Flow with PKCE
• CRUD for note-taking
• WYSIWYG text editor and syntax highlighter for code snippets

Roadmap

• Local Run with JAR and NPM
• Docker Compose
• AWS Deployment + Jenkins CI/CD pipeline
• Kubernetes Deployment

Development

Prerequisites

• npm (16.16.0)

• JDK 17+

• Maven

• Docker

• Docker Compose

authorization-server

• Open a terminal and navigate to note-app/springboot-note-authorization-server folder

• Run the following Maven command to start the application

  ./mvnw package
  ./mvnw clean spring-boot:run

• This folder also can be opened as Jetbrains IDEA project for development.

api-service

• Open a terminal and navigate to note-app/springboot-note folder

• Run the following Maven command to start the application

  ./mvnw package
  ./mvnw clean spring-boot:run

• This folder also can be opened as Jetbrains IDEA project for development.

react-app

• Open another terminal and navigate to note-app/note-react-app/ folder

• Run the command below if you are running the application for the first time

  npm install

• Run the npm command below to start the application

  npm start

Screenshots

• Homepage

• Note list

• User Profile

• Note Preview

• Note Creating and Updating

• Logout Confirmation

License

GNU General Public License v3.0