User‐Manual‐Frontend‐Web

User Manual

This manual provides step-by-step guides for using the Greener web application, designed to help users track waste, join eco-challenges, and engage with sustainability content.

Getting Started

Introduction

Greener is a web application designed to help users track waste, participate in eco-challenges, and contribute to sustainability. This guide helps new users set up their accounts and start using the app.

Account Creation

1. Visit the Signup Page:
   • Navigate to /signup from the homepage.
   • Fill in required fields: Username, Email, Password, Confirm Password.
   • Optional fields: First Name, Last Name, Bio, City, Country.
2. Submit the Form:
   • Click "Sign Up" to create your account.
   • You'll be redirected to the login page upon success.
3. Log In:
   • Go to /login.
   • Enter your Email and Password, or use Google SSO.
   • Click "Login" to access your dashboard.

First Steps

• Explore the Dashboard: View your eco-score and quick links to features.
• Log Waste: Navigate to /waste to track your waste reduction.
• Join Challenges: Visit /challenges to participate in community challenges.
• Update Profile: Go to /profile to personalize your account.

Troubleshooting

• Forgot Password? Use the /forgot-password link to reset it.
• Login Issues? Ensure your email and password are correct, or use Google SSO.
• Need Help? Contact support via the About Us page (/about).

Navigation Guide

Overview

Greener uses a consistent navigation system to help users access features easily.

Public Navigation (Unauthenticated)

• Homepage (/): Introduces Greener with a hero section, mission, and eco-tips.
• About Us (/about): Details the team and mission.
• Blog (/blog): Lists sustainability articles; click a post to read more.
• Login (/login) and Signup (/signup): Access account management.

Authenticated Navigation

• Dashboard (/dashboard): Central hub with eco-score, quick links, and tips.
• Waste Log (/waste): Form to log waste and view recent entries.
• Leaderboard (/leaderboard): Displays top users by eco-score.
• Challenges (/challenges): Lists eco-challenges with join/view options.
• Profile (/profile): Edit personal information and preferences.
• Logout: Available in Navbar or profile card to sign out.

Navigation Components

• Navbar: Appears on all pages, with links tailored to authentication status.
• Quick Links: On the dashboard, provides shortcuts to key features.

Tips

• Use the browser's back button or Navbar links to navigate.
• Check the active link in the Navbar (highlighted) to know your current page.

Feature Guides

Authentication Guide

Signing Up

• Access: Click "Sign Up" from the homepage or navigate to /signup.
• Fields:
  • Required: Username, Email, Password, Confirm Password.
  • Optional: First Name, Last Name, Bio, City, Country.
• Action: Submit the form to create an account. Redirects to /login.

Logging In

• Access: Click "Login" or go to /login.
• Options:
  • Email/Password: Enter credentials and click "Login".
  • Google SSO: Click the Google button to sign in via Google.
• Remember Me: Check to persist your session (optional).
• Redirect: Successful login takes you to /dashboard.

Password Recovery

• Forgot Password:
  • Click "Forgot Password?" on the login page (/forgot-password).
  • Enter your email and submit.
  • Check your inbox (and spam) for a reset link.
• Reset Password:
  • Click the reset link (/reset-password/:uid/:token).
  • Enter and confirm your new password.
  • Redirects to /login upon success.

Logging Out

• Click "Logout" in the Navbar or profile card on the dashboard.
• Clears session and redirects to /login.

About Us Guide

Purpose

The About Us page provides information about the Greener mission, team, and goals, helping users understand the application's purpose and connect with its values.

Accessing the Page

• From Homepage: Click "About" in the Navbar.
• Direct URL: Navigate to /about.
• Availability: Accessible to all users, no login required.

Using the Page

1. View Mission Statement:
   • Read about Greener's commitment to sustainability and waste reduction.
2. Meet the Team:
   • Browse profiles of team members, including names, roles, and brief bios.
   • Note: Team data is static or fetched from the backend API (if dynamic).
3. Explore Goals:
   • Learn about Greener's objectives, such as promoting eco-friendly habits.
4. Contact Us:
   • Find a contact form or email link (if available) to reach the team.
   • Example: Submit questions or feedback via a form at the bottom of the page.

Features

• Static Content: Mission and team details are displayed consistently.
• Responsive Design: Optimized for desktop and mobile devices.
• Navigation: Use the Navbar to return to the homepage or other public pages.

Tips

• Check the About Us page to understand Greener’s purpose before signing up.
• Use the contact form (if present) for support or inquiries.

Troubleshooting

• Page Not Loading? Ensure you have an internet connection and the backend API is running.
• Contact Form Issues? Verify your email input and check spam for responses.

Blog Guide

Purpose

The Blog feature provides sustainability articles, tips, and updates to educate and engage users, fostering a community around eco-friendly practices.

