Setting Up Comprehensive Local Development Environment Guide

Issue Description:

We need a detailed and comprehensive guide in the CONTRIBUTING.md file to help contributors set up their local development environment effectively. This guide should cover the following aspects:

1. Cloning the repository.
2. Installing dependencies using npm.
3. Configuring environment variables, including guidance for both PlanetScale (or MySQL) and Upstash setups.
4. Prisma setup, including database initialization and migrations.
5. Starting the development server locally.
6. Providing clear guidelines for making changes, creating branches, and submitting pull requests.

Additionally, the issue should emphasize that the guide needs to be detailed enough for contributors to seamlessly set up their local development environment.

Please use this issue as a reference point for the guide to be added in the CONTRIBUTING.md file.

Thank you! 🚀🔗

As part of improving user experience and accessibility on our platform, aim is to implement support for light and dark themes. This enhancement will allow users to choose between two different visual modes based on their preference, environment, or accessibility needs.

Steps:

• Global ThemeProvider
• next-themes
• Shadcn
• Theme-toggle button on Navbar

Implement a Peers Finder feature within the Devcastle platform to facilitate pair programming by enabling developers to discover and connect with suitable partners based on their skills, experience, and project requirements.

Use Case

• Developers seeking collaboration on specific projects can leverage PeersFinder to search for partners with complementary skills and expertise.
• Developers can create profiles highlighting their programming languages, frameworks, and areas of interest to attract potential pairing partners.
• The platform can foster connections leading to productive and enriching pair programming experiences.

Proposed Solution

1. Partner Profiles:

   • Developers can create profiles that showcase their programming skills (languages, frameworks), areas of expertise, and preferred collaboration styles (in-person, online).
   • Profiles can include a brief bio and links to relevant portfolios or GitHub repositories.

2. Search Functionality:

   • Developers can search for potential partners using keywords related to programming languages, frameworks, project types, or desired skillsets.
   • Search results should display relevant profiles with an indication of a developer's availability for pair programming.

3. Matching Algorithm:

   • Consider implementing a matching algorithm that connects developers based on compatibility factors such as:
     • Programming skills and experience overlap
     • Project requirements alignment
     • Preferred collaboration styles and time zones

4. Communication Tools:

   • Integrate basic communication tools like direct messaging or chat functionality within the platform to facilitate initial interaction and scheduling between potential pairing partners.

Alternatives

• External pair programming communities or forums: While these exist, DevFinder offers the advantage of a targeted pool of developers already familiar with the Devcastle platform and its functionalities.
• Manual partner search through developer networks: This approach can be time-consuming and lack the efficiency of a dedicated DevFinder feature.

Additional Context

• Mockups or wireframes for the DevFinder interface could be created to further illustrate the proposed solution.

Impact

• DevFinder can significantly enhance the Devcastle platform's value proposition by fostering collaborative development practices and promoting knowledge sharing among developers.
• Increased pair programming activity can lead to improved code quality, faster development cycles, and a more vibrant developer community within Devcastle.

Priority

High. Implementing DevFinder aligns with Devcastle's mission of empowering developers through collaborative spaces, making it a valuable addition to the platform.

Implementation Suggestions/Ideas

• Define a Prisma schema file (devfinder.prisma) to model the data entities involved in DevFinder
• Develop API endpoints for the following functionalities.
• Design user interfaces for:
  • Profile creation and editing
  • Partner search with filtering options (skills, expertise, availability)
• Consider integrating with developer profile data (if available) from other platforms to enrich the pairing experience.

Issue Title:

Loading Skeleton Component Feature Request for Post Rendering

Issue Description:

Overview:

To enhance the user experience during post loading, we propose the implementation of a "Loading Skeleton Component." This component, powered by the shadcn skeleton library, will serve as a visual indicator to users that content is loading. Specifically, we aim to use this skeleton component to provide a temporary structure and representation while posts are being fetched.

Feature Details:

1. Loading Skeleton Component:

   • Utilize the shadcn skeleton library to create a visually appealing loading skeleton.
   • Apply the skeleton to posts during the loading phase.

2. Smooth Transition:

   • Ensure a smooth transition between the loading skeleton and the actual post content once it is fetched.

3. Dynamic Content Structure:

   • Mimic the structure of a post to give users an idea of the content layout while waiting for the actual data.

Why is this feature beneficial?

• Improved User Experience:

  • Provides a visual cue to users that content is loading, reducing perceived loading times and enhancing overall user experience.

• Content Familiarity:

  • Mimicking the structure of a post with the skeleton allows users to anticipate the content layout, making the loading experience more predictable.

Implementation Considerations:

• React Component:

  • Develop a reusable React component using the shadcn skeleton library.

• Integration with Post Loading:

  • Integrate the loading skeleton component with the existing post loading logic.

Mockups/Illustrations:

Additional Notes:

• Consider the loading skeleton as a temporary visual placeholder, providing users with a smooth transition while waiting for actual post content.

