# Notes-App

**Repository Path**: huchengwu/notes-app

## Basic Information

- **Project Name**: Notes-App
- **Description**: 仅供前端面试者测试题使用。

Notes App Exercise for Candidates.
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 9
- **Created**: 2024-04-02
- **Last Updated**: 2024-04-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Note Taking Application


Hello,

I am Hu Guangyuan, a candidate for the position of Frontend WEB Development Engineer in your esteemed company, Coates Signco Pty Ltd. I am writing to inform you that I have successfully completed the test tasks provided by your company, including the Bonus Tasks.

For this project, I utilized React's class component construction method. 

I have updated the test content in the corresponding Git repository on Gitee: https://gitee.com/huchengwu/notes-app

Additionally, I have uploaded the project to my personal server for your convenience in online viewing (compatible only with PC): http://139.199.212.233:8089/

Thank you for considering my application. I look forward to the opportunity to discuss my qualifications further.

### README.md

```markdown
- en [English](README.md)
- zh_CN [简体中文](readme/README.zh_CN.md)
```

## About This App
A Simple Notes App built with vanilla JavaScript and Local Storage.

### Functionality Features

- 
  Users can create new notes.
- Users can update an existing note (title and body).
- Users can delete created notes.
- Users can save notes.
- The notes data will be saved in the browser's local storage.

## Get Started

*Prerequisite*：

- Install Node.js (suggest v18+)
- Install [pnpm](https://pnpm.io/installation) globally 

*Preparation before using this project:*

1. Install all the packages by `pnpm install`
3. Start the development by `pnpm run dev`
4. Work on the tasks described below

## Tasks

1. Fixed existing bugs in this note application.
2. Refactored the application into a React app using TypeScript.
3. Ensured that current features work properly after refactoring.
4. Provided some improvements in UI and UX.
5. Followed the folder structure as requested.
6. Implemented an autosave mechanism, along with dynamic detection of saving in progress/saved on the right side of the title bar, with icons and descriptions provided for users to understand the current saving status.

### Project Highlights

- 
  Implemented a new button named "Import Notes" to allow users to bulk import notes.
- Created a new button named "Export Notes" to allow users to export all notes from local storage.
- Imported and exported files are in CSV format.
- Implemented a reasonable file project structure and resource allocation for the refactored project, with independent file architecture for component divisions.

### Performance Optimization

- Implemented a debounce solution to control the autosave mechanism, delaying the saving to localStorage while the user is typing, aiming to improve browser performance.
- Implemented independent rendering for the title bar and text area, updating only the corresponding area when the content of the title bar or text area changes, without performing a full re-render.