Pre-requisites & Tech Stack Needed to Build Our Notes App

Before we begin building the Sticky Notes App, let’s make sure your development environment is ready. In this module, you’ll also learn about the technologies we’re using to create the app so you understand how each piece fits together.

1) Basic Requirements

• Node.js and npm: Install Node.js (version 16 or newer). npm comes bundled with Node.js and is essential for installing project dependencies like React, Vite, and third-party libraries. Download it from nodejs.org.
• Code Editor (VSCode recommended): Visual Studio Code makes development easier with features like syntax highlighting, integrated terminal, and useful extensions (like React Developer Tools).
• Web Browser: Use a modern browser such as Chrome, Firefox, or Edge for testing and running your app locally.
• Git (Optional): If you want to save your progress or share the code, install Git from git-scm.com.
• Basic Knowledge:
  To follow along comfortably, you should already be familiar with:
  • HTML and CSS basics.
  • Modern JavaScript (ES6+) concepts like arrow functions, array methods, and destructuring.
  • Core React concepts like JSX and useState. We’ll also use useEffect and some external libraries as we build.

2) Tech Stack Used

• React with Vite: React is the library powering our user interface. Instead of Create React App, we’re using Vite, a modern build tool that’s faster and gives better developer experience.
• JavaScript (ES6+):
  All app logic is written using modern JavaScript features such as:
  • Array methods for filtering and sorting notes.
  • Event handling with arrow functions.
  • Template strings for generating downloadable files.
• HTML and CSS:
  JSX provides structure to the UI, while styling is managed in:
  • App.css for custom styles of notes, buttons, modals, and layout.
  • Global defaults handled through the base setup (index.css provided by Vite).
• Node.js + npm: Runs the local development server and installs dependencies like React, ReactDOM, Vite, and third-party libraries.
• react-beautiful-dnd: This library enables drag-and-drop functionality so users can reorder notes easily. It provides DragDropContext, Droppable, and Draggable components that we use to make notes interactive.
• Local Storage: Instead of a backend, we use the browser’s local storage to save and load notes so that data persists even after refreshing the page.
• Netlify Deployment: Once the app is built, it is hosted on Netlify for free. This allows anyone to access your Sticky Notes app with a simple link.

3) Input

Our app accepts input directly from users in multiple ways:

• Add Note: A textarea where users can type notes and a button to add them. Empty inputs are ignored.
• Edit Note: Double-clicking on a note allows editing through an inline textarea.
• Search Bar: A search box filters notes in real-time as you type.
• Import Notes: Users can upload a .json file to restore previously exported notes.

React handles these interactions with:

• onChange for tracking what users type.
• onClick, onBlur, and onKeyDown for adding, editing, and saving notes.
• State variables (useState) to keep the UI updated instantly.

4) Output

The app dynamically shows user input as styled notes on the screen:

• Notes Display: Notes appear as colored sticky cards with random background colors. Pinned notes are highlighted in pink.
• Drag & Drop: Thanks to react-beautiful-dnd, notes can be reordered by dragging them horizontally.
• Pinning & Deleting: Users can pin important notes (moving them to the top) or delete notes completely.
• Export Notes: Users can download their notes as a JSON file with one click.
• Modal Instructions: A pop-up explains all the app features clearly for first-time users.

Because React re-renders the UI on every state update, changes (like editing, pinning, or deleting notes) are reflected instantly without reloading the page.