This feature request aims to improve the user experience during post loading by introducing a Loading Skeleton Component, enhancing predictability and reducing perceived loading times. 🚀🔗

Issue Title

Enable User Comment Deletion on Posts

Issue Description

Currently, users do not have the ability to delete their own comments on posts. To enhance user control and privacy, it is essential to provide users with the option to delete their comments when they choose to do so. This feature will improve the overall user experience and give users more control over their interactions on the platform.

Expected Behavior

Users should be able to delete their own comments on posts. There should be a user-friendly and intuitive way to perform this action.

Actual Behavior

At present, users do not have the option to delete their own comments, which can lead to a lack of control over their contributions.

Implementation Suggestions

To implement this feature, consider the following:

• Add a "Delete" or "Remove" option to the user's comments.
• Implement a confirmation dialog to prevent accidental deletion.
• Ensure that deleted comments are no longer visible to other users.

Issue Checklist

• I have provided a clear and concise title.
• I have described the issue in detail.
• I have explained the expected and actual behavior.
• I have provided suggestions for implementation.

Issue Title

List item not rendering properly in Markdown editor when posting a list

Issue Description

When attempting to create a list in the Markdown editor and then posting it, the list items are not rendering as expected. This issue affects the readability and presentation of lists in the editor, impacting the overall user experience.

Expected Behavior

Markdown editor should render correctly, with each item displayed as a separate, properly formatted list element (e.g., bullet points or numbered items).

Actual Behavior

List items are not rendering correctly in the Markdown editor after posting. Instead, they appear jumbled or as plain text without proper formatting.

EditorOutput should show numbered list as been posted with markdown but not been showing up

Reproduction Steps

1. Open the Markdown editor.
2. Create a list using Markdown syntax (e.g., unordered or ordered list).
3. Add multiple items to the list.
4. Post the content.

Labels

• Bug

Issue Checklist

• I have provided a clear and concise title.
• I have described the issue in detail.
• I have explained the expected and actual behavior.
• I have listed reproduction steps.

Task

• Markdown Output should work properly..

Task: Create Issue Template

Description
As the project maintainer, I will create an issue template to provide a consistent structure for issue reporting in our repository. The issue template will help streamline the process and ensure that contributors provide relevant information when submitting issues.

Requirements

• Design and structure an issue template using Markdown.
• Include sections for issue type, description, steps to reproduce (if applicable), expected behavior, current behavior, screenshots or additional information, environment details (if relevant), and possible solution (optional).

Subject: New Feature Request - Job/Internship Posting and Approval System

Feature Description

Overview

Introduce an exciting and much-anticipated feature on CampusBuddy that enables community members (students, faculty, and alumni) to seamlessly post job/internship opportunities they came across directly on the platform. This feature ensures that opportunities are curated, relevant, and accessible to all users. Admin approval will be a key step to maintain quality and appropriateness.

Functionality

1. User Submission: Empower CampusBuddy users to submit job/internship opportunities using an intuitive form powered by React Hook Forms for a smoother and more engaging experience.

2. Admin Approval: Admin will have the responsibility to review and approve or reject submissions based on relevance and appropriateness. This step ensures the quality of opportunities presented to the CampusBuddy community.

3. Frontend Display: Approved opportunities will be dynamically displayed on the frontend, creating a valuable and real-time resource for users actively seeking job or internship opportunities.

4. Tailored Search and Filters:
   The addition of advanced search and filter functionalities allows users to tailor their search criteria. This means individuals can now easily find opportunities aligned with their specific interests, skills, or career aspirations, streamlining the process of discovering the most relevant opportunities for them.

5. Networking and Collaboration:
   The platform becomes not just a job board but a dynamic space for networking and collaboration. Users can connect with those posting opportunities, creating a bridge between seekers and providers. This collaborative aspect adds a layer of personalization to the job search proces

Technical Implementation Details

1. React Hook Forms: Leverage React Hook Forms to build a user-friendly and efficient submission form, enhancing the overall experience of users interacting with the job/internship posting feature.

2. Zod Schema Validation: Implement Zod schema validation to enforce a standardized format for submissions, minimizing errors, and ensuring consistent data.

3. Next.js Server Actions: Utilize Next.js server actions for efficient server-side rendering and seamless integration with the existing CampusBuddy architecture. This will contribute to a faster, more responsive, and scalable platform.

Additional Features (if applicable)

1. Notifications

Implement a robust notification system to keep users informed about the status of their submissions (approved/rejected) and to notify the community about new opportunities.

2. User Dashboard Integration

Integrate the new feature seamlessly into the user dashboard, allowing users to effortlessly track the status of their submissions and explore approved opportunities.

3. Search and Filter Functionality

Enhance user experience by providing advanced search and filter functionalities, allowing users to find specific job/internship opportunities based on various criteria.

Deadline

Propose a realistic deadline for the completion of this feature, considering the complexity and resources required for a successful implementation.

Additional Notes

Encourage the use of Next.js server actions for optimized server-side rendering, enhancing performance and contributing to the scalability of CampusBuddy.

