A web application for writing and organizing your notes, developed using the React.js library.
- Node.js and npm should be installed on your machine.
- Clone the repository:
git clone https://github.com/mahdi-q/Note-App-React-Project.git
- Navigate to the project directory:
cd Note-App-React-Project - Install the dependencies:
npm install
- Run the app:
npm run dev
- Click on the link provided in the terminal to open the app in your browser.
To start using the Note App, follow the steps below:
- Open the app in your browser.
- Add a new note by entering a title and a description.
- Manage your notes by marking them as completed or removing them.
- Use the sorting options to organize your notes based on different criteria.
- Add Notes: Add notes with a title and description.
- Remove Notes: Delete notes from the list.
- Mark as Completed: Mark notes as completed.
- Status Display: View the number of notes in the following statuses:
- All
- Completed
- Open
- Sort Notes: Sort notes based on:
- Latest
- Earliest
- Completed
This project explores several important concepts from the React library:
- Lifting State Up: Share state between components by lifting it up to the nearest common ancestor.
- Derived States: Derive state values from props or other state variables.
- useReducer Hook: Manages complex state logic with a reducer function.
- Children Props: Pass components as props to other components.
- useContext Hook: Access context values without prop drilling.
- Custom Hook: Reusable function that encapsulates logic using hooks.
- CSS Modules: Use CSS Module to have the modular styles.
- Tests: Use Vitest and React-Testing-Library for developing project tests.
For any questions or feedback, please contact me at ghasemi84mahdi@gmail.com.
Thank you for using the Note App! Happy note-taking!