StudySync-Study-Buddy-App

KO | EN

gitlite — search

#hacktoberfest #react #typescript #golang #machine-learning #docker #macos #java #awesome #cli #kubernetes #pytorch #ios #mcp

StudySync-Study-Buddy-App

(★ 27)

🎓 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 & productivity!

StudySync-Study-Buddy-App Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# StudySync - A Productivity and Study Companion App

Welcome 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.

![Vue.js](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D)
![Vuetify](https://img.shields.io/badge/Vuetify-1867C0?style=for-the-badge&logo=vuetify&logoColor=AEDDFF)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![Vuex](https://img.shields.io/badge/Vuex-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D)
![Vue Router](https://img.shields.io/badge/Vue_Router-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D)
![Axios](https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=axios&logoColor=white)
![Marked](https://img.shields.io/badge/Marked-000000?style=for-the-badge&logo=markdown&logoColor=white)
![Material Design Icons](https://img.shields.io/badge/MDI-2196F3?style=for-the-badge&logo=material-design&logoColor=white)
![Roboto Font](https://img.shields.io/badge/Roboto-FF6F00?style=for-the-badge&logo=google-fonts&logoColor=white)
![Webfont Loader](https://img.shields.io/badge/Webfont_Loader-4285F4?style=for-the-badge&logo=google&logoColor=white)
![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![Node.js](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)
![Express.js](https://img.shields.io/badge/Express.js-404D59?style=for-the-badge&logo=express&logoColor=white)
![MongoDB](https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white)
![Mongoose](https://img.shields.io/badge/Mongoose-880000?style=for-the-badge&logo=mongoose&logoColor=white)
![JWT](https://img.shields.io/badge/JWT-black?style=for-the-badge&logo=JSON%20web%20tokens)
![bcrypt](https://img.shields.io/badge/bcrypt-338833?style=for-the-badge&logo=letsencrypt&logoColor=white)
![Body Parser](https://img.shields.io/badge/Body_Parser-000000?style=for-the-badge&logo=node.js&logoColor=white)
![CORS](https://img.shields.io/badge/CORS-FF6C37?style=for-the-badge&logo=cors&logoColor=white)
![dotenv](https://img.shields.io/badge/dotenv-ECD53F?style=for-the-badge&logo=.env&logoColor=black)
![Nodemon](https://img.shields.io/badge/Nodemon-76D04B?style=for-the-badge&logo=nodemon&logoColor=white)
![Webpack](https://img.shields.io/badge/Webpack-8DD6F9?style=for-the-badge&logo=webpack&logoColor=black)
![Babel](https://img.shields.io/badge/Babel-F9DC3E?style=for-the-badge&logo=babel&logoColor=black)
![ESLint](https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white)
![Prettier](https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=black)
![Vue CLI](https://img.shields.io/badge/Vue_CLI-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D)
![npm](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white)
![Core-js](https://img.shields.io/badge/Core--js-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![Swagger](https://img.shields.io/badge/Swagger-85EA2D?style=for-the-badge&logo=swagger&logoColor=black)
![OpenAPI](https://img.shields.io/badge/OpenAPI-6BA539?style=for-the-badge&logo=openapi-initiative&logoColor=white)
![Swagger UI](https://img.shields.io/badge/Swagger_UI-85EA2D?style=for-the-badge&logo=swagger&logoColor=black)
![JSDoc](https://img.shields.io/badge/JSDoc-6BA539?style=for-the-badge&logo=javascript&logoColor=white)
![Spotify API](https://img.shields.io/badge/Spotify_API-1ED760?style=for-the-badge&logo=spotify&logoColor=white)
![OpenWeather API](https://img.shields.io/badge/OpenWeather_API-E96E50?style=for-the-badge&logo=weatherapi&logoColor=white)
![Google Gemini AI](https://img.shields.io/badge/Google_Gemini_AI-8E75B2?style=for-the-badge&logo=google&logoColor=white)
![Docker](https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white)
![Docker Compose](https://img.shields.io/badge/Docker_Compose-2496ED?style=for-the-badge&logo=docker&logoColor=white)
![Kubernetes](https://img.shields.io/badge/Kubernetes-326CE5?style=for-the-badge&logo=kubernetes&logoColor=white)
![Nginx](https://img.shields.io/badge/Nginx-009639?style=for-the-badge&logo=nginx&logoColor=white)
![Jenkins](https://img.shields.io/badge/Jenkins-D24939?style=for-the-badge&logo=jenkins&logoColor=white)
![CI/CD](https://img.shields.io/badge/CI/CD-00ADD8?style=for-the-badge&logo=gitlab&logoColor=white)
![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)
![Render](https://img.shields.io/badge/Render-46E3B7?style=for-the-badge&logo=render&logoColor=white)
![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)
![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white)
![GitHub Actions](https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge&logo=github-actions&logoColor=white)
![Linux](https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black)
![Bash](https://img.shields.io/badge/Bash-4EAA25?style=for-the-badge&logo=gnu-bash&logoColor=white)
![Zsh](https://img.shields.io/badge/Zsh-F15A24?style=for-the-badge&logo=gnu-bash&logoColor=white)

## Table of Contents

- [Features](#features)
- [Live Deployment](#live-deployment)
- [UI Screenshots](#ui-screenshots)
- [Tech Stack](#tech-stack)
  - [Frontend](#frontend)
  - [Backend](#backend)
  - [DevOps & Deployment](#devops--deployment)
- [Getting Started](#getting-started)
- [File Structure](#file-structure)
- [API Documentation](#api-documentation)
  - [Table of API Endpoints](#table-of-api-endpoints)
  - [Backend Swagger Documentation](#backend-swagger-documentation)
  - [OpenAPI Specification](#openapi-specification)
  - [Example of calling the Music Recommendation API](#example-of-calling-the-music-recommendation-api)
  - [Authentication](#authentication)
- [NGINX Configuration](#nginx-configuration)
- [Docker Configuration](#docker-configuration)
  - [Building the Docker Containers](#building-the-docker-containers)
- [The Creator](#the-creator)

## Features

All the features of the StudySync app include:

- **Pomodoro Timer**: A built-in timer for Pomodoro study sessions.
- **Music Recommendations**: Get music suggestions based on mood using Spotify.
- **Flashcards**: Create, manage, and study flashcards.
- **To-Do List**: Track study tasks and assignments.
- **Calculator**: A scientific calculator for quick calculations.
- **AI Chat**: Chat with an AI assistant for study tips, help, and queries.
- **Study Planner**: Plan and schedule your study sessions.
- **Study Resources**: Access curated study materials and resources.
- **Progress Tracking**: Monitor your study progress and achievements.
- **Learning Goals**: Set and track your learning goals.
- **Quiz Section**: Take quizzes to test your knowledge on various subjects.
- **Weather Check**: Check the weather for any city using OpenWeather.
- **Quick Notes**: Take and store quick notes for your studies.
- **Daily Motivation**: Receive motivational quotes to keep you going.
- **Study Tips**: Get study tips and advice for effective learning.
- **User Authentication**: Register and login to access personalized features.
- **User Profile**: Craft your profile with study interests and goals.
- **Fully Responsive**: Works on all devices and screen sizes.
- **And More!**: Explore the app for additional features and tools.

## Live Deployment

The 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.

The 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.

> [!IMPORTANT]
> **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!

## UI Screenshots

Here are some UI screenshots for the app:

### Landing Page

### Home Page (Dashboard)

### Tools List

### Study Resources Page

### Study Planner Page

### Study Materials Page

### Learning Goals Page

### Progress Tracking Page

### Quiz Section

### Login Page

### Register Page

## Tech Stack

### Frontend

- **Vue.js** (JavaScript Framework)
- **Vuetify** (Material Design Components)
- **Axios** (HTTP Requests)
- **Vuex** (State Management)
- Markdown Rendering with `marked` (for AI-generated responses)
- **Webpack** (Module Bundler)
- **Babel** (JavaScript Compiler)
- **ESLint** (Code Linter)
- **Prettier** (Code Formatter)
- **Vue Router** (Page Navigation)
- **Vue CLI** (Vue Command Line Interface)

### Backend

- **Node.js with Express.js**
- **MongoDB** (Database)
- **JWT** (Authentication)
- **Spotify API** (for music recommendations)
- **OpenWeather API** (for weather data)
- **Gemini API** (for AI chat functionality)
- **Swagger** (API Documentation)
- **OpenAPI** (API Specification)
- **Nginx** (Reverse Proxy & Load Balancer)

### DevOps & Deployment

- **Git and GitHub** for version control
- **Google Gemini** (for AI chat functionality)
- **OpenWeather API** (for weather data)
- **Docker** (for containerization)
- **Jenkins** (for CI/CD)
- **Vercel and Render** for deployment

## Getting Started

To 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.

1. **Clone the repository**:
 ```bash
 git clone https://github.com/hoangsonww/StudySync-Study-Buddy-App.git
 cd StudySync-Study-Buddy-App
 ```
2. **Set up the backend**:
 - Navigate to the `backend` directory:
 ```bash
 cd backend
 ```
 - Install backend dependencies:
 ```bash
 npm install
 ```
 - Set up environment variables by creating a `.env` file:
 ```
 SPOTIFY_CLIENT_ID=<your-spotify-client-id>
 SPOTIFY_CLIENT_SECRET=<your-spotify-client-secret>
 OPENWEATHER_API_KEY=<your-openweather-api-key>
 JWT_SECRET=<your-jwt-secret>
 GEMINI_API_TOKEN=<your-gemini-api-token>
 PORT=5000
 MONGO_URI=<your-mongo-uri>
 AI_INSTRUCTION=<your-ai-instruction>
 ```
 - Start the backend server:
 ```bash
 npm start
 ```
 - The backend server will start on `http://localhost:5000`.
3. **Set up the frontend**:

- Navigate to the `frontend` directory:
     ```bash
     cd frontend/study-sync-app
     ```
   - Install frontend dependencies:
     ```bash
     npm install
     ```
   - Set up the frontend `.env` file with the API base URL:
     ```
     VUE_APP_API_URL=http://localhost:5000/api
     ```
   - Start the frontend development server:
     ```bash
     npm run serve
     ```
   - 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.)

4. **Explore the app**:

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.

5. **Contribute**:

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!

## File Structure

```plaintext
StudySync-Study-Buddy-App/
│
├── backend/                            # Backend (Node.js + Express)
│   ├── config/                         # Database and configuration files
│   │   └── db.js                       # Database connection
│   ├── swagger/                        # Swagger API documentation
│   │   └── swagger.js                  # Swagger setup
│   ├── controllers/                    # Controllers handling requests
│   │   └── controllers.js              # Main controller file
│   ├── middleware/                     # Middleware for authentication
│   │   └── middleware.js               # Auth middleware to protect routes
│   ├── models/                         # Mongoose models (User, Group)
│   │   └── models.js                   # Mongoose models
│   ├── routes/                         # API Routes for endpoints
│   │   └── routes.js                   # Route definitions
│   ├── services/                       # External services (AI, Weather, Spotify)
│   │   └── services.js                 # Helper functions for services
│   ├── views/                          # Views (if using any templating engines)
│   ├── .env                            # Environment variables for sensitive data
│   ├── app.js                          # Main backend application file
│   ├── package.json                    # Backend dependencies
│   └── package-lock.json               # Lock file for backend dependencies
│
├── frontend/                           # Frontend (Vue.js + Vuetify)
│   ├── public/                         # Static files (favicon, index.html)
│   │   ├── favicon.ico                 # App favicon
│   │   ├── index.html                  # HTML template
│   ├── src/                            # Source code for frontend
│   │   ├── assets/                     # Static assets (images, logos, etc.)
│   │   │   ├── logo.png                # App logo
│   │   │   └── logo.svg                # SVG logo
│   │   ├── components/                 # Reusable Vue components
│   │   │   ├── ChatAI.vue              # AI Chat component
│   │   │   ├── FooterComponent.vue     # Footer component
│   │   │   ├── MusicRecommendation.vue # Music recommendation component
│   │   │   ├── NavbarComponent.vue     # Navbar component
│   │   │   ├── SearchProfiles.vue      # Search profiles component
│   │   │   ├── UserLogin.vue           # User login component
│   │   │   ├── UserRegister.vue        # User registration component
│   │   │   ├── UserProfile.vue         # User profiles component
│   │   │   └── StudyGroup.vue          # Study group component
│   │   ├── plugins/                    # Vue plugins (Vuetify, Axios)
│   │   │   ├── webfonloader.js         # Webfont loader
│   │   │   ├── axios.js                # Axios setup
│   │   │   └── vuetify.js              # Vuetify setup
│   │   ├── store/                      # Vuex store for global state management
│   │   │   └── index.js                # Vuex store setup
│   │   ├── router/                     # Vue Router for page navigation
│   │   │   └── index.js                # Router setup
│   │   ├── views/                      # Vue views for different pages
│   │   │   ├── HomePage.vue            # Home page view
│   │   │   └── DashboardPage.vue       # Dashboard view
│   │   ├── api.js                      # API service for making HTTP requests
│   │   ├── main.js                     # Main Vue application file
│   │   └── App.vue                     # Main Vue component
│   ├── .env                            # Environment variables for API URL
│   ├── babel.config.js                 # Babel configuration
│   ├── jsconfig.json                   # JavaScript configuration
│   ├── vue.config.js                   # Vue configuration
│   ├── package.json                    # Frontend dependencies
│   └── package-lock.json               # Lock file for frontend dependencies
│
├── .env                                # Environment variables for API keys and secrets
├── README.md                           # This README file
└── package.json                        # Root package.json file for the entire project
```

## API Documentation

### Table of API Endpoints

| **API Endpoint**            | **Method** | **Description**                                            |
| --------------------------- | ---------- | ---------------------------------------------------------- |
| `/auth/register`            | POST       | Registers a new user with name, email, and password.       |
| `/auth/login`               | POST       | Authenticates the user and returns a JWT token.            |
| `/profile/:userId?`         | GET        | Retrieves the profile data of the authenticated user.      |
| `/profile`                  | PUT        | Updates the profile information of the authenticated user. |
| `/search`                   | GET        | Searches for user profiles based on the query.             |
| `/weather`                  | GET        | Fetches weather data for a given city.                     |
| `/groups`                   | POST       | Creates a new study group.                                 |
| `/groups/:groupId/sessions` | POST       | Creates a new study session for the group.                 |
| `/cities`                   | GET        | Provides city suggestions based on a query.                |
| `/music`                    | GET        | Fetches music recommendations based on a mood.             |
| `/ai-chat`                  | POST       | Allows users to chat with the AI for study assistance.     |

### Backend Swagger Documentation

The 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.

### OpenAPI Specification

#### Using the `openapi.yaml` File

1. **View the API Documentation**

- Open [Swagger Editor](https://editor.swagger.io/).
- Upload the `openapi.yaml` file or paste its content.
- Visualize and interact with the API documentation.

2. **Test the API**

- Import `openapi.yaml` into [Postman](https://www.postman.com/):
  - Open Postman → Import → Select `openapi.yaml`.
  - Test the API endpoints directly from Postman.
- Or use [Swagger UI](https://swagger.io/tools/swagger-ui/):
  - Provide the file URL or upload it to view and test endpoints.

3. **Generate Client Libraries**

- Install OpenAPI Generator:
 ```bash
 npm install @openapitools/openapi-generator-cli -g
 ```
- Generate a client library:
 ```bash
 openapi-generator-cli generate -i openapi.yaml -g <language> -o ./client
 ```
- Replace `<language>` with the desired programming language.

4. **Generate Server Stubs**

- Generate a server stub:
 ```bash
 openapi-generator-cli generate -i openapi.yaml -g <framework> -o ./server
 ```
- Replace `<framework>` with the desired framework.

5. **Run a Mock Server**

- Install Prism:
  ```bash
  npm install -g @stoplight/prism-cli
  ```
- Start the mock server:
  ```bash
  prism mock openapi.yaml
  ```

6. **Validate the OpenAPI File**

- Use [Swagger Validator](https://validator.swagger.io/):
  - Upload `openapi.yaml` or paste its content to check for errors.

This 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.

### Authentication

All API endpoints require JWT authentication. Include the token in the `Authorization` header as follows:

```plaintext
Authorization: Bearer <your-jwt-token>
```

## NGINX Configuration

The 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.

```nginx
server {
    listen 80;
    server_name localhost;

location / {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
```

The 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.

## Docker Configuration

The 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.

### Building the Docker Containers

To build the Docker containers for the backend and frontend, you can use the following command:

```bash
docker compose up --build
```

This 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.

## The Creator

- [Son Nguyen](https://github.com/hoangsonww)
- [Email](mailto:hoangson091104@gmail.com)
- [LinkedIn](https://www.linkedin.com/in/hoangsonw/)

---

We hope you enjoy using **StudySync**! For any issues or feature requests, feel free to open an issue on the repository. Happy studying! 📚🚀

---

[Back to top](#studysync---a-productivity-and-study-companion-app)

StudySync-Study-Buddy-App

StudySync-Study-Buddy-App Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

StudySync-Study-Buddy-App

StudySync-Study-Buddy-App Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README