CampusBuddy Admin

Programming Articles and Blogs Feature Request: Empowering Knowledge Sharing

Why?

Cultivating Knowledge Sharing:

The Programming Articles and Blogs feature is proposed to be a pivotal addition to CampusBuddy, fostering a culture of knowledge sharing and collaborative learning. Let's explore the comprehensive reasons behind introducing this feature:

1. Knowledge Enrichment:

   • Diverse Content Creation: Enabling users to write programming articles and blogs encourages the creation of diverse and valuable content. This enriches the collective knowledge base within the CampusBuddy community.

2. Learning Through Teaching:

   • Authorship Empowerment: Allowing users to become authors empowers them to deepen their understanding of programming concepts. Teaching others through writing is a powerful mechanism for solidifying one's own understanding.

3. Community Engagement:

   • Discussion and Feedback: The inclusion of programming articles opens avenues for discussions and feedback. This feature promotes an interactive and collaborative environment where community members can share insights, ask questions, and learn collectively.

4. Showcasing Expertise:

   • Individual and Community Growth: Writing articles allows users to showcase their expertise, contributing to individual growth and the overall development of the CampusBuddy community.

Advantages:

• Knowledge Diversity: Introducing programming articles brings a diversity of perspectives, experiences, and insights to the platform, creating a rich tapestry of programming knowledge.

• Skill Development: Writing articles hones users' communication and teaching skills, making them effective communicators and educators within the community.

• Community Building: The feature enhances the sense of community by fostering discussions, collaborations, and shared learning experiences among users.

Implementation Steps:

1. Article Creation Interface:
   • Develop a user-friendly interface that allows users to create and publish programming articles. This interface should support rich text editing and the inclusion of code snippets. (can consider using same rich editor we are using to create post as well)

2. Article Categorization:

   • Implement a categorization system that allows users to classify their articles into relevant programming topics (e.g., languages, frameworks, algorithms).

3. Article Discovery:

   • Enhance the platform's discovery mechanisms to showcase recently published articles, popular articles, and articles related to specific programming topics.

4. Discussion and Commenting System:

   • Integrate a discussion and commenting system for each article, encouraging community engagement and providing a platform for questions and feedback.

Additional Notes:

• Encourage users to adhere to community guidelines when creating articles to maintain a positive and inclusive learning environment.

Testing:

1. Article Creation Testing:

   • Test the article creation interface to ensure a smooth and user-friendly experience.

2. Categorization Testing:

   • Validate the categorization system, ensuring that articles are appropriately classified.

3. Discovery Testing:

   • Test the article discovery mechanisms to verify that users can easily find and explore programming articles.

This feature request aims to transform CampusBuddy into a hub for collaborative learning, where users can contribute their programming knowledge and learn from the diverse expertise of the community.

Issue Title:

Community Switcher Directory Component Feature Request with State Management

Issue Description:

Overview:

We would like to enhance the user experience on CampusBuddy by introducing a new feature – a "Community Switcher Directory Component" that enables users to seamlessly switch between different communities right from the navigation bar. This component would serve as a directory, providing users with a quick and intuitive way to navigate and explore various communities on CampusBuddy.

Note: Only show to the authenticated users

Feature Details:

1. Community Switcher Component:

   • A compact component in the navigation bar for easy access.
   • Intuitive UI allowing users to quickly switch between communities.

2. Dropdown or Modal:

   • Consideration for whether the component appears as a dropdown or modal.
   • Evaluate the pros and cons of each option for a user-friendly experience.

3. Search Functionality:

   • Include a search bar within the component to facilitate quick community discovery.

4. Community Information:

   • Display relevant information about each community, such as name, theme, or a brief description.

5. State Management:

   • Implement robust state management to ensure smooth interaction and transition between different community views.

Why is this feature beneficial?

• Enhanced User Navigation:

  • Streamlines the process of switching between communities, providing a more efficient and user-friendly navigation experience.

• Discoverability:

  • Improves the discoverability of different communities on CampusBuddy, encouraging users to explore and engage with a diverse range of interests.

• User Engagement:

  • Promotes active participation within various communities, fostering a sense of inclusivity and community building.

Implementation Considerations:

• React Component:

  • Develop the Community Switcher as a reusable React component for seamless integration.

• Responsive Design:

  • Ensure the component is responsive, catering to users on various devices.

• Accessibility:

  • Implement accessibility features to make the component usable for all users.

• State Management:

  • Implement state management to handle the dynamic nature of community switching.

Related Issues:

• Link to any related issues, if applicable.

Mockups/Illustrations

Additional Notes:

• Proper state management is crucial to ensure a seamless user experience during community switching. Consideration should be given to edge cases and potential user interactions.

This feature request aims to enhance the overall user experience on CampusBuddy by introducing a convenient and user-friendly Community Switcher Directory Component, with a strong focus on proper state management.

Implement GitHub Authentication for Fetching User Repositories

