Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/anonymous-nerds/app-studygrid

This repository contains the frontend code for the Collaborative Study Hubs platform, a web application that enables students to form or join study groups, share notes, collaborate on projects, and engage in discussions on course material.
https://github.com/anonymous-nerds/app-studygrid

api css3 html-css-javascript html5 javascript npm-module rest-api scss scss-framework tailwindcss

Last synced: 8 days ago
JSON representation

This repository contains the frontend code for the Collaborative Study Hubs platform, a web application that enables students to form or join study groups, share notes, collaborate on projects, and engage in discussions on course material.

Awesome Lists containing this project

README 

        
```markdown

# Collaborative Study Hubs Platform - Frontend



This repository contains the frontend code for the Collaborative Study Hubs platform, a web application that enables students to form or join study groups, share notes, collaborate on projects, and engage in discussions on course material.



## Table of Contents

- [Project Overview](#project-overview)

- [Technology Stack](#technology-stack)

- [Installation](#installation)

- [Project Structure](#project-structure)

- [Features](#features)

- [Pages](#pages)

  - [Home Page](#home-page)

  - [Registration Page](#registration-page)

  - [Login Page](#login-page)

  - [Dashboard](#dashboard)

  - [Study Group Page](#study-group-page)

  - [Document Editor Page](#document-editor-page)

  - [Discussion Forum Page](#discussion-forum-page)

  - [Resource Library Page](#resource-library-page)

  - [Meeting Room Page](#meeting-room-page)

  - [Profile Page](#profile-page)

- [API Integration](#api-integration)

- [Contributing](#contributing)

- [License](#license)



## Project Overview



The Collaborative Study Hubs platform is designed to facilitate student collaboration by providing tools for forming study groups, sharing resources, and participating in discussions and virtual study sessions.



## Technology Stack



- **Frontend:** HTML, CSS, JavaScript

- **Styling Framework:** CSS, Tailwind CSS (if used)

- **JavaScript Framework:** Vanilla JavaScript (or optionally, a JavaScript library like React if decided later)

- **Version Control:** Git

- **Package Manager:** npm (for managing dependencies, if needed)



## Installation



1. Clone the repository:

    ```bash

    git clone https://github.com/yourusername/collaborative-study-hubs-frontend.git

    ```

2. Navigate to the project directory:

    ```bash

    cd collaborative-study-hubs-frontend

    ```

3. Install dependencies (if using npm):

    ```bash

    npm install

    ```

4. Run the development server:

    ```bash

    npm start

    ```



## Project Structure



```plaintext

collaborative-study-hubs-frontend/

│

├── public/

│   ├── index.html             # Main HTML file

│   ├── favicon.ico            # Favicon for the website

│   └── assets/                # Static assets (images, icons, etc.)

│

├── src/

│   ├── css/                   # CSS files for styling

│   │   ├── main.css           # Main stylesheet

│   │   └── components/        # CSS for individual components

│   ├── js/                    # JavaScript files

│   │   ├── app.js             # Main JavaScript file

│   │   ├── api.js             # API integration logic

│   │   └── components/        # JavaScript for individual components

│   ├── pages/                 # HTML files for different pages

│   │   ├── home.html          # Home page

│   │   ├── register.html      # Registration page

│   │   ├── login.html         # Login page

│   │   ├── dashboard.html     # Dashboard for logged-in users

│   │   ├── group.html         # Study group page

│   │   ├── document-editor.html # Document editor page

│   │   ├── discussion.html    # Discussion forum page

│   │   ├── resources.html     # Resource library page

│   │   ├── meeting.html       # Meeting room page

│   │   └── profile.html       # User profile page

│   └── index.js               # Main entry point for JavaScript

│

├── .gitignore                 # Files and directories to ignore in Git

├── package.json               # Project metadata and dependencies

└── README.md                  # This README file

```



## Features



- **User Authentication:** Register, log in, and manage user sessions.

- **Study Groups:** Create or join study groups, view group details, and manage members.

- **Collaborative Document Editing:** Real-time document editing with other group members.

- **Discussion Forum:** Participate in group discussions, create new threads, and reply to existing ones.

- **Resource Library:** Upload and manage study resources such as notes, PDFs, and links.

- **Virtual Meeting Rooms:** Schedule and join virtual study sessions.

- **User Profile Management:** View and update personal information and preferences.



## Pages



### Home Page

- **URL:** `/`

- **Description:** The landing page of the platform, providing an overview and call-to-action buttons for registration and login.



### Registration Page

- **URL:** `/register`

- **Description:** Allows new users to sign up by providing their name, email, and password.



### Login Page

- **URL:** `/login`

- **Description:** Enables existing users to log in using their email and password.



### Dashboard

- **URL:** `/dashboard`

- **Description:** The main user dashboard, displaying study groups, recent activities, and quick access to other features.



### Study Group Page

- **URL:** `/group/:id`

- **Description:** Displays details of a specific study group, including group members, resources, and discussion threads.



### Document Editor Page

- **URL:** `/document/:id`

- **Description:** A collaborative document editor that allows group members to create and edit documents in real-time.



### Discussion Forum Page

- **URL:** `/discussion/:id`

- **Description:** A discussion forum within a study group where users can create threads, post replies, and engage in conversations.



### Resource Library Page

- **URL:** `/resources`

- **Description:** A shared library of resources such as notes, files, and links that group members can upload and access.



### Meeting Room Page

- **URL:** `/meeting/:id`

- **Description:** A virtual meeting room for scheduling and joining video calls or study sessions.



### Profile Page

- **URL:** `/profile`

- **Description:** The user profile page, where users can view and edit their personal information and account settings.



## API Integration



The frontend communicates with the backend via RESTful API endpoints to perform actions such as user authentication, group management, document editing, and more. The API endpoints are defined in the `api.js` file within the `src/js/` directory.



## Contributing



We welcome contributions! Please fork this repository and submit pull requests. Ensure that your code adheres to the established style guidelines and passes all tests before submitting.



## License



This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

```



This `README.md` file provides a comprehensive overview of the frontend of the Collaborative Study Hubs platform, including the project structure, technology stack, and details about each page in the application. This structure helps guide developers through the setup process and gives an understanding of how the frontend is organized and how it interacts with the backend.