Table of contents
- Overview
- Project Goals
- Group Contract
- GitHub Organization
- Continuous Integration
- Development History
- Vercel Deployment
- Community Feedback
- User Guide
- Installation Instructions
- Meet The Team
Overview
Many UH Manoa students and locals have a hard time finding people with similar interests to join them in outdoor activities and hobbies. Whether it’s hiking, beach outings, surfing, or just hanging out, it’s not always easy to find partners or groups that align with specific plans or schedules.
Weekend Warrior is a platform that allows users to post their upcoming weekend plans or desired activities and connect with others interested in joining them. This app would serve as a local meetup spot for casual and activity-based connections. It will also make it easier to find activity buddies and plan for fun weekends.
Project Goals
- Users can create or find activities to join.
- Admins ensure content safety and platform use.
Group Contract
Click here to view our group contract.
GitHub Organization
Click here to view the Weekend Warrior project repository.
Continuous Integration
Weekend Warrior uses GitHub Actions to automatically run ESLint and Playwright tests each time a commit is made to the default branch. You can see the results of all recent “workflows” at https://github.com/weekend-warrior-uhm/weekend-warrior-code/actions.
The workflow definition file is straightforward and is located at .github/workflows/ci.yml.
Development History
The development process for Weekend Warrior conformed to Issue Driven Project Management practices. In a nutshell:
The development consists of a sequence of milestones, and each milestone is specified as a set of tasks. These tasks are then described using a GitHub Issue, and each issues is assigned to a single developer to complete. These tasks should typically consist of work that can be completed in 2-4 days. Furthermore, the work for each task is accomplished with a git branch named “issue-XX”, where XX is replaced by the issue number. When a task is complete, its corresponding issue is closed and its corresponding git branch is merged into the master branch. The state (todo, in progress, complete) of each task for a milestone is managed using a GitHub Project Board.
The following sections document the development history of Weekend Warrior.
Milestone 1
Decide on a theme, layout and structure for the landing page.
- Description
- Sign up
- Login/Sign out
- Landing and Home pages
Click here to view M1 Project page.
Milestone 2
- Activity Posts
- Administrative Privileges
- Read/Write
- Search/Browse Activities
- Removal of expired activities
Click here to view M2 Project page.
Milestone 3
- Implement user-friendly design
- Logo
- Background
- Colors
Click here to view M3 Project page.
Vercel Deployment
Click here to view Weekend Warrior deployed on Vercel.
Community Feedback
We are interested in your experience using Weekend Warrior! If you would like, please take a couple of minutes to fill out the Weekend Warrior Feedback Form. It contains only five short questions and will help us understand how to improve the system.
User Guide
Landing Page
When you first bring up the application, you will see the landing page that provides a brief introduction to Weekend Warrior:
Register
If you do not yet have an account on the system, you can register by clicking on “Login,” then “Sign Up.” On the Sign Up page, users can create an account by providing their email, a username, password (with confirmation), full name, phone number, gender, and interests. The interests field allows users to input activities or hobbies, separated by commas, that help personalize their profile. After filling out the form, users can click the Register button to submit their information or the Reset button to clear the form:
Sign in
Click on the Login link to bring up the Sign In page which allows you to log in:
Edit User Information
In order to change your account’s information, click on your email in the top-right corner of the navigation bar and select “Edit Info”. This will bring up the Edit User Information page, where you can update your account details, including email, username, full name, phone number, gender, and interests. Once you’ve made your desired changes, click Save Changes to update your information or Reset to clear the form fields:
User home page
After successfully logging in, the system takes you to your home page. It is just like the landing page, but the NavBar contains links to Activities and Users:
List Activities
Clicking on the Activities link brings up a page that lists all activities posted by users, along with each activity’s description, location, scheduled time, and the total number of registered participants. Users have the option to Sign Up for activities they are interested in, Unregister from activities they have previously joined, or Report activities if necessary. Additionally, creators of an activity are provided options to Edit/Delete their own activity. At the top of the page, users can click on the Create Activity button to add a new activity to the list:
Report Activity
When users click the Report button on an activity card, a Report Activity form appears in a modal window. The form is pre-filled with the Activity Name and the Activity Creator for convenience. Users are required to provide a brief message describing the issue in the Report field, with a maximum limit of 500 characters. After typing their report, users can submit it by clicking Submit Report or close the form without submitting by clicking the Close button. This streamlined process ensures that users can quickly and efficiently report any concerns related to activities:
List Users
Clicking on the Users link brings up a page that lists all users in the system. Each user is displayed in a card format that includes their gender, interests, and role (e.g., USER or ADMIN). This page provides an overview of the user base while keeping personal details, such as email, full name, and phone number, hidden for privacy:
Registered Activities
Clicking on the Registered Activities link displays a page that lists all activities you have signed up for. Each activity is presented in a card format, showing its description, location, date, time, duration, activity owner, and the total number of registered users. You can choose to Unregister from an activity, view additional details by clicking “Activity Info”, or “Report” an activity if necessary:
Owned Activities
Clicking on the Owned Activities link displays a page that lists all activities you have created. Each activity is shown in a card format with its description, location, date, time, duration, and total number of registered users. As the creator, you have the option to Edit/Delete the activity, view additional details by clicking Activity Info, or Unregister if needed:
Edit Activity
Clicking on the Edit/Delete button for an activity brings up the Edit Activity page, where activity creators can modify the details of their activity. This page allows users to update the activity name, description, location, date, time, duration, and a message for registered participants. Once changes are made, users can click Submit to save updates, Reset to clear changes, or Delete Activity to permanently remove the activity:
Activity Info
Clicking on the Activity Info button displays a detailed view of the selected activity. This page provides additional information, including a welcome message, the list of registered users, and a contact link to the activity organizer for any inquiries. The activity owner can post a message for participants and provide follow-up updates, which are visible only to registered users:
Admin mode
It is possible to designate one or more users as “Admins” through the settings file. When a user has the Admin role, they gain access to a special Admin Panel, which can be found by clicking on their email in the top-right corner of the navigation bar and selecting “Admin” from the dropdown menu. This page displays two main sections: Activities and Users. The Activities section lists all currently created activities with details, including the name, description, location, date, time, duration, owner, registered users, and any messages associated with the activity. Admins can edit each activity by clicking the “Edit” link in the corresponding row. The Users section provides a table with user-specific information, such as email, username, full name, phone number, gender, interests, and role, allowing Admins to view all users in the system:
Admins are also able to edit and delete all the currently listed activities:
In addition, Admins can access the Report Panel by clicking on their email in the top-right corner of the navigation bar and selecting “Reports” from the dropdown menu. This page displays a table of all activity reports submitted by users. Each report entry includes the ID, Activity ID, Activity Name, Activity Author, and Report Text, which contains details about the issue provided by the user. This panel allows Admins to efficiently review reported activities, investigate user concerns, and take appropriate actions to resolve issues within the system:
Contact & Support
Clicking on the Contact & Support link in the footer opens a page with helpful resources for users needing assistance. The page includes a “Contact Us” section that provides an email address and phone number for support inquiries. It also features a comprehensive FAQ section addressing common questions about account creation, activity participation, managing activities, and reporting issues. Additionally, the page offers links to essential resources, including the Community Guidelines, Privacy Policy, and Terms of Service, ensuring a safe and informed user experience:
Safety Reminders
Clicking on the Safety Reminders link in the footer brings up a page that provides essential safety guidelines for users. The page includes General Safety Tips, such as meeting in public places, informing someone about your plans, and trusting your instincts if you feel uncomfortable. It also offers Activity-Specific Tips with advice for hiking, water activities, and cycling to ensure users stay safe during their activities. Additionally, the Emergency Preparedness section emphasizes the importance of planning ahead, carrying essential items like a first aid kit, and staying informed about weather updates and local advisories. For further details, the page includes links to the Community Guidelines, Privacy Policy, and Terms of Service to help users stay informed and protected:
Installation Instructions
First, install PostgreSQL. Then create a database for the application.
$ createdb weekend-warrior
Password: <password>
$
Second, go to [https://github.com/weekend-warrior-uhm/weekend-warrior-code](https://github.com/weekend-warrior-uhm/weekend-warrior-code), and download the code. Create a new repository using the source code installed on your system.
Third, cd into the directory of your local copy of the repo, and install third-party libraries with:
$ npm install
Fourth, create a .env file from the sample.env. Set the DATABASE_URL variable to match your PostgreSQL database that you created in the first step. See the Prisma docs Connect your database. Then run the Prisma migration npx prisma migrate dev to set up the PostgreSQL tables.
$ npx prisma migrate dev
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database "<your database name>", schema "public" at "localhost:5432"
Applying migration `20240708195109_init`
The following migration(s) have been applied:
migrations/
└─ 20240708195109_init/
└─ migration.sql
Your database is now in sync with your schema.
✔ Generated Prisma Client (v5.16.1) to ./node_modules/@prisma/client in 51ms
$
Then seed the database with the /config/settings.development.json data using npx prisma db seed.
$ npx prisma db seed
Environment variables loaded from .env
Running seed command `ts-node --compiler-options {"module":"CommonJS"} prisma/seed.ts` ...
Seeding the database
Creating user: admin@foo.com with role: ADMIN
Creating user: john@foo.com with role: USER
🌱 The seed command has been executed.
$
Running the system
Once the libraries are installed and the database seeded, you can run the application by invoking the “dev” script in the package.json file
$ npm run dev
> nextjs-application-template-1@0.1.0 dev
> next dev
▲ Next.js 14.2.4
- Local: http://localhost:3000
- Environments: .env
✓ Starting...
✓ Ready in 1619ms
Viewing the running app
If all goes well, the template application will appear at http://localhost:3000. You can login using the credentials in settings.development.json, or else register a new account.
ESLint
You can verify that the code obeys our coding standards by running ESLint over the code in the src/ directory with:
$ npm run lint
> nextjs-application-template-1@0.1.0 lint
> next lint
✔ No ESLint warnings or errors
$