Issue Description:
As part of enhancing our platform's functionality and user experience, we need to implement GitHub authentication to allow users to fetch their GitHub repositories seamlessly. This feature will enable our users to access their GitHub repositories directly within our application without the need for manual setup or manual repository entry.

Proposed Solution:

• Integrate GitHub OAuth 2.0 authentication to securely authenticate users with their GitHub accounts and obtain necessary permissions to access their repositories.
• Upon successful authentication, users should be able to view a list of their GitHub repositories within our application.
• Implement a "Fetch Repositories" button or a similar user-friendly mechanism that allows users to trigger the fetching process and retrieve their repositories.
• Cache the fetched repository data in redis for a reasonable duration to reduce redundant API calls and improve performance.

Functional Requirements:

1. GitHub Login Page:

   • Create a dedicated login page with a "Login with GitHub" button to initiate the authentication process.
   • Handle the GitHub OAuth flow to obtain necessary permissions for fetching repositories.

2. User Authorization:

   • Request access to the required GitHub scopes (e.g., "repo," "read:user") to retrieve repository information and user data.
   • Handle permission approval and denial gracefully and inform users about the data that will be accessed.

3. Repository Fetching:

   • Fetch the user's repositories from GitHub's API using the authenticated access token.
   • Display a paginated list of the user's repositories, including basic information like repository name, description, and last update date.

4. Error Handling:

   • Implement appropriate error handling and display clear error messages to users if any issues occur during the authentication or repository fetching process.

Non-functional Requirements:

1. Security:

   • Ensure that sensitive data, such as access tokens, are securely stored and transmitted using industry-standard encryption methods.
   • Avoid storing GitHub access tokens on the client side to prevent potential security vulnerabilities.

2. Performance:

   • Optimize the repository fetching process to minimize response time and provide a smooth user experience, especially for users with a large number of repositories.

3. User Experience:

   • Design a user-friendly interface that guides users through the authentication process clearly and efficiently.
   • Provide an option to log out or revoke access to GitHub repositories for users who wish to do so.

Testing Requirements:

1. Unit Testing:

   • Develop unit tests to ensure that GitHub authentication and repository fetching functions work as expected.
   • Include tests for different authentication scenarios, such as successful authentication, authentication failure, and user denial of permissions.

2. Integration Testing:

   • Conduct thorough integration testing to verify that the feature works seamlessly within our application environment.
   • Test for edge cases and potential issues related to token expiration, API rate limits, and repository access restrictions.

Additional Considerations:
Discuss and decide whether this feature should be available to all users by default or if it should be an opt-in feature. Provide clear documentation for users explaining how to use and benefit from the GitHub authentication feature.

Add Suggested Communities to User Feed

Description

Currently, the user feed does not include suggestions for communities to join. It would enhance the user experience if the user feed could provide users with relevant community suggestions. This feature would make it easier for new and existing users to discover and engage with communities aligned with their interests.

Expected Behavior

The user feed should include a section that provides personalized and relevant suggestions for communities to join. These suggestions should be based on the user's interests, activity, or other relevant factors.

Actual Behavior

As of now, the user feed does not offer any community suggestions, potentially limiting the user's ability to discover new communities.

Implementation Suggestions

To implement this feature, consider the following:

• Suggest based on the number of members a community have , list top 5 or 10 communities from the database based on the most number of joinees.
• Provide a clear and engaging interface for users to act upon these suggestions, such as a "Join" button.

Labels

• Enhancement

Issue Checklist

• I have provided a clear and concise title.
• I have described the issue in detail.
• I have explained the expected and actual behavior.
• I have provided suggestions for implementation.

Error: DYNAMIC_SERVER_USAGE in Individual Job Page Component (Next.js 14)

Description:

Encountering a 500 Internal Server Error when rendering my individual job page component in production on Vercel. I'm currently using generateStaticParamsto generate potential paths for job pages. However, I understand thatgenerateStaticParams creates static pages at build time, which might be conflicting with the dynamic nature of server components.

Steps to Reproduce:

1. Visit the individual job page on the development server (usually http://localhost:3000). The page renders correctly.
2. Deploy the application to Vercel.
3. Access the individual job page on Vercel. The 500 error occurs.

Relevant Code:

// JobDetailsPage.js
import { getJob } from "@/lib/db"; // Assuming your data fetching logic is in `db.js`

export async function generateStaticParams() {
    const jobs = await db.job.findMany({
        where: {
            approved: true,
        },
        select: {
            slug: true,
        },
    });
    return jobs.map(({ slug }) => slug);
}

function JobDetailsPage({ job }) {
    // Use the fetched `job` data for rendering
    ...
}

Logs :

 ⨯ [Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: 'DYNAMIC_SERVER_USAGE',
  page: '/jobs/full-stack-developer-at-apple-7'
}
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: 'DYNAMIC_SERVER_USAGE',
  page: '/jobs/full-stack-developer-at-apple-7'
}
Error: Runtime exited with error: exit status 1

Expected Behavior:

The job page should dynamically fetch job details based on the URL slug and render accordingly. I want the page to function dynamically, updating the content based on incoming requests.

