Minimal Notes

Simplify your note-taking routine with this clean and minimalist application. We offer an uncomplicated and streamlined approach to creating, editing, and organizing your notes. Experience simplicity at its best.

Table of Contents

• Introduction
• Features
• Technologies Used
• Installation
• Usage
• API Endpoints
• Tests
• License

Introduction

Minimal Notes is a web application that allows users to take notes in a simple and minimalist way, just open the app and start to type. This project was created to showcase my skills in full-stack development and to provide a useful tool for the people who just need to have a simple record of their though, save important texts as soon as possible, or just take notes without any distraction.

Features

• CRUD operations for managing notes.
• Responsive design for a seamless experience on multiple devices.

Technologies Used

• Frontend:

  • NextJs
  • Shadcn/ui
  • Tailwind
  • Typescript
  • Auth0
  • pnpm

• Backend:

  • Node.js
  • Express
  • MySQL
  • Typescript
  • pnpm

• Deployment:

  • Vercel
  • Render.com
  • Clever-cloud

Installation

1. Clone the repository:

git clone https://github.com/MrSzasz/FullStack_Notes-app.git
cd notes-app

Open the console on the root folder to start the server and the client.

cd server
pnpm dev
cd ..
cd client
pnpm dev

Usage

Open your browser and navigate to http://localhost:3000 to access the app. Click on the + button to create a new note, then save it. Now, you can edit and delete the note by clicking on the note itself. If you want to edit, just modify the text and save it. If you want to delete it, click on Delete note. You can find your note by typing some text inside the search bar.

API Endpoints

Method	Endpoint	Description	Request	Response
GET	`api/notes`	Get all notes		[ { title: string, content: string, id: string } ]
POST	`api/notes`	Create a new note	{ title: string, content: string }	[ { message: string, note: { title: string, content: string, id: string } } ]
PUT	`api/notes`	Edit a note by ID	{ title: string, content: string, id: string }	[ { message: string, note: { title: string, content: string, id: string } ]
DELETE	`api/notes`	Delete a note by ID	{ id: string }	[ { message: string, note: { title: string, content: string, id: string } ]

Tests

This app utilizes Vitest for both the backend and the frontend, along with Cypress for end-to-end testing in the frontend.

Prerequisites

Before running the tests, make sure you have the following dependencies installed:

• Node.js: Download Node.js

Installing Dependencies

# Install project dependencies
pnpm install

Running tests

# Run unit tests with Vitest
npm test

# Run end-to-end tests with Cypress
npm run cypress:open

License

This project is licensed under the MIT License.