---

🗂️ Notebook Application (Full Stack)

A modern full-stack notes management app built with NestJS for the backend and Angular v20+ for the frontend. Includes authentication, profile management, file uploads, and full CRUD functionality — all wrapped in a responsive UI.

---

📚 Overview

The Notebook Application allows users to:

• ✅ Register and log in securely
• 👤 Manage personal profile info (including image upload via Cloudinary)
• 📝 Create, read, update, and delete personal notes
• 📧 Use password recovery features via email
• 📱 Enjoy a responsive UI built with Tailwind CSS

---

🏗️ Project Structure

This monorepo contains two main folders:

notebook-app/
├── notebook-backend/     # NestJS-based REST API
└── notebook-frontend/    # Angular frontend SPA

---

🧰 Technologies Used (Combined Stack)

🔙 Backend (NestJS)

• Framework: NestJS (v11+)
• Language: TypeScript
• Database: PostgreSQL
• ORM: Prisma
• Authentication: JWT + Passport.js + bcrypt
• Email Service: Nodemailer + Handlebars
• File Storage: Cloudinary
• Validation: class-validator & class-transformer
• API Docs: Swagger UI (@nestjs/swagger)

🔜 Frontend (Angular)

• Framework: Angular (v19+)
• Language: TypeScript
• Styling: Tailwind CSS
• HTTP Client: @angular/common/http (with provideHttpClient())
• Forms: Angular Reactive Forms
• Routing: Angular Router
• Architecture: Standalone Components + Route Guards

---

🚀 Getting Started (Full Stack)

✅ Prerequisites

Make sure the following are installed:

• Node.js v18+

• npm or Yarn

• Angular CLI:

  npm install -g @angular/cli

• PostgreSQL (running locally or remotely)

• Cloudinary account

• SMTP provider (e.g. GMAIL or Mailtrap.io for dev)

---

🔧 Step 1: Setup Backend

cd notebook-backend

Follow these steps:

1. Install backend dependencies:

   npm install

2. Configure environment variables:

   • Create a .env file (see backend README for full template)

3. Run database migrations:

   npx prisma migrate dev --name init_and_user_models

4. Start the NestJS dev server:

   npm run start:dev

📍 Backend will run on http://localhost:3000

---

💻 Step 2: Setup Frontend

Open a new terminal, then:

cd notebook-frontend

1. Install frontend dependencies:

   npm install

2. Set API endpoint: Update src/environments/environment.ts:

   export const environment = {
     production: false,
     apiUrl: 'http://localhost:3000',
   };

3. Start the Angular dev server:

   ng serve -o

📍 Frontend will open at http://localhost:4200

---

🧪 Usage Guide

Once both servers are running:

1. Open your browser to http://localhost:4200

2. You’ll be redirected to /login if not authenticated

3. From here you can:

   • 🔐 Register or log in
   • 📝 Access your notes dashboard
   • 👤 Update profile details and image
   • 🔑 Change your password
   • ❓ Use "Forgot Password" to reset credentials via email
   • 🚪 Log out anytime from the navbar

---

🔍 API Documentation

Swagger UI is available at:

http://localhost:3000/api-docs

Use it to:

• View all backend routes and DTOs
• Test endpoints directly in the browser
• Understand response structures and headers (especially for JWT use)

---

🤝 Contributing

This project is a great starting point to learn full-stack TypeScript development. Feel free to:

• Fork the repo
• Improve components, add features, or fix bugs
• Submit pull requests for enhancements

---

📘 Related Readmes

• 📦 Backend README
• 💻 Frontend README

---