Implement a new feature to allow community creators to upload a logo for their communities during creation. The logo is stored in the database and displayed alongside community details in the frontend. This enhancement improves the visual representation of communities and provides a more customizable experience for creators.

This feature enhancement will allow community creators to upload a logo for their community during creation. The logo will be stored in the database along with other community details.

Steps for implementation:

• 1. Add a new field communityLogoUrl to the community model in the Prisma schema.
• 2. Modify the community creation form to include an option for uploading a logo.
• 3. Implement logic for uploading and storing the community logo using a suitable file storage service, such as AWS S3 or Vercel Blob.(For Testing)
• 4. Update the API endpoint for creating communities to handle logo uploads and store the logo URL in the database.
• 5. Update the frontend to display the uploaded community logo alongside community details.

Task: Create GitHub Actions workflows to automate essential tasks in the repository.

Workflows to Implement

• Build Workflow: Set up a workflow to build the project on each push to the main branch.
• Test Workflow: Configure a workflow to run tests on each push to the main branch.
• Code Coverage Workflow: Implement a workflow to generate code coverage reports on each push to the main branch.

Additional Details

• Branch to target: main

Enhance Home Page

Description

The current home page could benefit from improvements to enhance its visual appeal and overall user experience. A visually appealing home page can leave a positive impression on visitors and improve engagement. This task focuses on design and aesthetic enhancements to create an inviting and captivating home page.

Task Details

• Evaluate the existing design of the home page and identify areas that require improvement.
• Address design elements such as color schemes, typography, imagery, and layout to enhance the visual appeal.
• Make changes and enhancements to the home page's design, ensuring it aligns with the brand's identity and objectives.
• Consider conducting usability and design testing, if applicable, to gather user feedback and refine the design changes.

Expected Outcome

The improved home page should be visually appealing, in line with the platform's identity, and capable of capturing the attention and interest of visitors, ultimately improving the overall user experience.

Labels

• Enhancement
• Design

Task Checklist

• I have provided a clear and concise title.
• I have described the task in detail.
• I have specified the areas of improvement on the home page.
• I have defined the expected outcome.
• I have indicated the platform and any relevant frameworks.
• I have included any additional

Issue Title

Comment Deletion Not Functioning Properly
📼 https://www.loom.com/share/50f6d5af0aa3472aa0d31a4e427c474e?sid=158ff8d4-a175-4854-a45f-250901cefb25

Issue Description

The current implementation for deleting comments is not working as expected. When attempting to delete a comment, the comment remains visible and is not removed from the system.

Expected Behavior

When a user initiates the comment deletion process, the comment should be promptly and permanently removed from the system, and any associated data or references should be appropriately updated.

Current Behavior

Despite attempting to delete a comment, it remains visible in the system, and there is no indication that the deletion process has taken place. The comment persists in its current state.

Steps to Reproduce

1. Log in to the CampusBuddy platform.
2. Navigate to a post or discussion containing comments.
3. Attempt to delete a specific comment using the provided interface.
4. Verify if the comment is successfully removed or if it persists in the system.

Screenshot(s) or Error Output

Priority

High

Definition of Done

• The comment deletion functionality is fixed and verified.
• The code is reviewed and merged into the main branch.
• Proper documentation is updated or created, explaining the changes made.

Code Quality and Testing

• Ensure thorough testing is conducted to validate the fix.
• Code should adhere to the established coding standards.
• Any relevant unit tests should be added or updated.

To-Do Checklist

• Identify the root cause of the comment deletion issue.
• Implement the necessary changes to fix the problem.
• Update documentation as needed.
• Conduct thorough testing to validate the fix.

Issue Title:

Recommended Communities Display on Feed Page Feature Request and list based on the number of participants in the community.

Issue Description:

Overview:

We are proposing a feature to display a list of recommended communities directly on the user's feed page. This list will allow users to easily discover and engage with communities tailored to their interests. Each community in the list will be interactive, providing options to join or leave, and clicking on a community will navigate the user to the respective community page.

List top 5-6 communities to join based on the number of participants

Feature Details:

1. Recommended Communities Section:

   • Introduce a dedicated section on the feed page for displaying recommended communities.

2. Interactive Community List Components:

   • Each community in the list should have interactive elements:
     • Join Button: Allows users to join the community.
     • Leave Button (if already a member): Allows users to leave the community.
     • Clickable Community Name: Navigates the user to the respective community page.

Why is this feature beneficial?

• Enhanced Community Discovery:

  • Users can easily discover and explore communities aligned with their interests, fostering a sense of community engagement.

• User-Friendly Interaction:

  • Provides a seamless way for users to join or leave communities directly from their feed page.

Implementation Considerations:

• React Component:

  • Develop a reusable React component for displaying recommended communities.

• API Integration:

  • Integrate with relevant APIs to fetch and display recommended communities.

• State Management:

  • Implement state management to handle user interactions (joining, leaving) seamlessly.

