https://github.com/priyanshuuranjan/pasteapp
Built a notes saver app with React, Tailwind CSS, and Redux Toolkit, storing all notes locally in the browser for fast access.
https://github.com/priyanshuuranjan/pasteapp
notes reactjs redux talwindcss
Last synced: 19 days ago
JSON representation
Built a notes saver app with React, Tailwind CSS, and Redux Toolkit, storing all notes locally in the browser for fast access.
- Host: GitHub
- URL: https://github.com/priyanshuuranjan/pasteapp
- Owner: priyanshuuranjan
- License: mit
- Created: 2024-10-12T09:51:51.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-27T18:15:43.000Z (about 1 year ago)
- Last Synced: 2025-12-31T03:28:47.454Z (4 months ago)
- Topics: notes, reactjs, redux, talwindcss
- Language: JavaScript
- Homepage: https://nanonotes.netlify.app/
- Size: 96.7 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📓 Notes Saver
A simple and efficient note-taking application built using **React**, **Tailwind CSS**, and **Redux Toolkit**, with local browser storage to save and manage notes.
## ✨ Features
- 📝 **Add, edit, and delete notes**: Seamlessly manage your notes.
- 💾 **Local Storage**: All notes are stored directly in your browser, ensuring quick access without the need for an internet connection or external databases.
- 📱 **Responsive Design**: Built with **Tailwind CSS** for a mobile-friendly and sleek user interface.
- ⚡ **Redux Toolkit**: Efficiently manages the global state of the notes for smooth interactions.
## 🛠️ Technologies Used
- ⚛️ **React**: For building the user interface
- 🎨 **Tailwind CSS**: For responsive and modern styling.
- 🗂️ **Redux Toolkit**: For managing the global state of the application.
- 💻 **Local Storage API**: For storing notes directly in the browser.
## 🚀 Installation and Setup
1. **Clone the repository**:
```bash
git clone https://github.com/priyanshuuranjan/notes-saver.git
```
2. **Navigate to the project directory**:
```bash
cd notes-saver
```
3. **Install the dependencies**:
```bash
npm install
```
4. **Start the development server**:
```bash
npm start
```
5. Open your browser and go to:
```
http://localhost:3000
```
## ⚙️ How It Works
- ✍️ **Adding Notes**: Enter your note content in the input field and click the "Add Note" button.
- ✏️ **Editing Notes**: Click on a note to edit it.
- 🗑️ **Deleting Notes**: Remove a note by clicking the "Delete" button next to it.
All notes are saved automatically in the browser's local storage and will remain there until manually cleared.
## 📂 Folder Structure
```
├── public
│ ├── index.html
├── src
│ ├── components
│ │ ├── Note.js
│ │ ├── NoteList.js
│ ├── redux
│ │ ├── store.js
│ │ ├── noteSlice.js
│ ├── App.js
│ ├── index.js
│ └── styles
│ └── tailwind.css
```
## 🤝 Contributing
Feel free to contribute by submitting a pull request or reporting any issues. Any contributions, whether it's fixing bugs or improving documentation, are welcome!
## 📜 License
This project is licensed under the MIT License.
## 📧 Contact
For any questions or feedback, please reach out:
- **Email**: priyanshumth0808@gmail.com