Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mahdi-q/note-app-react-project
A web app for writing & organize our notes that developed by React.js library.
https://github.com/mahdi-q/note-app-react-project
note-app react-app react-note-app react-web-app web-app web-application
Last synced: 1 day ago
JSON representation
A web app for writing & organize our notes that developed by React.js library.
- Host: GitHub
- URL: https://github.com/mahdi-q/note-app-react-project
- Owner: mahdi-q
- Created: 2024-06-07T15:55:50.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-07-31T11:54:45.000Z (4 months ago)
- Last Synced: 2024-07-31T13:10:41.344Z (4 months ago)
- Topics: note-app, react-app, react-note-app, react-web-app, web-app, web-application
- Language: JavaScript
- Homepage:
- Size: 48.8 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Note App React Project
A web application for writing and organizing your notes, developed using the React.js library.
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Features](#features)
- [Key Concepts](#key-concepts)
- [Contact Information](#contact-information)
## Installation
### Prerequisites
- Node.js and npm should be installed on your machine.
### Steps
1. Clone the repository:
```bash
git clone https://github.com/mahdi-q/Note-App-React-Project.git
```
2. Navigate to the project directory:
```bash
cd Note-App-React-Project
```
3. Install the dependencies:
```bash
npm install
```
4. Run the app:
```bash
npm run dev
```
5. Click on the link provided in the terminal to open the app in your browser.
## Usage
To start using the Note App, follow the steps below:
1. Open the app in your browser.
2. Add a new note by entering a title and a description.
3. Manage your notes by marking them as completed or removing them.
4. Use the sorting options to organize your notes based on different criteria.
## Features
- **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
## Key Concepts
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.
## Contact Information
For any questions or feedback, please contact me at [[email protected]](mailto:[email protected]).
---
Thank you for using the Note App! Happy note-taking!