🗒️ Keeper App

🎯 Overview

Welcome to the Keeper App -- a sleek and modern note-taking application built with React! This app allows users to effortlessly create, edit, and delete notes. Designed with a clean and professional user interface, it features a responsive layout and a stylish fixed footer. Whether you're jotting down quick thoughts or detailed notes, Keeper App has you covered!

🚀 Features

• ✍️ Create Notes: Easily add new notes with a title and content.
• ✏️ Edit Notes: Modify the content of your notes with a smooth editing experience.
• 🗑️ Delete Notes: Remove notes that are no longer needed.
• 📱 Responsive Design: Enjoy a flexible layout that adapts to various screen sizes.
• 🎨 Professional Design: Modern UI built with Bootstrap and custom CSS for an elegant look.

🛠️ Technologies Used

• React: A powerful JavaScript library for building user interfaces.
• Bootstrap: A popular CSS framework for responsive design and pre-designed UI components.
• CSS: Custom styling for a unique and polished appearance.

📝 Installation

Get your Keeper App up and running with these simple steps:

Prerequisites

• Node.js (>=20.16.0)
• npm (>=9.0.0) or yarn (>=1.22.22)

Steps

1. Clone the Repository

   git clone https://github.com/Slygriyrsk/keeper-app-react.git
   cd keeper-app-react

2. Install Dependencies

   Install all necessary npm packages:

   npm install || yarn install

3. Start the Development Server

   Run the app in development mode:

   npm start || yarn start

   This will launch a local server and open the app in your browser.

4. Open the App

   Visit http://localhost:3000 to start using the Keeper App!

🖥️ Usage

📚 Creating a Note

1. Fill in the Title and Content: Enter your note's title and content in the respective fields.
2. Click "Add": Your note will be added to the list instantly.

✏️ Editing a Note

1. Click "EDIT": Enter edit mode for the note.
2. Update the Content: Make your changes in the text area.
3. Click "SAVE": Save your changes or "CANCEL" to discard them.

🗑️ Deleting a Note

1. Click "DELETE": Remove the note from your list.

📁 Code Structure

• src/App.jsx: The core component that manages state and renders the header, note creation form, and notes list.
• src/CreateArea.js: Component for adding new notes.
• src/Note.js: Component for displaying and managing individual notes.
• src/Header.js: Component for the app's header.
• src/Footer.js: Component for the app's footer.
• src/style.css: Custom CSS for styling the app and enhancing the UI.

🎨 Styling

• Custom CSS: Provides unique styles for the notes, footer, and overall layout.
• Bootstrap: Utilized for responsive design and base styling.

🤝 Contributing

We welcome contributions to the Keeper App! If you have ideas, bug fixes, or improvements, please submit a pull request or open an issue. Your input helps make the app better for everyone!

📜 License

This project is licensed under the MIT License. See the LICENSE file for more details.

📬 Contact

For any inquiries or further information, feel free to reach out:

• Your Name: slygrin005@gmail.com
• GitHub: Slygriyrsk

Thank you for checking out the Keeper App! We hope you find it useful and enjoy using it as much as we enjoyed building it. 😊