This project, notes-app, is a simple yet effective note-taking application developed as a Dicoding submission. It provides users with a clean and intuitive interface to create, organize, and manage their notes efficiently. The application is built using modern JavaScript, leveraging components to ensure maintainability and scalability. It serves as a practical demonstration of front-end development skills and demonstrates proficiency in building user interfaces with JavaScript.
The notes-app aims to solve the everyday problem of scattered thoughts and disorganized information. Whether you're a student, professional, or anyone who needs to jot down ideas on the go, this application offers a centralized and easily accessible platform to store and retrieve your notes. By providing a user-friendly experience, it empowers individuals to stay organized and productive.
This application is designed for anyone who needs a simple and reliable note-taking tool. It caters to individuals who prefer a lightweight application over complex and feature-heavy alternatives. Furthermore, it serves as a valuable learning resource for aspiring front-end developers looking to understand the practical application of JavaScript and component-based architecture in web development. The clean code structure and well-defined components make it an excellent case study for learning best practices.
- Note Creation: Allows users to easily create new notes with titles and content. This feature enables quick and simple information capture.
- Note Listing: Displays all created notes in an organized list, making it easy to browse and locate specific notes.
- Note Editing: Enables users to modify existing notes, allowing for easy updates and revisions. This ensures that notes remain relevant and accurate.
- Note Deletion: Provides the ability to remove unwanted or outdated notes, keeping the note list clean and manageable.
- User-Friendly Interface: Offers a clean and intuitive design, making the application easy to use for individuals of all technical skill levels.
| Technology/Tool | Description |
|---|---|
| JavaScript | The primary programming language used for the application's logic and UI. |
| HTML | Used for structuring the application's content. |
| CSS | Used for styling the application and enhancing the user interface. |
| Webpack | A module bundler used to package the JavaScript modules. |
| Node.js | JavaScript runtime environment to run the application and install dependencies. |
| NPM | Package manager used to install and manage project dependencies. |
| Component-Based Architecture | The application is structured using reusable components for maintainability. |
To run the notes-app locally, follow these steps:
-
Prerequisites: Ensure you have Node.js and npm (Node Package Manager) installed on your system. You can download them from the official Node.js website: https://nodejs.org/
-
Clone the Repository: Clone the repository to your local machine using Git:
git clone https://github.com/Gaeuly/notes-app.git
-
Navigate to the Project Directory: Change your current directory to the cloned repository:
cd notes-app -
Install Dependencies: Install the project dependencies using npm:
npm install
-
Run the Application: Start the application using Webpack's development server:
npm start
This command will typically start a development server and open the application in your default web browser. If it doesn't open automatically, you can access it manually by navigating to the address provided in the console (usually
http://localhost:8080).
We welcome contributions to the notes-app project! If you'd like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and commit them with clear, concise messages.
- Submit a pull request to the main branch.
Please ensure your code adheres to the project's coding style and includes appropriate tests.