Learnixo
All Projects
Full Stackintermediate View on GitHub

AI Notes App

Azure-native notes app with GPT-4o-mini AI features, Clean Architecture, and full CI/CD to Azure

1–2 hours to run locally15 technologies8 guided steps

About This Project

A production-ready full-stack notes application that demonstrates real-world Azure development practices: React + TypeScript frontend deployed to Azure Static Web Apps, ASP.NET Core backend on Azure App Service, Azure SQL Database with EF Core, and Azure OpenAI (GPT-4o-mini) powering AI features. All secrets stay backend-only — the frontend never touches an API key. Built with Clean Architecture (Domain / Application / Infrastructure / API layers), GitHub Actions CI/CD, and a polished accessible UI with dark mode, keyboard shortcuts, and PDF export.

What You'll Learn

Integrate Azure OpenAI into an ASP.NET Core API with backend-only key handling
Deploy a React SPA to Azure Static Web Apps and a .NET API to Azure App Service
Structure a full-stack project with Clean Architecture layers
Build a GitHub Actions CI/CD pipeline that deploys to Azure on push
Implement EF Core with Azure SQL Database using code-first migrations
Apply the Repository pattern in a real ASP.NET Core application

Key Features

✓Create, edit, delete, and pin notes with live character counter and input validation
✓Instant search across all notes (press / to focus)
✓AI: generate a full note from just a title via Azure OpenAI GPT-4o-mini
✓AI: summarise, rewrite, improve quality, and auto-generate tags for any note
✓AI-generated content badge + disclaimer on every AI-assisted note
✓Backend-only Azure OpenAI access — no API keys exposed to the browser
✓PDF export from the modal editor or note cards
✓Dark / Light mode toggle with system preference detection
✓Keyboard shortcuts: / (search), Ctrl+Enter (save), Esc (close), ? (help)
✓Clean Architecture: Domain → Application → Infrastructure → API layers
✓GitHub Actions CI/CD pipeline deploying to Azure App Service + Static Web Apps
✓Mobile-responsive card grid with accessible design

Project Structure

directory tree
ai-notes-app/
├── Backend/
│   ├── NotesApp.Api/          ← Controllers, Startup, appsettings
│   ├── NotesApp.Application/  ← Use cases, service interfaces, DTOs
│   ├── NotesApp.Domain/       ← Note entity, domain logic
│   └── NotesApp.Infrastructure/ ← EF Core, Azure OpenAI client, repositories
│
└── Frontend/
    └── notesapp-ui/
        └── src/
            ├── components/
            │   ├── ai/        ← AI toolbar, generated content badge
            │   ├── notes/     ← NoteCard, NoteEditor, NoteGrid
            │   ├── layout/    ← Header, Sidebar, ThemeToggle
            │   └── ui/        ← Modal, Button, Input primitives
            ├── features/      ← Search, tag management
            ├── hooks/         ← useNotes, useTheme, useKeyboard
            ├── services/      ← Axios API client wrappers
            └── utils/         ← PDF export, formatting

Setup Guide

1

Clone the repository

Clone the ai-notes-app repo and navigate into it.

bash
git clone https://github.com/asmanasir/ai-notes-app.git
cd ai-notes-app
2

Configure backend secrets

Create appsettings.Development.json in the API project with your Azure OpenAI and SQL connection strings. This file is git-ignored — never commit it.

json
# Backend/NotesApp.Api/appsettings.Development.json
{
  "ConnectionStrings": {
    "Default": "Server=localhost;Database=NotesApp;Trusted_Connection=True;"
  },
  "AzureOpenAI": {
    "ApiKey": "your-azure-openai-key",
    "Endpoint": "https://your-instance.openai.azure.com/",
    "DeploymentName": "gpt-4o-mini"
  }
}
3

Run EF Core migrations

Apply migrations to create the Notes table in your SQL database.

bash
cd Backend/NotesApp.Api
dotnet ef database update
4

Install frontend dependencies

Install npm packages for the React frontend.

bash
cd Frontend/notesapp-ui
npm install

Running the Project

1

Start the ASP.NET Core backend

Start the API on port 7110. Swagger UI is available at /swagger for exploring all endpoints.

bash
cd Backend/NotesApp.Api
dotnet run

# API: https://localhost:7110
# Swagger: https://localhost:7110/swagger
2

Start the React frontend

In a second terminal, start the Vite dev server on port 5173.

bash
cd Frontend/notesapp-ui
npm run dev

# Open: http://localhost:5173
3

Create a note and try AI features

Create a note, type a title, then use the AI toolbar to generate content, summarise, or auto-tag. Watch the AI badge appear on generated notes.

4

Test PDF export and keyboard shortcuts

Press / to open search, Ctrl+Enter to save, ? to see the shortcut list. Export any note to PDF from the card or editor.

Project Info

CategoryFull Stack
Difficultyintermediate
Setup time1–2 hours to run locally
Technologies15 tools

Tech Stack

ASP.NET Core Web APIC#Entity Framework CoreAzure SQL DatabaseAzure OpenAI (GPT-4o-mini)Azure App ServiceAzure Static Web AppsReact 18TypeScriptViteTailwind CSSAxiosLucide IconsGitHub ActionsClean Architecture

Prerequisites

  • .NET 8 SDK installed
  • Node.js 18+ installed
  • Azure subscription (free tier works — Azure OpenAI requires approval)
  • Azure OpenAI resource with GPT-4o-mini deployment
  • Azure SQL Database (or SQL Server locally for dev)
View Source on GitHub
AHK

Asma Hafeez Khan

Project Author

Built as an Azure portfolio project demonstrating the full stack: React on Azure Static Web Apps, .NET on Azure App Service, Azure SQL, and Azure OpenAI — all wired together with GitHub Actions CI/CD. Shows how to keep AI credentials backend-only while exposing AI features to the frontend safely.

Related Courses

AI for Developers Python & FastAPI Docker & Kubernetes