Accessing the Blog

• From Homepage: Click "Blog" in the Navbar.
• Direct URL: Navigate to /blog.
• Availability: Accessible to all users, no login required.

Using the Blog

1. Browse Posts:
   • View a list of blog posts with titles, summaries, and publication dates.
   • Scroll or use pagination (if implemented) to see more posts.
2. Read a Post:
   • Click a post title or "Read More" to view the full article (navigates to /blog/:id).
   • Read content, including text, images, and embedded media (if any).
3. Navigate Back:
   • Use the Navbar’s "Blog" link or browser’s back button to return to the post list.
4. Search or Filter (Optional):
   • If available, use a search bar or category filters to find specific topics (e.g., "Recycling Tips").

Features

• Post List: Displays recent posts in a grid or list format.
• Dynamic Routing: Individual posts accessed via /blog/:id.
• Responsive Design: Readable on all devices.
• API-Driven: Posts fetched from the backend API (assumed endpoint: /api/blog/posts/).

Tips

• Check the blog regularly for new sustainability tips.
• Bookmark favorite posts using your browser for quick access.
• Share posts via social media buttons (if implemented).

Troubleshooting

• Posts Not Loading? Verify your internet connection or check if the backend API is down.
• Broken Links? Ensure the post ID in the URL is valid.
• Need Help? Contact support via the About Us page (/about).

Challenges Guide

Purpose

The Challenges feature allows users to participate in eco-friendly challenges (e.g., "Reduce Plastic Use") to earn points, boost their eco-score, and engage with the community.

Accessing Challenges

• From Dashboard: Click "Challenges" in the Navbar or a quick link on the dashboard.
• Direct URL: Navigate to /challenges.
• Availability: Requires login; redirects to /login if unauthenticated.

Using Challenges

1. Browse Challenges:
   • View a list of available challenges, each displayed as a ChallengeCard.
   • Details include challenge name, description, duration, and points.
2. Join a Challenge:
   • Click "Join" on a challenge card.
   • Confirm participation (may involve a modal or API call).
   • Joined challenges may appear in a "My Challenges" section.
3. Track Progress:
   • Check your progress on active challenges (e.g., tasks completed, points earned).
   • Progress may update automatically (e.g., after logging waste) or require manual input.
4. Complete Challenges:
   • Finish tasks to complete the challenge.
   • Earn points added to your eco-score, visible on the dashboard.

Features

• Challenge Cards: Interactive components showing challenge details.
• API Integration: Fetches challenges from the backend (assumed endpoint: /api/challenges/).
• Progress Tracking: Updates via API calls (e.g., /api/challenges/:id/progress).
• Responsive Design: Optimized for all devices.

Tips

• Join challenges that align with your lifestyle for easier completion.
• Check the dashboard for updates on your challenge progress.
• Participate regularly to improve your eco-score and leaderboard ranking.

Troubleshooting

• Can’t Join? Ensure you’re logged in and the challenge is still active.
• Progress Not Updating? Verify your actions (e.g., waste logs) are recorded.
• Need Help? Contact support via the About Us page.

Dashboard Guide

Purpose

The Dashboard is the central hub for authenticated users, providing an overview of their eco-score, quick links to features, and personalized eco-tips.

Accessing the Dashboard

• After Login: Automatically redirected to /dashboard after signing in.
• From Navbar: Click "Dashboard" in the top navigation.
• Direct URL: Navigate to /dashboard.
• Availability: Requires login; redirects to /login if unauthenticated.

Using the Dashboard

1. View Eco-Score:
   • See your current eco-score (points earned from waste logging, challenges, etc.).
   • Displayed prominently, often with a visual indicator (e.g., gauge or number).
2. Access Quick Links:
   • Click links or buttons to navigate to features like Waste Log, Challenges, or Profile.
   • Example: "Log Waste" button takes you to /waste.
3. Read Eco-Tips:
   • Browse personalized or general sustainability tips (e.g., "Compost food scraps").
   • Tips may rotate or be fetched from the backend.
4. Check Recent Activity:
   • View recent waste logs or challenge updates (if implemented).
   • Example: "Logged 2kg of plastic on May 12".

Features

• Eco-Score Display: Fetched via API (e.g., /api/waste/scores/me/).
• Quick Links: Shortcuts to key features for easy navigation.
• Dynamic Content: Tips and activity updated via API or Redux state.
• Responsive Design: Optimized for desktop and mobile.

Tips

• Visit the dashboard daily to track your eco-score and discover new tips.
• Use quick links to save time navigating to frequent features.
• Monitor your recent activity to stay motivated.

Troubleshooting

• Eco-Score Not Updating? Ensure waste logs or challenges are submitted correctly.
• Tips Not Loading? Check your internet connection or API status.
• Need Help? Contact support via the About Us page.

