https://github.com/vivmost/pocket-notes

Pocket Notes, an app designed for efficient note storage within organized groups. Users can create and manage groups, each providing a structured environment for storing, retrieving, and deleting notes.
https://github.com/vivmost/pocket-notes

css html js react

Last synced: about 23 hours ago
JSON representation

Pocket Notes, an app designed for efficient note storage within organized groups. Users can create and manage groups, each providing a structured environment for storing, retrieving, and deleting notes.

• Host: GitHub
• URL: https://github.com/vivmost/pocket-notes
• Owner: vivmost
• Created: 2024-07-02T17:40:19.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-08-10T15:15:28.000Z (5 months ago)
• Last Synced: 2024-08-10T17:33:56.297Z (5 months ago)
• Topics: css, html, js, react
• Language: JavaScript
• Homepage: https://poket-notes.netlify.app
• Size: 258 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Notes Application

## Overview

This React application is designed for creating, selecting, and displaying notes. It includes various components and features for managing notes effectively.

## Key Concepts

1. **React Components:**

   - Functional components for different aspects of note management.

   - Use of `useContext` hook to access shared state.

2. **React Hooks:**

   - Utilization of `useState` for managing local component state.

   - Use of `useEffect` for handling side effects and lifecycle events.

3. **Context API:**

   - Implementation of the `AppContext` for sharing state across components.

4. **Conditional Rendering:**

   - Conditional display of components based on certain conditions.

5. **Event Handling:**

   - Definition of various event handlers for user interactions.

6. **CSS Styling:**

   - Styling done using CSS with features like flexbox, grid, and media queries.

   - Use of CSS modules for scoped styling.

7. **React Router:**

   - Possible usage of React Router for navigation.

## Components

1. **SelectNotes**

   - Component for selecting notes.

   - Uses the `AppContext` for shared state.

2. **NoteHeading**

   - Component representing a note heading.

   - Utilizes the `useContext` hook.

3. **CreateNote**

   - Component for creating new notes.

   - Implements random letter generation for note groups.

   - Uses the `useState` and `useEffect` hooks.

4. **NoteSection**

   - Main component for displaying and adding notes.

   - Uses the `AppContext` for shared state.

   - Implements conditional rendering and event handling.

## Hooks

- **useState**: Used for managing local component state.

- **useEffect**: Used for handling side effects and lifecycle events.

- **useContext**: Used for accessing shared state.

## Styling

- CSS is used for styling with features like flexbox, grid, and media queries.

- CSS modules are employed for scoped styling.

## Usage

1. Install dependencies: `npm install`

2. Run the application: `npm start`

## Getting Started

Follow these steps to set up and run the Notes Application on your local machine.

### Prerequisites

- Node.js and npm installed on your machine.