{"id":20271896,"url":"https://github.com/hoangsonww/studysync-study-buddy-app","last_synced_at":"2025-09-22T13:30:35.477Z","repository":{"id":262050395,"uuid":"886080467","full_name":"hoangsonww/StudySync-Study-Buddy-App","owner":"hoangsonww","description":"🎓 StudySync is a productivity app with tools like AI-powered study tips, music recommendations, a Pomodoro timer, and more to help enhance your study routine and stay organized. Welcome to a suite of tools designed to boost your study \u0026 productivity!","archived":false,"fork":false,"pushed_at":"2024-12-13T21:24:33.000Z","size":3167,"stargazers_count":14,"open_issues_count":0,"forks_count":14,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-12-13T22:25:46.700Z","etag":null,"topics":["artificial-intelligence","chatbot","express","expressjs","flashcards","full-stack","fullstack-development","machine-learning","node","nodejs","nodemon","pomodoro","study","vercel","vue","vue3","vuejs","webpack"],"latest_commit_sha":null,"homepage":"https://study-sync-app.vercel.app/","language":"Vue","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":"2024-11-10T06:12:23.000Z","updated_at":"2024-12-13T21:24:36.000Z","dependencies_parsed_at":"2024-12-13T22:22:37.918Z","dependency_job_id":null,"html_url":"https://github.com/hoangsonww/StudySync-Study-Buddy-App","commit_stats":null,"previous_names":["hoangsonww/studysync-study-buddy-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FStudySync-Study-Buddy-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FStudySync-Study-Buddy-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FStudySync-Study-Buddy-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FStudySync-Study-Buddy-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoangsonww","download_url":"https://codeload.github.com/hoangsonww/StudySync-Study-Buddy-App/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233851073,"owners_count":18740155,"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":["artificial-intelligence","chatbot","express","expressjs","flashcards","full-stack","fullstack-development","machine-learning","node","nodejs","nodemon","pomodoro","study","vercel","vue","vue3","vuejs","webpack"],"created_at":"2024-11-14T12:39:53.620Z","updated_at":"2025-09-22T13:30:35.249Z","avatar_url":"https://github.com/hoangsonww.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# StudySync - A Productivity and Study Companion App\n\nWelcome to **StudySync**! StudySync is a productivity and study tool designed to help users stay organized and efficient, built with **Vue and Express**. It includes a variety of features such as Pomodoro timers, music recommendations, weather checks, flashcards, to-do lists, and AI chat assistance. It integrates third-party services like Spotify for music and OpenWeather for weather data.\n\n## Table of Contents\n\n- [Features](#features)\n- [Live Deployment](#live-deployment)\n- [UI Screenshots](#ui-screenshots)\n  - [Home Page (Dashboard)](#home-page-dashboard)\n  - [Tools List](#tools-list)\n  - [Login Page](#login-page)\n  - [Register Page](#register-page)\n  - [Profile Page](#profile-page)\n  - [404 Page](#404-page)\n  - [Footer](#footer)\n- [Tech Stack](#tech-stack)\n  - [Frontend](#frontend)\n  - [Backend](#backend)\n  - [DevOps \u0026 Deployment](#devops--deployment)\n- [Getting Started](#getting-started)\n- [File Structure](#file-structure)\n- [API Documentation](#api-documentation)\n  - [Table of API Endpoints](#table-of-api-endpoints)\n  - [Backend Swagger Documentation](#backend-swagger-documentation)\n  - [OpenAPI Specification](#openapi-specification)\n  - [Example of calling the Music Recommendation API](#example-of-calling-the-music-recommendation-api)\n  - [Authentication](#authentication)\n- [NGINX Configuration](#nginx-configuration)\n- [Docker Configuration](#docker-configuration)\n  - [Building the Docker Containers](#building-the-docker-containers)\n- [The Creator](#the-creator)\n\n## Features\n\n- **Pomodoro Timer**: A built-in timer for Pomodoro study sessions.\n- **Music Recommendations**: Get music suggestions based on mood using Spotify.\n- **Flashcards**: Create, manage, and study flashcards.\n- **To-Do List**: Track study tasks and assignments.\n- **Calculator**: A scientific calculator for quick calculations.\n- **AI Chat**: Chat with an AI assistant for study tips, help, and queries.\n- **Weather Check**: Check the weather for any city using OpenWeather.\n- **Quick Notes**: Take and store quick notes for your studies.\n- **Daily Motivation**: Receive motivational quotes to keep you going.\n- **Study Tips**: Get study tips and advice for effective learning.\n- **User Authentication**: Register and login to access personalized features.\n- **User Profile**: Craft your profile with study interests and goals.\n- **Fully Responsive**: Works on all devices and screen sizes.\n- **And More!**: Explore the app for additional features and tools.\n\n## Live Deployment\n\nThe app is currently live at [https://study-sync-app.vercel.app/](https://study-sync-app.vercel.app/). You can explore the various features and functionalities of the app, including the Pomodoro timer, music recommendations, weather checks, and AI chat assistance.\n\nThe backend API is hosted on Render at [https://studysync-study-buddy-app.onrender.com](https://studysync-study-buddy-app.onrender.com/). The frontend is hosted on Vercel and communicates with the backend API for data retrieval and storage.\n\n\u003e **Note**: The app may take a while to spin up, which means it may take 2-3 minutes (max) to load the backend logic. This is due to Render's free tier resource limit, where we are only allocated 0.1 CPU and 512MB RAM. Thank you for your understanding!\n\n## UI Screenshots\n\nHere are some placeholder UI images for the app:\n\n### Home Page (Dashboard)\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"img/home_ui.png\" alt=\"Home Page UI\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n### Tools List\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"img/tools_ui.png\" alt=\"Pomodoro Timer UI\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n### Landing Page\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"img/landing_ui.png\" alt=\"Landing Page UI\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n### Login Page\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"img/login_ui.png\" alt=\"Music Recommendations UI\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n### Register Page\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"img/register_ui.png\" alt=\"Weather Check UI\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n### Forgot Password Page\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"img/forgot_ui.png\" alt=\"Forgot Password UI\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n### Profile Page\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"img/profile_ui.png\" alt=\"Profile Page UI\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n### 404 Page\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"img/404_ui.png\" alt=\"404 Page UI\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n### Footer\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"img/footer_ui.png\" alt=\"Footer UI\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n## Tech Stack\n\n### Frontend\n\n- **Vue.js** (JavaScript Framework)\n- **Vuetify** (Material Design Components)\n- **Axios** (HTTP Requests)\n- **Vuex** (State Management)\n- Markdown Rendering with `marked` (for AI-generated responses)\n- **Webpack** (Module Bundler)\n- **Babel** (JavaScript Compiler)\n- **ESLint** (Code Linter)\n- **Prettier** (Code Formatter)\n- **Vue Router** (Page Navigation)\n- **Vue CLI** (Vue Command Line Interface)\n\n### Backend\n\n- **Node.js with Express.js**\n- **MongoDB** (Database)\n- **JWT** (Authentication)\n- **Spotify API** (for music recommendations)\n- **OpenWeather API** (for weather data)\n- **Gemini API** (for AI chat functionality)\n- **Swagger** (API Documentation)\n- **OpenAPI** (API Specification)\n- **Nginx** (Reverse Proxy \u0026 Load Balancer)\n\n### DevOps \u0026 Deployment\n\n- **Git and GitHub** for version control\n- **Google Gemini** (for AI chat functionality)\n- **OpenWeather API** (for weather data)\n- **Docker** (for containerization)\n- **Jenkins** (for CI/CD)\n- **Vercel and Render** for deployment\n\n## Getting Started\n\nTo get started with **StudySync**, you can follow the setup instructions below. The project is divided into two main parts: the frontend and the backend. The frontend is built using Vue.js and Vuetify, while the backend is built using Node.js and Express.js. The backend uses MongoDB as the database.\n\n1. **Clone the repository**:\n   ```bash\n   git clone https://github.com/hoangsonww/StudySync-Study-Buddy-App.git\n   cd StudySync-Study-Buddy-App\n   ```\n2. **Set up the backend**:\n   - Navigate to the `backend` directory:\n     ```bash\n     cd backend\n     ```\n   - Install backend dependencies:\n     ```bash\n     npm install\n     ```\n   - Set up environment variables by creating a `.env` file:\n     ```\n     SPOTIFY_CLIENT_ID=\u003cyour-spotify-client-id\u003e\n     SPOTIFY_CLIENT_SECRET=\u003cyour-spotify-client-secret\u003e\n     OPENWEATHER_API_KEY=\u003cyour-openweather-api-key\u003e\n     JWT_SECRET=\u003cyour-jwt-secret\u003e\n     GEMINI_API_TOKEN=\u003cyour-gemini-api-token\u003e\n     PORT=5000\n     MONGO_URI=\u003cyour-mongo-uri\u003e\n     AI_INSTRUCTION=\u003cyour-ai-instruction\u003e\n     ```\n   - Start the backend server:\n     ```bash\n     npm start\n     ```\n   - The backend server will start on `http://localhost:5000`.\n3. **Set up the frontend**:\n\n   - Navigate to the `frontend` directory:\n     ```bash\n     cd frontend/study-sync-app\n     ```\n   - Install frontend dependencies:\n     ```bash\n     npm install\n     ```\n   - Set up the frontend `.env` file with the API base URL:\n     ```\n     VUE_APP_API_URL=http://localhost:5000/api\n     ```\n   - Start the frontend development server:\n     ```bash\n     npm run serve\n     ```\n   - Open your browser and go to `http://localhost:8081` to view the app. (The URL may vary based on the port used by Vue CLI - check the terminal output for the correct URL.)\n\n4. **Explore the app**:\n\n   You can now explore the **StudySync** app by navigating through the various features and functionalities. You can use the Pomodoro timer, check the weather, get music recommendations, chat with the AI, and more.\n\n5. **Contribute**:\n\n   If you would like to contribute to the project, feel free to fork the repository and submit a pull request with your changes. We welcome contributions from the community!\n\n## File Structure\n\n```plaintext\nStudySync-Study-Buddy-App/\n│\n├── backend/                            # Backend (Node.js + Express)\n│   ├── config/                         # Database and configuration files\n│   │   └── db.js                       # Database connection\n│   ├── swagger/                        # Swagger API documentation\n│   │   └── swagger.js                  # Swagger setup\n│   ├── controllers/                    # Controllers handling requests\n│   │   └── controllers.js              # Main controller file\n│   ├── middleware/                     # Middleware for authentication\n│   │   └── middleware.js               # Auth middleware to protect routes\n│   ├── models/                         # Mongoose models (User, Group)\n│   │   └── models.js                   # Mongoose models\n│   ├── routes/                         # API Routes for endpoints\n│   │   └── routes.js                   # Route definitions\n│   ├── services/                       # External services (AI, Weather, Spotify)\n│   │   └── services.js                 # Helper functions for services\n│   ├── views/                          # Views (if using any templating engines)\n│   ├── .env                            # Environment variables for sensitive data\n│   ├── app.js                          # Main backend application file\n│   ├── package.json                    # Backend dependencies\n│   └── package-lock.json               # Lock file for backend dependencies\n│\n├── frontend/                           # Frontend (Vue.js + Vuetify)\n│   ├── public/                         # Static files (favicon, index.html)\n│   │   ├── favicon.ico                 # App favicon\n│   │   ├── index.html                  # HTML template\n│   ├── src/                            # Source code for frontend\n│   │   ├── assets/                     # Static assets (images, logos, etc.)\n│   │   │   ├── logo.png                # App logo\n│   │   │   └── logo.svg                # SVG logo\n│   │   ├── components/                 # Reusable Vue components\n│   │   │   ├── ChatAI.vue              # AI Chat component\n│   │   │   ├── FooterComponent.vue     # Footer component\n│   │   │   ├── MusicRecommendation.vue # Music recommendation component\n│   │   │   ├── NavbarComponent.vue     # Navbar component\n│   │   │   ├── SearchProfiles.vue      # Search profiles component\n│   │   │   ├── UserLogin.vue           # User login component\n│   │   │   ├── UserRegister.vue        # User registration component\n│   │   │   ├── UserProfile.vue         # User profiles component\n│   │   │   └── StudyGroup.vue          # Study group component\n│   │   ├── plugins/                    # Vue plugins (Vuetify, Axios)\n│   │   │   ├── webfonloader.js         # Webfont loader\n│   │   │   ├── axios.js                # Axios setup\n│   │   │   └── vuetify.js              # Vuetify setup\n│   │   ├── store/                      # Vuex store for global state management\n│   │   │   └── index.js                # Vuex store setup\n│   │   ├── router/                     # Vue Router for page navigation\n│   │   │   └── index.js                # Router setup\n│   │   ├── views/                      # Vue views for different pages\n│   │   │   ├── HomePage.vue            # Home page view\n│   │   │   └── DashboardPage.vue       # Dashboard view\n│   │   ├── api.js                      # API service for making HTTP requests\n│   │   ├── main.js                     # Main Vue application file\n│   │   └── App.vue                     # Main Vue component\n│   ├── .env                            # Environment variables for API URL\n│   ├── babel.config.js                 # Babel configuration\n│   ├── jsconfig.json                   # JavaScript configuration\n│   ├── vue.config.js                   # Vue configuration\n│   ├── package.json                    # Frontend dependencies\n│   └── package-lock.json               # Lock file for frontend dependencies\n│\n├── .env                                # Environment variables for API keys and secrets\n├── README.md                           # This README file\n└── package.json                        # Root package.json file for the entire project\n```\n\n## API Documentation\n\n### Table of API Endpoints\n\n| **API Endpoint**            | **Method** | **Description**                                            |\n|-----------------------------|------------|------------------------------------------------------------|\n| `/auth/register`            | POST       | Registers a new user with name, email, and password.       |\n| `/auth/login`               | POST       | Authenticates the user and returns a JWT token.            |\n| `/profile/:userId?`         | GET        | Retrieves the profile data of the authenticated user.      |\n| `/profile`                  | PUT        | Updates the profile information of the authenticated user. |\n| `/search`                   | GET        | Searches for user profiles based on the query.             |\n| `/weather`                  | GET        | Fetches weather data for a given city.                     |\n| `/groups`                   | POST       | Creates a new study group.                                 |\n| `/groups/:groupId/sessions` | POST       | Creates a new study session for the group.                 |\n| `/cities`                   | GET        | Provides city suggestions based on a query.                |\n| `/music`                    | GET        | Fetches music recommendations based on a mood.             |\n| `/ai-chat`                  | POST       | Allows users to chat with the AI for study assistance.     |\n\n### Backend Swagger Documentation\n\nThe backend API documentation is available at `http://localhost:5000/api-docs` after starting the backend server. The Swagger UI provides a detailed overview of the API endpoints, request parameters, and response data.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/swagger_ui.png\" alt=\"Swagger UI\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n### OpenAPI Specification\n\n#### 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. You can generate client libraries, server stubs, and run mock servers using the OpenAPI specification.\n\n### Authentication\n\nAll API endpoints require JWT authentication. Include the token in the `Authorization` header as follows:\n\n```plaintext\nAuthorization: Bearer \u003cyour-jwt-token\u003e\n```\n\n## NGINX Configuration\n\nThe NGINX configuration file for the reverse proxy and load balancer is available in the `nginx` directory. The configuration file is named `nginx.conf` and can be used to set up NGINX for the backend server.\n\n```nginx\nserver {\n    listen 80;\n    server_name localhost;\n\n    location / {\n        proxy_pass http://localhost:5000;\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\nThe NGINX configuration file sets up a reverse proxy to the backend server running on `http://localhost:5000`. It listens on port 80 and forwards all requests to the backend server.\n\n## Docker Configuration\n\nThe Docker configuration files for the backend and frontend are available in the `docker` directory. The `Dockerfile` and `docker-compose.yml` files can be used to build and run the Docker containers for the app.\n\n### Building the Docker Containers\n\nTo build the Docker containers for the backend and frontend, you can use the following command:\n\n```bash\ndocker compose up --build\n```\n\nThis command will build the Docker images for the backend and frontend and run the containers. You can access the app at `http://localhost:8081` after the containers are up and running.\n\n## The Creator\n\n- [Son Nguyen](https://github.com/hoangsonww)\n- [Email](mailto:hoangson091104@gmail.com)\n- [LinkedIn](https://www.linkedin.com/in/hoangsonw/)\n\n---\n\nWe hope you enjoy using **StudySync**! For any issues or feature requests, feel free to open an issue on the repository. Happy studying! 📚🚀\n\n---\n\n[Back to top](#studysync---a-productivity-and-study-companion-app)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Fstudysync-study-buddy-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoangsonww%2Fstudysync-study-buddy-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Fstudysync-study-buddy-app/lists"}