Added full CRUD support for user projects (MVC backend + frontend integration)#142
Added full CRUD support for user projects (MVC backend + frontend integration)#142kotlalokeshwari098 wants to merge 6 commits intoalvarotorrestx:devfrom
Conversation
alvarotorrestx
left a comment
alvarotorrestx
left a comment
There was a problem hiding this comment.
SERIOUSLY GREAT JOB ON THIS!
It's come out very well. There are some minor issues that I've noticed right away. I left some comments on some of the minor things, but I made this video to help you see what happens on initial load.
Projects.mp4
Fixing this will be a better user experience, maybe perhaps also showing a "No projects to show." at the beginning would be good.
Anything that is not filled should also be null or "", so it doesn't display an empty item, such as the Live Url that I'm clicking and nothing is happening.
After this, we'll dive deeper into the backend safety precautions as well.
Let me know if you have questions, thanks! 😊
server/server.js
Outdated
| // Blog Post Routes | ||
| app.use('/api/posts', blogPostRoutes) | ||
|
|
||
| app.use('/project',projectRoutes) |
There was a problem hiding this comment.
Let's go with /projects, since it'll be plural, please for consistency as well. 😊
server/routes/projectRoutes.js
Outdated
| const {createProject}=require('../controllers/projectController.js') | ||
| const {deleteProject}=require('../controllers/projectController.js') | ||
| const {getAllProjects}=require('../controllers/projectController.js') | ||
| const {updateProject}=require('../controllers/projectController.js') |
There was a problem hiding this comment.
You can shorten this with
const { createProject, deleteProject, getAllProjects, updateProject } = require('../controllers/projectController.js') if you'd like.
| const userId = req.user.id; | ||
|
|
||
| if (!req.user || !req.user.id) { | ||
| return res.status(401).json({ messaeg: "unauthorized user" }); |
There was a problem hiding this comment.
Please capitalize the U in Unauthorized.
| const { _id, owner, ...updates } = req.body; | ||
|
|
||
| if(!req.user || !req.user.id){ | ||
| return res.status(401).json({message:"unauthorized user"}) |
There was a problem hiding this comment.
Capitalize U here as well, please
|
|
||
| const getAllProjects = async (req, res) => { | ||
| if (!req.user || !req.user.id) { | ||
| return res.status(401).json({ message: "unauthorized user" }); |
alvarotorrestx
left a comment
alvarotorrestx
left a comment
There was a problem hiding this comment.
FANTASTIC UPDATES!!
It's looking a lot better. I went ahead and did some further testing. I recorded it so you have clearer evidence to look over.
It seems that success messages are still being passed through even when the projects aren't actually posting. Perhaps adding a disable on the Add button or see why the backend errors aren't pushing through to prevent it from submitting a success. (This could be a frontend error also)
I did see that there are some space between headings and paragraph text that can be improved (I highlight in the video with the cursor).
Aside from that, the link icons shouldn't show when there isn't an actual link added to the project. (Better UX) The same goes for images, etc. Small things make big impacts for users. 😊
2025-06-23.23-43-20.1.1.mp4
2 participants
This PR implements the complete Create, Read, Update, and Delete (CRUD) functionality for user projects, both on the backend (following MVC architecture) and frontend.
🚀 Backend Changes:
User can create and save a project linked to their profile (POST /project)
User can edit their own projects (PATCH /project)
User can delete their own projects (DELETE /project/:id)
Anyone can view public projects of a user (GET /project/allProjects)
Access control is enforced using req.user.id to ensure only the owner can modify or delete their projects.
💻 Frontend Changes:
Added project creation modal with fields: title, duration, description, skills, image/video URLs, live link, and source code link
Displayed project cards under the Projects section of the user's profile
Enabled editing a project via the card's edit button
Enabled deleting a project via the card's delete button
Public viewing of another user's project list is supported
📦 Extras:
Toast notifications for success/failure on create, edit, delete
Refactored ProjectModal, ProjectCopo, and Project components for clean logic separation
API integration uses axiosPrivate with auth headers