![Logo](./public/images/UVUComboOverWolverinesWhite-0040.png)
An application to help students at UVU find and create study groups.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
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.
- 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
- 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
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
To get a local copy up and running follow these simple steps.
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.
- Download the MySQL Installer from MySQL's official website.
- Run the installer and choose the "Server only" installation option.
- During the setup, configure a root password that you will use later.
- Complete the installation.
- Install Homebrew if you haven't already:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
- Use Homebrew to install MySQL:
brew install mysql
- Start the MySQL service:
brew services start mysql
- Secure your MySQL installation:
mysql_secure_installation
- Update your package index:
sudo apt-get update
- Install MySQL server:
sudo apt-get install mysql-server
- Run the security script:
sudo mysql_secure_installation
- Start the MySQL service:
sudo service mysql start
- Log in to the MySQL root account:
mysql -u root -p
- Create a new database for your project:
CREATE DATABASE uvu_study_groups;
- 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;
-
Clone the repository:
git clone https://github.com/jjacobsonn/uvu-studygroups-frontend.git
-
Install frontend dependencies:
cd uvu-study-groups npm install
-
Install backend dependencies:
cd uvu-studygroups-backend npm install
-
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
-
Run the backend server:
npm run dev
-
Run the frontend development server in another terminal:
cd ../uvu-study-groups npm start
-
Open your browser and navigate to
http://localhost:3000
to view the application locally.
- Navigate to
http://localhost:3000
to use the application locally.
- Create GitHub Repo for Onboarding Project Members
- 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
- 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.
- Create a new API endpoint (e.g.,
- 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.
- Create a
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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/YourFeatureContribution
) - Commit your Changes (
git commit -m 'Add some YourFeatureContribution'
) - Push to the Branch (
git push origin feature/YourFeatureContribution
) - Open a Pull Request
This project is licensed under a Custom Restrictive License. See the LICENSE file for more details.
GitHub Owner: Jackson Jacobson
Twitter - @jackson_swe
Email - [email protected]
LinkedIn: https://www.linkedin.com/in/jjacobsonn/