Note Application

A full-stack note-taking application built with Vue.js 3 frontend and .NET 8.0 backend, featuring rich text editing, folder organization, and Google OAuth authentication.

🏗️ Architecture

Frontend: Vue.js 3 + TypeScript + Vite + Tailwind CSS + TipTap Editor
Backend: .NET 8.0 Web API + Dapper ORM
Database: SQL Server 2022
Cache: Redis
Web Server: Nginx (for production)

📋 Prerequisites

Before running the application, ensure you have the following installed:

.NET 8.0 SDK - Download here
Node.js (v18 or higher) - Download here
Docker and Docker Compose - Download here
SQL Server (if running without Docker) - Download here

🚀 Quick Start

Option 1: Full Docker Setup (Recommended for Production)

Run all services using Docker Compose:

1. Build Frontend

First, build the frontend production files:

npm install
npm run build

This creates the dist/ directory that Nginx will serve.

2. Start All Services

docker-compose up -d

This will start:

SQL Server on port 1433
Redis on port 6379
Backend API (containerized) on port 5000
Nginx on ports 8080 (HTTP) and 8443 (HTTPS)

3. Access the Application

Frontend: http://localhost:8080
Backend API: http://localhost:5000
Swagger Documentation: Available at /swagger endpoint (if enabled)

To check service status:

docker-compose ps

To view logs:

docker-compose logs -f

Option 2: Hybrid Setup (Recommended for Development)

Run infrastructure services in Docker, but run frontend and backend locally for easier development.

1. Start Infrastructure Services Only

docker-compose up -d sqlserver redis

This starts only SQL Server and Redis containers.

2. Run Backend Locally

Navigate to the backend directory:

cd backend
dotnet run

The backend will be available at:

HTTP: http://localhost:5000
HTTPS: https://localhost:5001
Swagger UI: https://localhost:5001/swagger (in development mode)

3. Run Frontend Locally

In a new terminal, from the project root:

npm install
npm run dev

The frontend development server will be available at http://localhost:5173

4. Access the Application

Frontend (Development): http://localhost:5173
Backend API: http://localhost:5000 or https://localhost:5001
Swagger Documentation: https://localhost:5001/swagger

🛠️ Development Setup

For development, you can run the frontend and backend separately.

Backend Setup

Navigate to backend directory:
```
cd backend
```

Create a .env file in the project root (one level up from backend):

GOOGLE_CLIENT_ID=your-google-client-id-here
BACKEND_HTTP_PORT=5000
BACKEND_HTTPS_PORT=5001

Restore dependencies:
```
dotnet restore
```
Run the backend:
```
dotnet run
```
The backend will:
- Automatically initialize the database on first run
- Start on http://localhost:5000 and https://localhost:5001
- Enable Swagger UI in development mode

Frontend Setup

Install dependencies:
```
npm install
```
Run development server:
```
npm run dev
```
The frontend will be available at http://localhost:5173
Build for production:
```
npm run build
```
The built files will be in the dist/ directory.

🔧 Configuration

Database Connection

The database connection string is configured in backend/appsettings.json:

"ConnectionStrings": {
  "DefaultConnection": "Server=localhost,1433;Database=NoteApplicationDb;User Id=sa;Password=NoteApplication@Password123;TrustServerCertificate=True;"
}

Note: The database is automatically initialized on first run. If you need to reset it, you can use the provided script:

./reset-database.sh

JWT Settings

JWT authentication settings are in backend/appsettings.json:

"JwtSettings": {
  "SecretKey": "YourSuperSecretKeyThatShouldBeAtLeast32CharactersLong!",
  "Issuer": "NoteApplication",
  "Audience": "NoteApplicationUsers",
  "ExpirationMinutes": "60"
}

⚠️ Important: Change the SecretKey in production!

Google OAuth

Create a Google OAuth 2.0 Client ID in the Google Cloud Console

Add the Client ID to your .env file:

GOOGLE_CLIENT_ID=your-google-client-id-here

Or update it directly in backend/appsettings.json

CORS Configuration

The backend is configured to allow requests from:

http://localhost:5173 (Vite dev server)
http://localhost:3000 (Alternative frontend port)

To add more origins, update backend/Program.cs:

policy.WithOrigins("http://localhost:5173", "http://localhost:3000", "your-new-origin")

📁 Project Structure

