{"id":24840455,"url":"https://github.com/hoangsonww/collabnote-fullstack-app","last_synced_at":"2025-04-12T10:36:23.604Z","repository":{"id":273884919,"uuid":"921178260","full_name":"hoangsonww/CollabNote-Fullstack-App","owner":"hoangsonww","description":"✨ CollabNote is a full-stack note-taking app built with a modern NNS tech-stack: NestJS, Next.js, Vite, and Supabase, designed for collaborative note management. It features user authentication, note sharing, responsive design, and API documentation, making it an efficient and modern tool for organizing and sharing notes.","archived":false,"fork":false,"pushed_at":"2025-04-09T15:43:14.000Z","size":6515,"stargazers_count":22,"open_issues_count":0,"forks_count":16,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-04-09T16:48:10.480Z","etag":null,"topics":["apollo","full-stack","fullstack-development","graphql","nest","nestjs","nestjs-backend","nextjs","notes","notes-app","postgres","postgresql","react","reactjs","shadcn","shadcn-ui","sql","supabase","typescript","vite"],"latest_commit_sha":null,"homepage":"https://collabnote-app.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoangsonww.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-23T13:43:14.000Z","updated_at":"2025-04-09T15:43:17.000Z","dependencies_parsed_at":"2025-04-09T16:35:03.028Z","dependency_job_id":"42f979a7-417f-440c-9b8c-8087baa87c8b","html_url":"https://github.com/hoangsonww/CollabNote-Fullstack-App","commit_stats":null,"previous_names":["hoangsonww/collabnote-fullstack-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FCollabNote-Fullstack-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FCollabNote-Fullstack-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FCollabNote-Fullstack-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FCollabNote-Fullstack-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoangsonww","download_url":"https://codeload.github.com/hoangsonww/CollabNote-Fullstack-App/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248554175,"owners_count":21123614,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo","full-stack","fullstack-development","graphql","nest","nestjs","nestjs-backend","nextjs","notes","notes-app","postgres","postgresql","react","reactjs","shadcn","shadcn-ui","sql","supabase","typescript","vite"],"created_at":"2025-01-31T06:56:58.849Z","updated_at":"2025-04-12T10:36:23.269Z","avatar_url":"https://github.com/hoangsonww.png","language":"TypeScript","readme":"# CollabNote - A NestJS, Next.js, Vite, and Supabase Fullstack Notetaking App\n\n[![NestJS](https://img.shields.io/badge/NestJS-v11.0.0-E0234E?style=for-the-badge\u0026logo=nestjs)](https://nestjs.com/)\n[![Next.js](https://img.shields.io/badge/Next.js-v12.0.7-000000?style=for-the-badge\u0026logo=next.js)](https://nextjs.org/)\n[![React](https://img.shields.io/badge/React-v17.0.2-61DAFB?style=for-the-badge\u0026logo=react)](https://reactjs.org/)\n[![Vite](https://img.shields.io/badge/Vite-v6.0.5-646CFF?style=for-the-badge\u0026logo=vite)](https://vitejs.dev/)\n[![Supabase](https://img.shields.io/badge/Supabase-v1.0.0-000000?style=for-the-badge\u0026logo=supabase)](https://supabase.io/)\n[![PostgreSQL](https://img.shields.io/badge/PostgreSQL-v15-336791?style=for-the-badge\u0026logo=postgresql)](https://www.postgresql.org/)\n[![Material UI](https://img.shields.io/badge/Material%20UI-v5.0.0-007FFF?style=for-the-badge\u0026logo=mui)](https://mui.com/)\n[![Swagger](https://img.shields.io/badge/Swagger-v4.1.6-85EA2D?style=for-the-badge\u0026logo=swagger)](https://swagger.io/)\n[![GraphQL](https://img.shields.io/badge/GraphQL-v15.5.0-E10098?style=for-the-badge\u0026logo=graphql)](https://graphql.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.6.2-3178C6?style=for-the-badge\u0026logo=typescript)](https://www.typescriptlang.org/)\n[![Docker](https://img.shields.io/badge/Docker-v20.10.8-2496ED?style=for-the-badge\u0026logo=docker)](https://www.docker.com/)\n[![Nginx](https://img.shields.io/badge/Nginx-v1.21.4-269539?style=for-the-badge\u0026logo=nginx)](https://nginx.org/)\n[![Jenkins](https://img.shields.io/badge/Jenkins-v2.319-000000?style=for-the-badge\u0026logo=jenkins)](https://www.jenkins.io/)\n\nCollabNote is a collaborative notes platform designed to help you take, share, and manage notes effectively. It features a user-friendly interface, powerful backend APIs, and seamless deployment for both frontend and backend.\n\n## Table of Contents\n- [💡 Features](#-features)\n- [🚀 Deployment](#-deployment)\n- [🎯 Tech Stack](#-tech-stack)\n- [🖼️ UI Overview](#-ui-overview)\n- [📂 Project Structure](#-project-structure)\n- [🛠️ Getting Started](#-getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n  - [Running Locally](#running-locally)\n  - [Using Docker](#using-docker)\n- [📖 API Documentation](#-api-documentation)\n  - [API Endpoints](#api-endpoints)\n  - [Database Schema](#database-schema)\n  - [Detailed Guide for Using the `openapi.yaml` File](#detailed-guide-for-using-the-openapiyaml-file)\n- [🖥️ GraphQL Integration](#-graphql-integration)\n- [🧰 Nginx Configuration](#-nginx-configuration)\n- [🌐 Kubernetes Deployment](#-kubernetes-deployment)\n- [👨🏻‍💻 Continuous Integration and Deployment with Jenkins](#-continuous-integration-and-deployment-with-jenkins)\n- [🧪 Testing](#-testing)\n  - [Backend Tests](#backend-tests)\n  - [Frontend Tests](#frontend-tests)\n- [🤝 Contributing](#-contributing)\n- [📄 License](#-license)\n- [🎉 Acknowledgments](#-acknowledgments)\n\n## 💡 Features\n\n- **Authentication**: Secure user login, registration, and password management.\n- **Notes Management**: Create, update, delete, and reorder notes.\n- **Sharing**: Share notes with other users seamlessly.\n- **Syncing**: Real-time syncing of notes across devices, and across users, thanks to Supabase.\n- **Collaboration**: Collaborate with others on notes in real-time.\n- **Search**: Search for notes by title or content.\n- **User Profiles**: Manage and search user profiles.\n- **Profile Settings**: Update user profile information.\n- **Dark Mode**: Toggle between light and dark themes.\n- **Testing**: Unit and integration tests for backend and frontend.\n- **Responsive Design**: Works on all devices and screen sizes.\n- **Swagger Documentation**: Comprehensive API documentation.\n- **CI/CD Pipeline**: Jenkins pipeline for automated testing and deployment.\n\n## 🚀 Deployment\n\nThe app is deployed on Vercel for the frontend. You can access the live app at [CollabNote](https://collabnote-app.vercel.app/).\n\nAdditionally, the backend API is deployed on Render. You can access the API documentation at [CollabNote API](https://collabnote-fullstack-app.onrender.com/).\n\nThe backup frontend is also hosted on Netlify, which you can access at [CollabNote Netlify](https://notesapp-nestjs.netlify.app/).\n\n\u003e Note: The backend API may spin down due to inactivity. If you encounter any issues, please try again later. If inactive, the API may take a few seconds to start up, so frontend requests and Swagger may take some time to load initially.\n\n\u003e Important: Supabase may pause the app's database if it exceeds the free tier limits. Thus, if you are unable to log in or register, [let me know](mailto:hoangson091104@gmail.com) and I will re-enable it (and it may take a while...)\n\n## 🎯 Tech Stack\n\n| Technology                                    | Description                         |\n|-----------------------------------------------|-------------------------------------|\n| [NestJS](https://nestjs.com/)                 | Backend framework for scalable APIs |\n| [Next.js](https://nextjs.org/)                | React-based framework for SSR       |\n| [React](https://reactjs.org/)                 | Frontend library for building UI    |\n| [Vite](https://vitejs.dev/)                   | Frontend build tool                 |\n| [Supabase](https://supabase.io/)              | Backend-as-a-service for auth \u0026 DB  |\n| [PostgreSQL](https://www.postgresql.org/)     | Database for storing app data       |\n| [TypeScript](https://www.typescriptlang.org/) | Type-safe development               |\n| [Swagger](https://swagger.io/)                | API documentation and testing tool  |\n| [Docker](https://www.docker.com/)             | Containerization for apps           |\n| [Nginx](https://nginx.org/)                   | Web server for load balancing       |\n| [Jenkins](https://www.jenkins.io/)            | CI/CD tool for automated testing    |\n| [Render](https://render.com/)                 | Cloud platform for hosting apps     |\n| [Vercel](https://vercel.com/)                 | Cloud platform for frontend hosting |\n| [GraphQL](https://graphql.org/)               | Query language for APIs             |\n\n## 🖼️ UI Overview\n\n### Home Page\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/home.png\" alt=\"Login Page\" /\u003e\n\u003c/p\u003e\n\n### Home Page - Dark Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/home-dark.png\" alt=\"Login Page - Dark Mode\" /\u003e\n\u003c/p\u003e\n\n### Notes Dashboard\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/notes.png\" alt=\"Notes Dashboard\" /\u003e\n\u003c/p\u003e\n\n### Notes Dashboard - Dark Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/notes-dark.png\" alt=\"Notes Dashboard - Dark Mode\" /\u003e\n\u003c/p\u003e\n\n### Add Note Modal\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/add-note.png\" alt=\"Add Note Modal\" /\u003e\n\u003c/p\u003e\n\n### Note Details Modal\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/note-details.png\" alt=\"Note Details Page\" /\u003e\n\u003c/p\u003e\n\n### Note Editor\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/edit-note.png\" alt=\"Note Editor\" /\u003e\n\u003c/p\u003e\n\n### Profile Page\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/profile.png\" alt=\"Profile Page\" /\u003e\n\u003c/p\u003e\n\n### Profile Page - Dark Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/profile-dark.png\" alt=\"Profile Page - Dark Mode\" /\u003e\n\u003c/p\u003e\n\n### Login Page\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/login.png\" alt=\"Login Page\" /\u003e\n\u003c/p\u003e\n\n### Login Page - Dark Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/login-dark.png\" alt=\"Login Page - Dark Mode\" /\u003e\n\u003c/p\u003e\n\n### Register Page\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/register.png\" alt=\"Register Page\" /\u003e\n\u003c/p\u003e\n\n### Register Page - Dark Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/register-dark.png\" alt=\"Register Page - Dark Mode\" /\u003e\n\u003c/p\u003e\n\n### Reset Password Page\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/reset-password.png\" alt=\"Reset Password Page\" /\u003e\n\u003c/p\u003e\n\n### Reset Password Page - Dark Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/reset-password-dark.png\" alt=\"Reset Password Page - Dark Mode\" /\u003e\n\u003c/p\u003e\n\n### API Documentation\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/api-docs.png\" alt=\"Swagger Documentation\" /\u003e\n\u003c/p\u003e\n\n## 📂 Project Structure\n\n```\nDocuThinker-AI-App/\n├── backend/\n│   ├── src/\n│   │   ├── auth/\n│   │   │   ├── auth.module.ts        # Authentication module\n│   │   │   ├── auth.controller.ts    # Authentication controller\n│   │   │   ├── auth.service.ts       # Authentication service\n│   │   │   ├── auth.schema.ts        # Authentication schema\n│   │   │   ├── auth.resolver.ts      # Authentication resolver\n│   │   │   └── jwt.strategy.ts       # JWT authentication strategy\n│   │   ├── dto/\n│   │   │   ├── create-note.input.ts  # Create note DTO\n│   │   │   └── update-note.input.ts  # Update note DTO\n│   │   ├── notes/\n│   │   │   ├── notes.schema.ts       # Notes schema\n│   │   │   ├── notes.resolver.ts     # Notes resolver\n│   │   │   ├── notes.module.ts       # Notes module\n│   │   │   ├── notes.controller.ts   # Notes controller\n│   │   │   └── notes.service.ts      # Notes service\n│   │   ├── profile/\n│   │   │   ├── profile.schema.ts     # Profile schema\n│   │   │   ├── profile.resolver.ts   # Profile resolver\n│   │   │   ├── profile.module.ts     # Profile module\n│   │   │   ├── profile.controller.ts # Profile controller\n│   │   │   └── profile.service.ts    # Profile service\n│   │   ├── supabase/\n│   │   │   ├── supabase.module.ts    # Supabase module\n│   │   │   └── supabase.service.ts   # Supabase service\n│   │   ├── types/\n│   │   │   └── authenticated-request.ts  # Authenticated user type\n│   │   ├── schema.gql                # GraphQL schema \n│   │   ├── app.module.ts             # Main app module\n│   │   ├── app.test.ts               # App test file\n│   │   └── main.ts                   # Main entry point for the backend\n│   ├── .env                          # Environment variables (git-ignored)\n│   ├── build-backend.sh              # Shell script to build the backend\n│   ├── Dockerfile                    # Docker configuration file\n│   ├── docker-compose.yml            # Docker Compose file for the backend\n│   ├── package.json                  # Project dependencies and scripts\n│   ├── package-lock.json             # Lock file for dependencies\n│   ├── tsconfig.json                 # TypeScript configuration file\n│   └── vercel.json                   # Vercel configuration file\n│\n├── frontend/\n│   ├── public/\n│   │   ├── favicon.ico               # Favicon for the app\n│   │   ├── (other images...)         # Other images used in the app\n│   │   ├── index.html                # Main HTML template\n│   │   └── manifest.json             # Manifest for PWA settings\n│   ├── src/\n│   │   ├── assets/                   # Static assets like images and fonts\n│   │   │   └── logo.png              # App logo or images\n│   │   ├── components/\n│   │   │   ├── LoadingOverlay.tsx    # Loading overlay component\n│   │   │   └── PasswordField.tsx     # Password field component\n│   │   ├── layout/\n│   │   │   ├── ResponsiveDrawer.tsx  # Responsive drawer component\n│   │   │   ├── Footer.tsx            # Footer component\n│   │   │   ├── Layout.tsx            # Main layout component\n│   │   │   └── Navbar.tsx            # Navbar component\n│   │   ├── routes/\n│   │   │   ├── ForgotPasswordPage.tsx   # Forgot password page\n│   │   │   ├── HomePage.tsx          # Home page\n│   │   │   ├── LoginPage.tsx         # Login page\n│   │   │   ├── NoteDetailsPage.tsx   # Note details page\n│   │   │   ├── NotesPage.tsx         # Notes dashboard page\n│   │   │   ├── ProfilePage.tsx       # Profile page\n│   │   │   └── RegisterPage.tsx      # Register page\n│   │   ├── theme/\n│   │   │   ├── index.ts              # Theme configuration\n│   │   │   ├── ThemeContext.tsx      # Theme context provider\n│   │   │   └── ThemeProviderWrapper.tsx  # Theme provider wrapper\n│   │   ├── App.tsx                   # Main App component\n│   │   ├── App.test.tsx              # App test file\n│   │   ├── App.css                   # Global CSS 1\n│   │   ├── index.css                 # Global CSS 2\n│   │   ├── main.tsx                  # Main entry point for the frontend\n│   │   └── vite-env.d.ts             # Vite environment types\n│   ├── .gitignore                    # Git ignore file\n│   ├── package.json                  # Project dependencies and scripts\n│   ├── package-lock.json             # Lock file for dependencies\n│   ├── Dockerfile                    # Docker configuration file\n│   ├── docker-compose.yml            # Docker Compose file for the frontend\n│   ├── index.html                    # Main HTML template\n│   ├── build-frontend.sh             # Shell script to build the frontend\n│   ├── vercel.json                   # Vercel configuration file\n│   ├── vite.config.ts                # Vite configuration file\n│   ├── tsconfig.app.json             # TypeScript configuration file for the app\n│   ├── tsconfig.node.json            # TypeScript configuration file for Node\n│   └── tsconfig.json                 # TypeScript configuration file\n│\n├── kubernetes/                       # Kubernetes configuration files\n│   ├── backend-deployment.yaml       # Deployment configuration for the backend\n│   ├── backend-service.yaml          # Service configuration for the backend\n│   ├── frontend-deployment.yaml      # Deployment configuration for the frontend\n│   ├── frontend-service.yaml         # Service configuration for the frontend\n│   └── configmap.yaml                # ConfigMap configuration for environment variables\n│\n├── nginx/\n│   ├── start_nginx.sh                # Shell script to start NGINX\n│   ├── nginx.conf                    # NGINX configuration file for load balancing and caching\n│   ├── docker-compose.yml            # Docker Compose file for NGINX\n│   └── Dockerfile                    # Docker configuration file for NGINX\n│\n├── images/                           # Images for the README\n├── .env                              # Environment variables file for the whole app\n├── docker-compose.yml                # Docker Compose file for containerization\n├── package.json                      # Project dependencies and scripts\n├── package-lock.json                 # Lock file for dependencies\n├── vercel.json                       # Vercel configuration file\n├── openapi.yaml                      # OpenAPI specification for API documentation\n├── jenkins_cicd.sh                   # Shell script for managing the Jenkins CI/CD pipeline\n├── .gitignore                        # Git ignore file\n├── LICENSE                           # License file for the project\n├── README.md                         # Comprehensive README for the whole app\n└── (and many more files...)          # Additional files and directories not listed here\n```\n\n## 🛠️ Getting Started\n\nFollow these steps to set up the project on your local machine.\n\n### Prerequisites\n\nEnsure you have the following installed:\n- **Node.js**: v18 or above\n- **npm**: v9 or above\n- **PostgreSQL**: v15 or above\n- **Docker** (Optional)\n\n### Installation\n\n1. **Clone the Repository**:\n   ```bash\n   git clone https://github.com/hoangsonww/CollabNote-Fullstack-App.git\n   cd CollabNote-Fullstack-App\n   ```\n\n2. **Set Up Backend**:\n   ```bash\n   cd backend\n   npm install\n   ```\n\n3. **Set Up Frontend**:\n   ```bash\n   cd ../frontend\n   npm install\n   ```\n\n4. **Configure Environment Variables**:\n- Create `.env` files in the `backend` and `frontend` directories.\n- For **backend** (`backend/.env`):\n  ```env\n  SUPABASE_URL=your_supabase_url\n  SUPABASE_SERVICE_KEY=your_supabase_service_key\n  JWT_SECRET=your_jwt_secret\n  JWT_EXPIRES_IN=jwt_expiry_time(eg. 1d)\n  PORT=4000\n  ```\n- For **frontend** (`frontend/.env`):\n  ```env\n  VITE_API_URL=http://localhost:4000\n  ```\n\n### Running Locally\n\n1. **Start the Backend**:\n   ```bash\n   cd backend\n   npm run start:dev\n   ```\n\n2. **Start the Frontend**:\n   ```bash\n   cd ../frontend\n   npm run dev\n   ```\n\n3. Open your browser:\n- **Frontend**: [http://localhost:5172](http://localhost:5172) or your selected Vite port\n- **Backend**: [http://localhost:4000](http://localhost:4000)\n- **Swagger**: [http://localhost:4000/api](http://localhost:4000/api)\n\n### Using Docker\n\n1. **Build and Run Docker Containers**:\n   ```bash\n   docker-compose up --build\n   ```\n\n2. **Access the Services**:\n- Backend: [http://localhost:4000](http://localhost:4000)\n- Frontend: [http://localhost:3000](http://localhost:3000)\n\n## 📖 API Documentation\n\nAll APIs are documented in Swagger. Access the documentation at [http://localhost:4000/api](http://localhost:4000/api).\n\n### API Endpoints\n\n| Method | Endpoint                   | Description                               |\n|--------|----------------------------|-------------------------------------------|\n| POST   | `/auth/register`           | Register a new user                       |\n| POST   | `/auth/login`              | Login an existing user                    |\n| POST   | `/auth/check-email-exists` | Check if an email exists                  |\n| POST   | `/auth/reset-password`     | Reset a user's password                   |\n| GET    | `/notes`                   | Retrieve user notes                       |\n| POST   | `/notes`                   | Create a new note                         |\n| PATCH  | `/notes/{id}`              | Update a note                             |\n| DELETE | `/notes/{id}`              | Delete a note                             |\n| POST   | `/notes/{id}/share`        | Share a note with another user            |\n| POST   | `/notes/reorder`           | Reorder user notes                        |\n| GET    | `/profile/me`              | Retrieve the authenticated user's profile |\n| GET    | `/profile/userId/{id}`     | Retrieve a user profile by ID             |\n| GET    | `/profile/search`          | Search for a user profile by username     |\n| PATCH  | `/profile/me`              | Update the authenticated user's profile   |\n\n### Database Schema\n\nThe database schema consists of the following tables:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/schema.png\" alt=\"Database Schema\" /\u003e\n\u003c/p\u003e\n\nNote the `user_id` foreign key relationship between the `notes` and `users` tables. Additionally, more tables will be added as the app grows in the future!\n\n### Detailed Guide for Using the `openapi.yaml` File\n\n1. **View the API Documentation**\n\n- Open [Swagger Editor](https://editor.swagger.io/).\n- Upload the `openapi.yaml` file or paste its content.\n- Visualize and interact with the API documentation.\n\n2. **Test the API**\n\n- Import `openapi.yaml` into [Postman](https://www.postman.com/):\n  - Open Postman → Import → Select `openapi.yaml`.\n  - Test the API endpoints directly from Postman.\n- Or use [Swagger UI](https://swagger.io/tools/swagger-ui/):\n  - Provide the file URL or upload it to view and test endpoints.\n\n3. **Generate Client Libraries**\n\n- Install OpenAPI Generator:\n  ```bash\n  npm install @openapitools/openapi-generator-cli -g\n  ```\n- Generate a client library:\n  ```bash\n  openapi-generator-cli generate -i openapi.yaml -g \u003clanguage\u003e -o ./client\n  ```\n- Replace `\u003clanguage\u003e` with the desired programming language.\n\n4. **Generate Server Stubs**\n\n- Generate a server stub:\n  ```bash\n  openapi-generator-cli generate -i openapi.yaml -g \u003cframework\u003e -o ./server\n  ```\n- Replace `\u003cframework\u003e` with the desired framework.\n\n5. **Run a Mock Server**\n\n- Install Prism:\n  ```bash\n  npm install -g @stoplight/prism-cli\n  ```\n- Start the mock server:\n  ```bash\n  prism mock openapi.yaml\n  ```\n\n6. **Validate the OpenAPI File**\n\n- Use [Swagger Validator](https://validator.swagger.io/):\n  - Upload `openapi.yaml` or paste its content to check for errors.\n\nThis guide enables you to view, test, and utilize the API.\n\n## **🖥️ GraphQL Integration**\n\nThe CollabNote API also supports GraphQL for querying and manipulating data.\n\nTo access, navigate to [https://collabnote-fullstack-app.onrender.com/graphql](https://collabnote-fullstack-app.onrender.com/graphql) and use the GraphQL Playground to interact with the API.\n\nAlternatively, you can start a local backend server following the steps above and access the GraphQL Playground at [http://localhost:4000/graphql](http://localhost:4000/graphql).\n\nYou should see something like this:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/graphql.png\" alt=\"GraphQL Playground\" /\u003e\n\u003c/p\u003e\n\nYou can query something like this:\n\n```graphql\nquery {\n  getUserNotes(userId: 1, searchQuery: \"\", tagFilter: \"\") {\n    id\n    title\n    content\n    tags\n    dueDate\n    color\n    pinned\n    sharedWithUserIds\n    sortOrder\n    username\n  }\n}\n```\n\nThis query fetches all notes for a user with ID 1. You can modify the query to suit your needs.\n\nFeel free to explore the GraphQL API and test different queries and mutations! Consult the [GraphQL documentation](https://graphql.org/learn/) for more information.\n\n## **🧰 Nginx Configuration**\n\n- The `nginx` directory contains an Nginx configuration for reverse proxy and load balancing.\n- Use Nginx to route requests to multiple instances of the API.\n- Configure SSL termination and caching for improved performance.\n- The Nginx configuration looks like this:\n\n```nginx\nserver {\n    listen 80;\n    server_name localhost;\n\n    location / {\n        proxy_pass http://localhost:3000;\n        proxy_http_version 1.1;\n        proxy_set_header Upgrade $http_upgrade;\n        proxy_set_header Connection 'upgrade';\n        proxy_set_header Host $host;\n        proxy_cache_bypass $http_upgrade;\n    }\n}\n```\n\n- For more information, refer to the [Nginx documentation](https://nginx.org/en/docs/) and the [Nginx Directory](nginx/README.md).\n\n## **🌐 Kubernetes Deployment**\n\n1. Create Kubernetes manifests for the services.\n2. Deploy to a cluster:\n   ```bash\n   kubectl apply -f kubernetes/\n   ```\n\n3. Access the application using the service URL.\n\n## **👨🏻‍💻 Continuous Integration and Deployment with Jenkins**\n\nThe CollabNote API also includes a Jenkins pipeline for continuous integration and deployment.\n\n1. **Pipeline Configuration:** The `Jenkinsfile` defines the CI/CD pipeline stages, including code checkout, dependency installation, testing, building, and deployment. Add it to the root of the project.\n\n2. **Job Setup:** Create a pipeline job in Jenkins, point it to the repository, and configure it to use the `Jenkinsfile`.\n\n3. **Automated Testing:** The pipeline runs `npm test` to ensure all tests pass before proceeding to the build or deployment stages.\n\n4. **Environment Variables:** Use Jenkins environment variables to securely manage secrets like API keys and credentials for services such as MongoDB, Redis, or Render.\n\n5. **Deployment:** The pipeline supports deploying the application using Render or directly to a server using SSH and PM2.\n\n6. **Webhooks:** Integrate GitHub/GitLab webhooks to trigger builds automatically on code changes.\n\n7. **Notifications:** Add Slack or email notifications in the pipeline to inform team members about build and deployment statuses.\n\n## 🧪 Testing\n\nWe also feature Jest unit and integration tests for both the backend and frontend. Run the tests to ensure the app functions as expected.\n\n### Backend Tests\n```bash\ncd backend\nnpm run test\n```\n\n### Frontend Tests\n```bash\ncd frontend\nnpm run test\n```\n\n## 🤝 Contributing\n\nContributions are welcome! Please fork the repository and create a pull request.\n\n## 📄 License\n\nThis project is licensed under the [MIT License](https://opensource.org/licenses/MIT).\n\n## 🎉 Acknowledgments\n\n- **Son Nguyen**: Creator and maintainer of CollabNote.\n- **NestJS, Next.js, React, Vite**: The tech stack that powers this project.\n\n---\n\nThank you for visiting CollabNote today! **Happy notetaking!** 📝🚀\n\n[🔝 Back to Top](#collabnote---a-nestjs-nextjs-vite-and-supabase-fullstack-notetaking-app)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Fcollabnote-fullstack-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoangsonww%2Fcollabnote-fullstack-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Fcollabnote-fullstack-app/lists"}