RELATED ISSUE : #67

Mockups/Illustrations:

Additional Notes:

• Ensure a responsive design that accommodates various devices and screen sizes.

This feature request aims to improve community discovery and engagement by introducing a Recommended Communities section on the user's feed page, with interactive community list components. 🚀🔗

Enhancement: Display Community Logo on Community Page Banner

Overview:

Enhancing the visual appeal of the Community Pages by introducing the capability to display a community's logo prominently on the banner of its dedicated page. This feature aims to create a more immersive and personalized experience for community members and visitors.

Feature Details:

1. Community Page Banner:

   • Integrate the community logo into the banner section of the community page.

2. Logo Placement:

   • Position the community logo prominently within the banner, ensuring visibility and aesthetics.

Why is this enhancement beneficial?

• Enhanced User Experience:
  • Creates a visually appealing and personalized experience for community members, fostering a sense of community pride.

Implementation Considerations:

• React Component:

  • Develop a reusable React component for displaying the community logo on the community page.

• Logo Dimensions:

  • Ensure the logo is displayed at an appropriate size for optimal visual impact.

Mockups/Illustrations:

Additional Notes:

• Consider how the addition of community logos might impact the overall layout and responsiveness of the community page.

Steps to implement:

Step 1: Database Schema Modification

1. Add imageUrl Field:

   • Open the database schema file (e.g., schema.prisma).
   • Add a new field imageUrl of type String to the Community model.

   model Community {
     id        Int       @id @default(autoincrement())
     name      String
     // ... other fields
     imageUrl  String?   // New field for community logo URL
   }

2. Run Database Migrations:

   • Execute the necessary commands to apply the database migrations.

   npx prisma migrate dev

Step 2: Backend Implementation

1. Update Resolver:

   • Open the resolver file (e.g., community.resolver.js).
   • Update the resolver function to include the imageUrl when fetching community data.

   const getCommunity = async (communityId) => {
     // Existing code to fetch community data
     const community = await prisma.community.findUnique({
       where: { id: communityId },
       include: {
         // ... other included fields
         imageUrl: true,
       },
     });
   
     return community;
   };

Step 3: Frontend Integration

1. React Component Modification:

   • Open the React component responsible for rendering the Community Page (e.g., CommunityPage.js).
   • Update the component to include the community logo using the imageUrl from the fetched data.

   const CommunityPage = ({ community }) => {
     // Existing code
   
     return (
       <div>
         <div className="community-banner">
           <img src={community.imageUrl} alt={`${community.name} Logo`} />
           {/* ... other banner content */}
         </div>
         {/* ... other community page content */}
       </div>
     );
   };

Step 4: Styling the tailwind and shadcn component.

Step 5: Testing

1. Local Testing:

   • Run the application locally and navigate to a Community Page to ensure the community logo is displayed correctly on the banner.

   yarn dev

2. User Acceptance Testing:

   • Deploy the changes to a staging environment for user acceptance testing.

Step 6: Documentation Update (Optional)

1. Update Documentation:
   • If applicable, update any relevant documentation to inform users and contributors about the new feature.

Step 7: Deployment

1. Deploy Changes:
   • Once testing is successful, deploy the changes to the production environment.

Conclusion:

• Following these steps should successfully implement the enhancement to display the community logo on the Community Page Banner. Adjustments can be made based on specific project structures and requirements.

• This enhancement request aims to improve the visual identity and user experience of Community Pages by adding the option to display the community logo prominently on the banner.

Description

Currently, the Navbar component lacks a specific button for creating new items on small screens, which impacts user experience. A workaround solution is proposed to utilize a sheet from Shadcn and implement a button for creating new items.

Solution Steps:

1. Assess the current Navbar component layout and design to identify an appropriate placement for the new button on small screens.
2. Explore and select a suitable sheet component from Shadcn that aligns with the design requirements and fits well within the Navbar layout.
3. Integrate the selected sheet component into the Navbar component to serve as the container for the new button.
4. Design the new button according to the application's style guide and user interface standards.
5. Implement functionality for the new button to trigger the creation of new items, ensuring it aligns with the application's workflow.
6. Test the Navbar component across various small screen devices and resolutions to verify the proper display and functionality of the new button.
7. Refactor the code as necessary to optimize performance and maintain code cleanliness.
8. Document the changes made, including any new components or dependencies added, for reference and future maintenance.

Issue Title:

Reusable Component Section for Create Post and Create Community Feature Request

Issue Description:

Overview:

Proposing the addition of a Reusable Component that acts as a box with two options, enhancing user accessibility for creating posts and communities. This section will be prominently displayed, offering users quick access to key actions: creating a post, creating a community.

Feature Details:

1. Reusable Component Section:
   • Introduce a visually distinct section, possibly a box, containing three main options:
     • Create Post Button: Opens the Community Directory or Switcher for posting.
     • Create Community Button: Opens the Create Community Modal.

Why is this feature beneficial?

• Streamlined User Actions:

  • Provides users with a central location for essential actions related to posting and community creation.