Note_Application/
├── backend/                 # .NET 8.0 Web API
│   ├── Controllers/         # API Controllers
│   ├── Services/            # Business Logic
│   ├── Models/              # Data Models
│   ├── DTOs/                # Data Transfer Objects
│   ├── Data/                # Database Access
│   └── Program.cs           # Application Entry Point
├── src/                     # Vue.js Frontend
│   ├── components/          # Vue Components
│   ├── views/               # Page Views
│   ├── stores/              # Pinia State Management
│   ├── services/            # API Services
│   ├── router/               # Vue Router
│   └── main.ts              # Application Entry Point
├── dist/                    # Built Frontend Files
├── docker-compose.yml       # Docker Services Configuration
├── nginx.conf               # Nginx Configuration
└── package.json             # Frontend Dependencies

🔍 API Documentation

When running in development mode, Swagger UI is available at:

https://localhost:5001/swagger

The API includes:

Authentication: Register, Login, Google OAuth, Password Reset
Notes: CRUD operations for notes
Folders: CRUD operations for folders

🐳 Docker Services

The docker-compose.yml file includes:

SQL Server: Database server
Redis: Caching layer
Nginx: Web server for serving the frontend

To manage Docker services:

# Start services
docker-compose up -d

# Stop services
docker-compose down

# View logs
docker-compose logs -f

# Restart a specific service
docker-compose restart sqlserver

🧪 Testing

Check Database Connection

You can verify the database is running and accessible:

# Using the provided SQL script
cat check-database.sql | docker exec -i noteapp-sqlserver /opt/mssql-tools/bin/sqlcmd -S localhost -U sa -P "NoteApplication@Password123"

🐛 Troubleshooting

Backend Issues

Problem: Database connection fails

Solution: Ensure SQL Server is running (docker-compose up -d sqlserver)
Check the connection string in appsettings.json
Verify the database is initialized (check logs)

Problem: Port already in use

Solution: Change ports in .env file or Program.cs
Or stop the service using the port

Problem: JWT authentication not working

Solution: Verify JWT settings in appsettings.json
Ensure the SecretKey is at least 32 characters

Frontend Issues

Problem: Cannot connect to backend API

Solution: Check CORS configuration in backend/Program.cs
Verify backend is running on the correct port
Check API base URL in src/services/api.ts

Problem: Build fails

Solution: Run npm install to ensure all dependencies are installed
Clear node_modules and reinstall: rm -rf node_modules && npm install

Docker Issues

Problem: Docker containers won't start

Solution: Check if ports are already in use
Verify Docker is running: docker ps
Check logs: docker-compose logs

Problem: Database not initializing

Solution: Check backend logs for initialization errors
Ensure SQL Server container is healthy: docker-compose ps
Try restarting: docker-compose restart sqlserver

📝 Environment Variables

Quick Setup

Copy the example environment file:
```
cp .env.example .env
```

Edit .env and add your Google OAuth Client ID:

# Required: Google OAuth Client ID (for frontend Google Sign-In)
VITE_GOOGLE_CLIENT_ID=your-google-client-id-here

# Optional: Use real backend API (defaults to mock API if not set)
VITE_API_BASE_URL=http://localhost:5000/api
VITE_USE_MOCK_API=false

# Optional: Backend configuration (has defaults in appsettings.json)
GOOGLE_CLIENT_ID=your-google-client-id-here
BACKEND_HTTP_PORT=5000
BACKEND_HTTPS_PORT=5001

Environment Variables Explained

Frontend Variables:

VITE_GOOGLE_CLIENT_ID (Required for Google Sign-In): Get from Google Cloud Console
VITE_API_BASE_URL (Optional): Set to connect to real backend. If not set, frontend uses mock API
VITE_USE_MOCK_API (Optional): Set to false to use real API, true to force mock API

Backend Variables:

GOOGLE_CLIENT_ID (Optional): Overrides value in appsettings.json
BACKEND_HTTP_PORT (Optional): Defaults to 5000
BACKEND_HTTPS_PORT (Optional): Defaults to 5001

Note: The frontend will work with mock API (no backend required) if VITE_API_BASE_URL is not set. This allows you to test the frontend without setting up the backend first!

🔐 Security Notes

Never commit .env files or sensitive configuration
Change default JWT SecretKey in production
Update SQL Server password in production
Use HTTPS in production environments
Review CORS settings before deploying

📚 Additional Resources

📄 License

[Add your license information here]

Happy Coding! 🚀

Name		Name	Last commit message	Last commit date
backend		backend
dist		dist
node_modules		node_modules
src		src
.DS_Store		.DS_Store
Note_Application.sln		Note_Application.sln
README.md		README.md
docker-compose.override.yml.example		docker-compose.override.yml.example
docker-compose.yml		docker-compose.yml
index.html		index.html
nginx.conf		nginx.conf
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
reset-database.sh		reset-database.sh
tailwind.config.js		tailwind.config.js
test-token.sh		test-token.sh
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
view-database-files.sh		view-database-files.sh
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation