Skip to content
/ mynotes Public

MyNotes v1- React web application to create and save list of notes with label

License

Notifications You must be signed in to change notification settings

k1adi/mynotes

Repository files navigation

MyNotes

Overview

This react web application was created as a requirement for completing the "Belajar Membuat Aplikasi Web dengan React" class at Dicoding with program IDCamp 2023 from Indosat Ooredoo Hutchison.

The purpose of this class is for students to be able developing a website with UI components that are reusable, declarative, and reactive to changes in data, and create a web application with React that utilizes functional components, stateful components, and controlled components.

The application enables users to save notes in Web Storage. It utilizes stateful components to efficiently manage data changes triggered by event handling and includes a search functionality for notes based on title and label.

Installation

  1. Clone the project repository to your local machine using a Git client or by downloading the project as a zip file.
git clone /~https://github.com/k1adi/mynotes.git
  1. Navigate to the project's root directory in your terminal or command prompt.
cd mynotes
  1. Install the project's dependencies.
npm install or yarn install
  1. Running development version
npm run dev
  1. Build and running production version
npm run build or npm run prod

This project uses vite for building and serving the project, the package.json file provided contains several scripts for building, serving and development mode. Make sure you have the required version of Node.js and npm installed before running the above commands.

Alternatively, you can directly access the deployed react web application at mynotes-kiadi.netlify.app/

Scripts

  • dev: Running development version of react web application.
  • build: Build production version of react web application.
  • prod: Running production version of react web application.
  • preview: Locally preview the production build.
  • lint: Run the eslint.

Features

  • Switch theme (light/dark).
  • Add new note data.
  • Edit note data.
  • Delete note data.
  • Open pop-up note detail.
  • Has two statuses for note data.
  • Search for note data by title and label according by archived.
  • Utilizes localStorage to store data.

Submission info

Submission info

Author

License

This project is licensed under the LICENSE.md - see the LICENSE.md file for details

About

MyNotes v1- React web application to create and save list of notes with label

Topics

Resources

License

Stars

Watchers

Forks