Feature Request: Show Recent Projects and Saved Jobs on Home Page

[ankitbisen28]

Description

Add a feature to display recent projects on the home page under a "Recent Projects" tab, along with a "Saved Jobs" tab. This will allow users to easily access the most recent projects and their saved jobs.

Requirements

1. Home Page Tabs:

   • Add two tabs on the home page: "Recent Projects" and "Saved Jobs".
   • The "Recent Projects" tab will display the most recently posted projects.
   • The "Saved Jobs" tab will display the projects that the user has saved.

2. Recent Projects Tab:

   • Fetch and display the most recent projects.
   • Each project entry should display the project title, a brief description, and the deadline.

3. Saved Jobs Tab:

   • Fetch and display the projects that the user has saved.
   • Each saved project entry should display the project title, a brief description, and the deadline.

Acceptance Criteria

• The home page has two tabs: "Recent Projects" and "Saved Jobs".
• The "Recent Projects" tab displays the most recent projects.
• The "Saved Jobs" tab displays the user's saved projects.
• The UI is responsive and user-friendly.

Additional Information

• Ensure the component is responsive and accessible.
• Provide clear error messages for any issues in fetching the projects.

Mockups / Examples

Provide any mockups or examples of the desired component if available.

Technical Requirements

• Ensure compatibility with the existing tech stack of the project.
• Utilize efficient algorithms to fetch and display recent projects and saved jobs without significant performance degradation.

Steps to Implement

1. Backend: Fetch Recent Projects:

   • Create an endpoint to fetch the most recent projects.

   const express = require('express');
   const router = express.Router();
   const Project = require('../models/project');
   const { ensureAuthenticated } = require('../middleware/auth');
   
   router.get('/projects/recent', async (req, res) => {
       try {
           const recentProjects = await Project.find().sort({ createdAt: -1 }).limit(10);
           res.status(200).json(recentProjects);
       } catch (error) {
           res.status(500).json({ message: 'Failed to fetch recent projects', error });
       }
   });
   
   module.exports = router;

2. Backend: Fetch Saved Jobs:

   • Create an endpoint to fetch the projects saved by the user.

   const express = require('express');
   const router = express.Router();
   const User = require('../models/user');
   const { ensureAuthenticated } = require('../middleware/auth');
   
   router.get('/users/:id/saved-projects', ensureAuthenticated, async (req, res) => {
       try {
           const user = await User.findById(req.params.id).populate('savedProjects');
           if (!user) {
               return res.status(404).json({ message: 'User not found' });
           }
           res.status(200).json(user.savedProjects);
       } catch (error) {
           res.status(500).json({ message: 'Failed to fetch saved projects', error });
       }
   });
   
   module.exports = router;

3. Integrate and Test:

   • Ensure the backend and frontend components are integrated correctly.
   • Test the feature thoroughly to ensure recent projects and saved jobs are displayed as expected.

Tasks

• [ ] Create an endpoint to fetch the most recent projects.
• [ ] Create an endpoint to fetch the user's saved projects.
• [ ] Update the home page component to include tabs for "Recent Projects" and "Saved Jobs".
• [ ] Fetch and display recent projects and saved jobs in the respective tabs.
• [ ] Integrate the backend and frontend components.
• [ ] Test the feature thoroughly.