UVU Study Groups

An application to help students at UVU find and create study groups.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact

About The Project

UVU Study Groups is a web application developed as part of Utah Valley University's (UVU) Excellence & Innovation Initiative (e2i) program. This platform is designed to facilitate the creation, discovery, and management of study groups for UVU students, leveraging modern web technologies and integration with popular communication platforms.

Key Features

• User Authentication: Secure login and signup functionality, with Discord integration for seamless access
• Study Group Management: Tools for creating, searching, and joining public study groups
• Discord Integration: Automatic server creation and member management for each study group
• Intuitive User Interface: A clean, responsive design optimized for both desktop and mobile devices

Benefits

• Enhanced Collaboration: Facilitates easier connection between students with shared academic interests
• Time Efficiency: Reduces the overhead of manually coordinating study sessions
• Improved Learning Outcomes: Encourages peer-to-peer learning and knowledge exchange
• University Integration: Designed specifically for UVU students, aligning with university programs and initiatives

Built With

• 
• 
• 
• 
• 
• 
• 

(back to top)

Figma Design Documentation

The design for UVU Study Groups was created in Figma. It includes both desktop and mobile layouts for the following pages:

• Home
• Sign Up
• Login
• Join Study Group
• Create Study Group

You can view the detailed Figma design here: UVU Study Groups Figma Design

(back to top)

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

You need to have Node.js, npm, MySQL (or another database system), and TailwindCSS installed.

• Node.js & npm:

  npm install npm@latest -g

• TailwindCSS:

  npm install -D tailwindcss

• MySQL: Follow the guidelines below for installation instructions.

MySQL Installation

Installation on Windows:

1. Download the MySQL Installer from MySQL's official website.
2. Run the installer and choose the "Server only" installation option.
3. During the setup, configure a root password that you will use later.
4. Complete the installation.

Installation on macOS:

1. Install Homebrew if you haven't already:

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Use Homebrew to install MySQL:

   brew install mysql

3. Start the MySQL service:

   brew services start mysql

4. Secure your MySQL installation:

   mysql_secure_installation

Installation on Linux (Ubuntu/Debian):

1. Update your package index:

   sudo apt-get update

2. Install MySQL server:

   sudo apt-get install mysql-server

3. Run the security script:

   sudo mysql_secure_installation

4. Start the MySQL service:

   sudo service mysql start

Post-Installation Setup:

1. Log in to the MySQL root account:

   mysql -u root -p

2. Create a new database for your project:

   CREATE DATABASE uvu_study_groups;

3. Optionally, create a new MySQL user and grant privileges:

   CREATE USER 'your_username'@'localhost' IDENTIFIED BY 'your_password';
   GRANT ALL PRIVILEGES ON uvu_study_groups.* TO 'your_username'@'localhost';
   FLUSH PRIVILEGES;

Installation

1. Clone the repository:

   git clone https://github.com/jjacobsonn/uvu-studygroups-frontend.git

2. Install frontend dependencies:

   cd uvu-study-groups
   npm install

3. Install backend dependencies:

   cd uvu-studygroups-backend
   npm install

4. Create a .env file in the backend directory based on the .env.example file and fill in your credentials:

   cp .env.example .env

   Example contents of .env:

   DB_HOST=localhost
   DB_USER=your_username
   DB_PASS=your_password
   DB_NAME=uvu_study_groups
   JWT_SECRET=your_jwt_secret
   

5. Run the backend server:

   npm run dev

6. Run the frontend development server in another terminal:

   cd ../uvu-study-groups
   npm start

7. Open your browser and navigate to http://localhost:3000 to view the application locally.

(back to top)

Usage

• Navigate to http://localhost:3000 to use the application locally.

(back to top)

Roadmap

• Create GitHub Repo for Onboarding Project Members

Frontend Roadmap

• Created Figma Outlining Main Application Pages
• Created Home Page + Components
• Create Main Footer
• Create and implement Sign Up Page
• Create and implement Login Page
• Create and implement Join Study Group Page
• Create and implement Create Study Group Page
• Implement Mobile App Version

Backend Roadmap

• Add User Authentication
• Integrate Discord OAuth2
• Add Notification System
• Implement Backend DB for Study Groups
• Implement the backend for the "Join Study Group" and "Create Study Group" pages:
  • Task: Ensure that users must be logged in to view and interact with these pages.
  • Steps:
    • Implement middleware in the Express.js backend to check if a user is authenticated before they can access these pages.
    • Redirect unauthenticated users to the login page.
    • Test the authentication flow to ensure users can only access the pages after logging in.
• Link the "Create Study Group" and "Join Study Group" pages through the backend:
  • Task: When a new study group is created, it should be viewable on the "View Study Groups" page with pagination.
  • Steps:
    • Create a new API endpoint (e.g., POST /api/study-groups) to handle the creation of study groups.
    • Implement a GET /api/study-groups endpoint that supports pagination, returning 8 study groups per page.
    • Ensure the frontend correctly requests and displays the appropriate groups based on the pagination state.
    • Write integration tests to ensure the linkage works as expected.
• Ensure the "Learn More" button functionality is dynamic:
  • Task: The "Learn More" buttons should take users to the "Join Study Group" page with content reflecting the selected course.
  • Steps:
    • Pass the course ID as a parameter when navigating to the "Join Study Group" page.
    • Fetch the course and study group details from the backend using the provided course ID.
    • Populate the form on the "Join Study Group" page with the correct details.
    • Test to ensure the correct data is displayed based on user interaction.
• Implement interactive search bars on the home and "View Study Groups" pages:
  • Task: The "Looking For A Specific Group?" areas should be interactive search bars.
  • Steps:
    • Create a GET /api/study-groups/search endpoint that returns study groups based on the search query.
    • Implement frontend logic to dynamically update the study groups displayed as the user types in the search bar.
    • Test the search functionality to ensure it’s responsive and accurate.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/YourFeatureContribution)
3. Commit your Changes (git commit -m 'Add some YourFeatureContribution')
4. Push to the Branch (git push origin feature/YourFeatureContribution)
5. Open a Pull Request

(back to top)

License

This project is licensed under a Custom Restrictive License. See the LICENSE file for more details.

(back to top)

Contact

GitHub Owner: Jackson Jacobson

Twitter - @jackson_swe

Email - [email protected]

LinkedIn: https://www.linkedin.com/in/jjacobsonn/

(back to top)