Leaderboard Guide

Purpose

The Leaderboard showcases top users ranked by their eco-scores, encouraging competition and community engagement.

Accessing the Leaderboard

• From Dashboard: Click "Leaderboard" in the Navbar or a quick link.
• Direct URL: Navigate to /leaderboard.
• Availability: Requires login; redirects to /login if unauthenticated.

Using the Leaderboard

1. View Rankings:
   • See a list of users sorted by eco-score (highest to lowest).
   • Details include username, eco-score, and rank (e.g., #1, #2).
2. Find Your Rank:
   • Look for your username in the list or a highlighted "Your Rank" section.
   • Displays your current eco-score and position.
3. Filter or Sort (Optional):
   • If available, use filters (e.g., "Friends Only") or sort options (e.g., "This Week").
4. Boost Your Rank:
   • Log waste (/waste) or join challenges (/challenges) to increase your eco-score.

Features

• Dynamic Rankings: Fetched from the backend (assumed endpoint: /api/leaderboard/).
• User Highlight: Your rank is emphasized (e.g., bold or colored).
• Responsive Design: Viewable on all devices.

Tips

• Check the leaderboard weekly to track your progress.
• Participate in challenges to climb the rankings faster.
• Encourage friends to join Greener for friendly competition.

Troubleshooting

• Rank Not Showing? Ensure you’ve logged waste or completed challenges.
• Data Not Loading? Verify your internet connection or API status.
• Need Help? Contact support via the About Us page.

Profile Guide

Purpose

The Profile page allows users to view and edit their personal information, customize preferences, and manage their account settings.

Accessing the Profile

• From Dashboard: Click "Profile" in the Navbar or a quick link.
• Direct URL: Navigate to /profile.
• Availability: Requires login; redirects to /login if unauthenticated.

Using the Profile

1. View Profile:
   • See your details: Username, Email, First Name, Last Name, Bio, City, Country.
   • View your eco-score and account creation date (if displayed).
2. Edit Profile:
   • Click "Edit" or a pencil icon to enter edit mode.
   • Update fields like Bio, City, or Country.
   • Click "Save" to submit changes (sends PATCH to /api/user/me/).
3. Change Password (Optional):
   • If available, use a "Change Password" link to update your password.
   • Requires current password and new password confirmation.
4. Manage Preferences:
   • Toggle settings like email notifications or theme (if implemented).
5. Logout:
   • Click "Logout" (in Navbar or profile card) to sign out.

Features

• Dynamic Data: Fetched via API (e.g., /api/user/me/).
• Form Validation: Ensures valid inputs (e.g., email format, required fields).
• Responsive Design: Optimized for all devices.

Tips

• Keep your profile updated with a bio and location to engage with the community.
• Save changes frequently to avoid losing edits.
• Use a strong password if updating it.

Troubleshooting

• Changes Not Saving? Check for validation errors or network issues.
• Profile Not Loading? Ensure you’re logged in and the API is running.
• Need Help? Contact support via the About Us page.

Waste Logging Guide

Purpose

The Waste Logging feature allows users to track their waste reduction efforts, categorize waste types, and contribute to their eco-score.

Accessing Waste Logging

• From Dashboard: Click "Waste Log" in the Navbar or a quick link.
• Direct URL: Navigate to /waste.
• Availability: Requires login; redirects to /login if unauthenticated.

Using Waste Logging

1. View Recent Logs:
   • See a list of your recent waste logs (e.g., "2kg Plastic, May 12").
   • Includes category, quantity, and date.
2. Log New Waste:
   • Fill out the form:
     • Category: Select from a dropdown (e.g., Plastic, Organic), fetched from /api/waste/subcategories/.
     • Quantity: Enter the amount (e.g., 1.5 kg).
     • Date (Optional): Defaults to today.
   • Click "Submit" to save the log (sends POST to /api/waste/logs/).
3. Edit or Delete Logs (Optional):
   • If available, click an edit/delete icon next to a log to modify or remove it.
   • Confirm changes via a modal or form.
4. Check Eco-Score Impact:
   • New logs increase your eco-score, visible on the dashboard.

Features

• Dynamic Form: Categories loaded from the backend API.
• Log History: Displays past entries with pagination (if implemented).
• API Integration: Submits and retrieves data via /api/waste/logs/.
• Responsive Design: Usable on all devices.

Tips

• Log waste daily to accurately track your habits.
• Use specific categories for better insights (e.g., "Glass" vs. "Other").
• Check your eco-score on the dashboard after logging.

Troubleshooting

• Form Not Submitting? Verify all required fields are filled and valid.
• Categories Not Loading? Check your internet or API status.
• Need Help? Contact support via the About Us page.