Aller au contenu principal

Notes App - Project Introduction

Overview​

The Notes App is a full-stack web application that allows users to create, manage, and organize personal notes. Built using the MERN stack (MongoDB, Express.js, React, Node.js), this application demonstrates modern web development practices with containerized deployment using Docker.

What This Application Does​

The Notes App provides a complete note-taking solution where users can:

  • Create accounts and authenticate - Users sign up with their name, email, and password to access their personal notes
  • Manage notes - Create, edit, delete, and organize notes with titles, content, and tags
  • Search functionality - Find specific notes by searching through titles and content
  • Pin important notes - Mark important notes to keep them at the top of the list
  • Secure access - All user data is protected with JWT (JSON Web Token) authentication

Architecture Overview​

This is a three-tier application with clear separation of concerns:

Frontend (Client Tier)​

  • Technology: React.js with Vite build tool
  • Location: frontend/notes-app/ directory
  • Purpose: Provides the user interface that runs in web browsers
  • Port: Runs on port 5173 during development

Backend (Application Tier)​

  • Technology: Node.js with Express.js framework
  • Location: backend/ directory
  • Purpose: Handles business logic, API endpoints, and authentication
  • Port: Runs on port 8000

Database (Data Tier)​

  • Technology: MongoDB
  • Purpose: Stores user accounts and notes data
  • Port: Runs on port 27017

Key Technologies Explained​

MERN Stack Components​

MongoDB: A NoSQL database that stores data in flexible, JSON-like documents. Perfect for storing notes with varying content and tags.

Express.js: A minimal web framework for Node.js that handles HTTP requests, routing, and middleware. It creates the REST API that the frontend communicates with.

React: A JavaScript library for building user interfaces. It creates interactive web pages that update dynamically without full page reloads.

Node.js: A JavaScript runtime that allows running JavaScript on the server side, enabling full-stack JavaScript development.

Supporting Technologies​

JWT (JSON Web Tokens): Used for secure user authentication. When users log in, they receive a token that proves their identity for subsequent requests.

Docker: Containerization technology that packages the application and its dependencies into portable containers, ensuring consistent deployment across different environments.

Vite: A modern build tool for the frontend that provides fast development server and optimized production builds.

Project Structure​

The application follows a monorepo structure with clear separation:

notes-app/
├── backend/           # Server-side application
├── frontend/          # Client-side application
├── docker-compose.yml # Container orchestration
└── README.md         # Project documentation

How the Components Work Together​

  1. User Interaction: Users interact with the React frontend through their web browser
  2. API Communication: The frontend sends HTTP requests to the Express.js backend API
  3. Authentication: The backend validates user credentials and issues JWT tokens
  4. Data Storage: The backend communicates with MongoDB to store and retrieve notes
  5. Response Flow: Data flows back through the same path to update the user interface

Development and Deployment​

The application uses Docker Compose to orchestrate multiple services:

  • Frontend container serving the React application
  • Backend container running the Node.js API
  • MongoDB container for data persistence

This containerized approach ensures that the application runs consistently across different development and production environments.

Next Steps​

This introduction provides the foundation for understanding the Notes App. The following documentation will dive deeper into each component:

  • Backend API architecture and endpoints
  • Frontend React components and user interface
  • Database models and data relationships
  • Authentication and security implementation
  • Deployment and containerization details