# Notes-App

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

## Basic Information

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

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

## Statistics

- **Stars**: 1
- **Forks**: 9
- **Created**: 2024-01-24
- **Last Updated**: 2025-03-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Note Taking Application

Welcome to this coding test. Please read the following instructions carefully and complete all required tasks.

## About This App

This is a simple Notes App built with vanilla JavaScript and Local Storage.

### Current Features

- User can create a new note
- User can update and save an existing note (both title and body)
- User can delete an existing note
- User can save a note

**Note:** All data will be saved in your browser's local storage.

## Getting Started

### Prerequisites

- Node.js (v18+ recommended)
- A package manager of your choice (e.g., npm, yarn, pnpm)

### Setup Instructions

If you are a GitHub user:

1. Fork this repository.
2. Clone your forked repository.

If you are not a GitHub user:

1. Clone or download this repository.
2. Push it to your preferred git host.

### Installation and Development

1. Install dependencies: `npm install` (or `yarn install` or `pnpm install`)
2. Start the development server: `npm run dev` (or `yarn dev` or `pnpm run dev`)
3. Complete the tasks described below.

> :warning: **Important**: Please use the current project environment to complete the following tasks and submit your personal repository link when finished.

## Required Tasks

1. Fix existing bugs in the note application.
2. Refactor the app to use React with TypeScript.
3. Ensure all current features work correctly after refactoring.
4. Improve the UI and UX.
5. Follow this folder structure:

```bash
- src:
    - sidebar (Contains Sidebar.tsx for sidebar functionality)
        - Sidebar.tsx
    - editPanel (Contains EditPanel.tsx for edit panel functionality)
        - EditPanel.tsx
    - ... (All other files)
```

**Important**: Do NOT include a `Save` button in your implementation. The application should automatically save all edited data and reflect changes on the sidebar in real-time.

Please maintain consistency in:

- Layout: navbar, editor panel, preview panel
- User experience: add confirmation/warning modals for save/delete operations

## Bonus Tasks

- Implement an `Import Notes` button to allow batch importing of notes.
- Implement an `Export Notes` button to export all notes from local storage.
- Support CSV or XML format for import/export functionality.
- Optimize performance by minimizing unnecessary re-renders.  
  Example: If two notes are displayed on the sidebar and you edit the first note, only the first note should re-render. The second note should remain unaffected.

  > **Note:** Please leave comments on the places where you've improved the performance and how you improved it.

## Submission

Commit and push your changes to a public repository, then share the URL with us.

Thank you for your participation. We look forward to reviewing your work!