Personal Notes App

Personal Notes is a web application built using React that allows users to create and manage their notes. It comes with several features, including adding notes, archiving notes, unarchiving notes, deleting notes, changing the language, and toggling between dark and light mode for the user interface. The application also provides user authentication through login and registration.

Table of Contents

• Introduction
• Features
• Usage
• Technologies Used

Introduction

Personal Notes is a user-friendly note-taking application developed using React. It offers a clean and intuitive user interface, making it easy for users to create, manage, and organize their notes efficiently. With the added functionality of authentication, users can securely access their notes from any device.

Features

1. Note Management

• Create Note: Users can create new notes with a title and content.
• Archive Note: Notes can be archived to keep them organized without deleting them.
• Unarchive Note: Archived notes can be easily unarchived when needed.
• Delete Note: Users can permanently delete notes they no longer require.

2. User Interface Customization

• Dark and Light Mode: Users can switch between dark and light mode for a comfortable viewing experience.
• Change Language: The application supports two languages, Indonesian and English, and users can change the language as per their preference.

3. User Authentication

• User Registration: New users can register with their email and password.
• User Login: Registered users can log in to access their notes.

Usage

1. Registration and Login: If you are a new user, click on the "Register" button to create an account. For returning users, click on "Login" and enter your credentials.

2. Create a Note: Once logged in, you can start creating notes by clicking the "+" button and clicking the "[x]" button once you have finished writing the note

3. Manage Notes: Use the archive, unarchive, and delete button to organize your notes.

4. Customize the User Interface: Change the theme mode (dark/light) and language preferences from the buttons on the menu bar.

Technologies Used

• React: A powerful front-end framework used for building the user interface.

• HTML, CSS: Fundamental web technologies employed for structuring and styling the application.

• React Context API: Utilized for efficient state management, ensuring a consistent user experience.

• React Icons: Added to enhance the user interface with a variety of icons.

• React Router DOM: Facilitates routing and navigation within the application.