• Enhanced Accessibility:

  • Prominently displays options for creating posts and communities, making these features easily accessible.

Implementation Considerations:

• React Component:

  • Develop a reusable React component for the Global Component Section.

• Modal Integration:

  • Ensure smooth integration with modals for creating posts and communities.

• Dynamic Visibility:

  • Consider dynamic visibility based on the user's context (feed page, community page).

Mockups/Illustrations:

Feature Request

Description

Dynamically update social profiles on the dashboard and throughout the app in real-time, allowing users to seamlessly reflect changes to their social information.

Use Case

As a CampusBuddy user, I want my social profiles to be automatically updated across the platform when I make chang
es. For example, when I update my LinkedIn or Twitter profile, I expect the changes to be immediately reflected in my CampusBuddy dashboard and any other relevant sections of the app.

Proposed Solution

Implement a real-time synchronization mechanism that connects users' social profiles to CampusBuddy. When a user updates their profile on external social platforms, CampusBuddy should detect and reflect these changes in the app without requiring manual updates.

Alternatives

Without this feature, users may need to manually update their social profiles within CampusBuddy each time there is a change on external platforms.

Additional Context

Consider integrating API connections with major social platforms (e.g., LinkedIn, Twitter) to enable seamless updates. Mockups illustrating the expected behavior and UI enhancements may be beneficial for better understanding.

Impact

This feature would significantly enhance user experience by eliminating the need for manual profile updates. It contributes to a more dynamic and user-friendly platform.

Priority

High

Implementation Suggestions/Ideas

Explore utilizing webhooks or API subscriptions to receive real-time updates from social platforms. Consider implementing an intuitive UI feedback system to inform users when their profiles are successfully synchronized.

Subject: New Feature Request - Job/Internship Posting and Approval System

Feature Description

Overview

Introduce an exciting and much-anticipated feature on CampusBuddy that enables community members (students, faculty, and alumni) to seamlessly post job/internship opportunities they came across directly on the platform. This feature ensures that opportunities are curated, relevant, and accessible to all users. Admin approval will be a key step to maintain quality and appropriateness.

Functionality

1. User Submission: Empower CampusBuddy users to submit job/internship opportunities using an intuitive form powered by React Hook Forms for a smoother and more engaging experience.

2. Admin Approval: Admin will have the responsibility to review and approve or reject submissions based on relevance and appropriateness. This step ensures the quality of opportunities presented to the CampusBuddy community.

3. Frontend Display: Approved opportunities will be dynamically displayed on the frontend, creating a valuable and real-time resource for users actively seeking job or internship opportunities.

4. Tailored Search and Filters:
   The addition of advanced search and filter functionalities allows users to tailor their search criteria. This means individuals can now easily find opportunities aligned with their specific interests, skills, or career aspirations, streamlining the process of discovering the most relevant opportunities for them.

5. Networking and Collaboration:
   The platform becomes not just a job board but a dynamic space for networking and collaboration. Users can connect with those posting opportunities, creating a bridge between seekers and providers. This collaborative aspect adds a layer of personalization to the job search proces

Technical Implementation Details

1. React Hook Forms: Leverage React Hook Forms to build a user-friendly and efficient submission form, enhancing the overall experience of users interacting with the job/internship posting feature.

2. Zod Schema Validation: Implement Zod schema validation to enforce a standardized format for submissions, minimizing errors, and ensuring consistent data.

3. Next.js Server Actions: Utilize Next.js server actions for efficient server-side rendering and seamless integration with the existing CampusBuddy architecture. This will contribute to a faster, more responsive, and scalable platform.

Additional Features (if applicable)

1. Notifications

Implement a robust notification system to keep users informed about the status of their submissions (approved/rejected) and to notify the community about new opportunities.

2. User Dashboard Integration

Integrate the new feature seamlessly into the user dashboard, allowing users to effortlessly track the status of their submissions and explore approved opportunities.

3. Search and Filter Functionality

Enhance user experience by providing advanced search and filter functionalities, allowing users to find specific job/internship opportunities based on various criteria.

Deadline

Propose a realistic deadline for the completion of this feature, considering the complexity and resources required for a successful implementation.

Additional Notes

Encourage the use of Next.js server actions for optimized server-side rendering, enhancing performance and contributing to the scalability of CampusBuddy.

CampusBuddy Admin

Issue Title:

GitHub Repository Import Feature for User Dashboard: Empowering Developer Collaboration

Why?

Fostering Developer Collaboration:

The GitHub Repository Import feature is envisioned to be a cornerstone in building a robust and collaborative developer community on CampusBuddy. Let's delve into the comprehensive reasons behind proposing this feature:

1. Visibility and Collaboration Enhancement:

   • Automated Import: The automated import functionality is designed to provide developers with a seamless way to showcase their GitHub repositories within the CampusBuddy community. This heightened visibility acts as a catalyst for collaboration, enabling developers to discover, engage, and contribute to each other's projects effortlessly.

