https://github.com/shubham6617/keeper-app
Full-stack Keeper App lets users manage notes with React, Node.js, and MySQL. Store, create, and delete notes easily. 🌟📁
https://github.com/shubham6617/keeper-app
android content-curation css google hacktoberfest hacktoberfest2021 javascript keeper keeper-app notes-app php quasar quasar-framework scholarship spiral tauri udacity vue3-typescript
Last synced: 4 months ago
JSON representation
Full-stack Keeper App lets users manage notes with React, Node.js, and MySQL. Store, create, and delete notes easily. 🌟📁
- Host: GitHub
- URL: https://github.com/shubham6617/keeper-app
- Owner: Shubham6617
- Created: 2025-06-23T16:31:02.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-06-23T18:51:50.000Z (4 months ago)
- Last Synced: 2025-06-23T19:43:30.684Z (4 months ago)
- Topics: android, content-curation, css, google, hacktoberfest, hacktoberfest2021, javascript, keeper, keeper-app, notes-app, php, quasar, quasar-framework, scholarship, spiral, tauri, udacity, vue3-typescript
- Language: JavaScript
- Homepage: https://shubham6617.github.io
- Size: 1.6 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Keeper App: A Lightweight Note-Taking Tool in React
## Table of Contents
- [Overview](#overview)
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Installation](#installation)
- [Usage](#usage)
- [API Endpoints](#api-endpoints)
- [Contributing](#contributing)
- [License](#license)
- [Release Information](#release-information)
## Overview
📝 **Keeper App** is a lightweight note-taking application built with React. Inspired by Google Keep, it allows users to quickly add, view, and delete notes. The app features a clean and responsive user interface, making it easy to manage your thoughts and ideas.
For the latest updates and versions, visit the [Releases section](https://github.com/Shubham6617/Keeper-App/releases).
## Features
- **Create Notes**: Quickly add notes with a simple form.
- **View Notes**: Easily view all your notes in a clean layout.
- **Delete Notes**: Remove notes you no longer need with a single click.
- **Responsive Design**: The app looks great on all devices.
- **React Hooks**: Utilizes React Hooks for state management and side effects.
- **Simple CSS Styling**: Clean and minimal design for better user experience.
## Technologies Used
- **React**: The core library for building user interfaces.
- **React Hooks**: For managing state and lifecycle events.
- **Node.js**: Server-side JavaScript runtime.
- **Express**: Web framework for Node.js.
- **MySQL**: Database for storing notes.
- **Axios**: For making HTTP requests.
- **Body-parser**: Middleware for parsing incoming request bodies.
- **CORS**: Middleware for enabling Cross-Origin Resource Sharing.
- **Nodemon**: Tool for automatically restarting the server during development.
- **JavaScript**: The programming language used throughout the application.
## Installation
To set up the Keeper App on your local machine, follow these steps:
1. **Clone the Repository**:
```bash
git clone https://github.com/Shubham6617/Keeper-App.git
cd Keeper-App
```
2. **Install Dependencies**:
Run the following command to install all required packages:
```bash
npm install
```
3. **Set Up the Database**:
Make sure you have MySQL installed and create a database for the app. You can use the following SQL commands to set up your database:
```sql
CREATE DATABASE keeper_app;
USE keeper_app;
CREATE TABLE notes (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255) NOT NULL,
content TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
```
4. **Start the Server**:
Use Nodemon to start the server:
```bash
npm run server
```
5. **Start the Client**:
Open another terminal and navigate to the client directory:
```bash
cd client
npm start
```
Now you can access the app in your browser at `http://localhost:3000`.
## Usage
Once the app is running, you can start adding notes. The main interface consists of a text input for the title and a larger text area for the content. Click the "Add Note" button to save your note. You can view all your notes displayed below the input area.
To delete a note, simply click the trash icon next to the note you want to remove. The app will confirm your action before deleting the note.
## API Endpoints
The Keeper App has several API endpoints for managing notes. Below are the key endpoints:
- **GET /api/notes**: Retrieve all notes.
- **POST /api/notes**: Create a new note. Requires a JSON body with `title` and `content`.
- **DELETE /api/notes/:id**: Delete a note by ID.
### Example API Calls
Here are examples of how to interact with the API using Axios:
1. **Fetch Notes**:
```javascript
axios.get('/api/notes')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error fetching notes:', error);
});
```
2. **Create a Note**:
```javascript
axios.post('/api/notes', {
title: 'New Note',
content: 'This is the content of the new note.'
})
.then(response => {
console.log('Note created:', response.data);
})
.catch(error => {
console.error('Error creating note:', error);
});
```
3. **Delete a Note**:
```javascript
axios.delete('/api/notes/1')
.then(response => {
console.log('Note deleted:', response.data);
})
.catch(error => {
console.error('Error deleting note:', error);
});
```
## Contributing
Contributions are welcome! If you want to help improve the Keeper App, follow these steps:
1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature/your-feature-name
```
3. Make your changes and commit them:
```bash
git commit -m "Add your message here"
```
4. Push to the branch:
```bash
git push origin feature/your-feature-name
```
5. Open a pull request.
Please ensure your code follows the project's coding style and passes all tests.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Release Information
For the latest releases, including new features and bug fixes, visit the [Releases section](https://github.com/Shubham6617/Keeper-App/releases). Download and execute the latest version to get the most out of Keeper App.