2. Active Community Engagement:

   • User Dashboard Display: Displaying the imported GitHub repositories directly on the user's dashboard transforms it into a dynamic hub for community engagement. Developers can not only showcase their work but actively participate in discussions, find collaborators, and contribute to projects that align with their interests.

3. Strategic Contributor Outreach:

   • Manual Input Option: Recognizing that each project is unique, the manual input option provides developers with a strategic avenue to present specific projects. This flexibility allows developers to articulate project goals, provide context, and invite potential collaborators who resonate with the project's vision.

4. Seamless Developer Connection:

   • Centralized Repository Management: The user dashboard becomes a centralized repository management system, seamlessly connecting developers within the CampusBuddy ecosystem. This interconnected platform facilitates meaningful collaborations, knowledge exchange, and shared learning experiences among developers.

Advantages:

• Collaboration Amplification: Importing GitHub repositories onto CampusBuddy amplifies collaboration opportunities, creating a dynamic space for developers to share expertise, tackle challenges collectively, and work on innovative projects.

• Enhanced Project Visibility: Developers gain a dedicated platform to showcase their projects, attracting attention from community members with shared interests and skills. This heightened visibility leads to increased project discoverability.

• Recruitment Hub: Project owners can leverage the feature to attract contributors, transforming CampusBuddy into a recruitment hub for collaborative and innovative projects. This feature is particularly beneficial for open-source projects seeking a diverse and skilled contributor base.

Implementation Steps:

1. GitHub API Interaction:

   • Develop robust logic to interact with the GitHub API and fetch the list of public repositories for the authenticated user.

   const { Octokit } = require("octokit");
   const octokit = new Octokit({ auth: "USER_GITHUB_ACCESS_TOKEN" });
   
   const repositories = await octokit.repos.listForAuthenticatedUser();

2. Database Integration:

   • Implement a seamless process to save the fetched repositories to the CampusBuddy database, associating them with the respective user account.

   await prisma.repository.createMany({
     data: repositories.map(repo => ({
       name: repo.name,
       url: repo.html_url,
       // ... other repository details
     })),
   });

3. Manual Input Form:

   • Create a user-friendly and intuitive form on the user dashboard, allowing users to manually input GitHub repository details. This form should capture essential information about the project.

4. Display on User Dashboard:

   • Enhance the user dashboard component to visually display the imported GitHub repositories. This display should provide key information about each repository, encouraging users to explore and engage.

Conclusion:

The GitHub Repository Import feature is not merely a technical integration; it's a strategic initiative to cultivate a vibrant and collaborative developer community within CampusBuddy. By fostering collaboration, promoting project visibility, and providing tools for efficient recruitment, CampusBuddy stands poised to become a hub for collective growth and innovation within the developer ecosystem.

GitHub and Credential Authentication Issue

Description

There is an issue with GitHub and credential authentication not functioning as expected. Users are experiencing difficulties with authentication processes, which hinders their ability to interact with the platform seamlessly. This issue impacts user accessibility and security.

Expected Behavior

Users should be able to authenticate and access their GitHub accounts and repositories without any difficulties using credentials. The authentication process should be smooth and reliable.

Actual Behavior

Authentication using GitHub and credentials is not working correctly. Users may encounter errors, unexpected behaviors, or challenges when attempting to log in or interact with their repositories.

Reproduction Steps

To reproduce the issue:

1. Attempt to log in or perform a GitHub action that requires authentication.
2. Observe any errors or unexpected behavior during the authentication process.

Issue Checklist

• I have provided a clear and concise title.
• I have described the issue in detail.
• I have explained the expected and actual behavior.
• I have provided suggestions for implementation.

Issue Title:

Opportunities Navigation Section on Feed Page Feature Request

Issue Description:

Overview:

Proposing a feature to enhance user experience by adding an "Opportunities Navigation Section" directly on the user's feed page. This section will serve as a quick link for users to navigate to the Opportunities or Job Board section of CampusBuddy, providing easy access to internship listings, job opportunities, and related content.

Feature Details:

1. Opportunities Navigation Section:

   • Introduce a dedicated section on the feed page with a clear call-to-action for navigating to the Opportunities or Job Board.

2. Clickable Element:

   • Design an interactive element that, when clicked, directs the user to the Opportunities or Job Board page.

Why is this feature beneficial?

• Effortless Navigation:

  • Users can easily navigate to the Opportunities section without the need to explore multiple pages, streamlining the user journey.

• Increased Visibility:

  • Highlights the availability of job and internship opportunities, increasing awareness and engagement.

Implementation Considerations:

• React Component:

  • Develop a reusable React component for the Opportunities Navigation Section.

• Link Integration:

  • Ensure proper integration with the Opportunities or Job Board page through clickable links.

Related Issues:

• #66

Mockups/Illustrations:

Additional Notes:

• Consider a design that aligns with the overall aesthetics of the feed page and maintains consistency across the platform.

This feature request aims to improve user navigation and engagement by adding an Opportunities Navigation Section directly on the feed page.