Client For :
Own Project
Service :
Overview
Product design services involve the process of conceptualizing, creating, and refining products that meet user needs and business objectives. These services encompass various stages from initial idea to final product launch. Below are the key aspects typically included in product design services.
📝 Project Content Section
🔧 What I Did:
I built a full-stack Feedback Form Web Application using the MERN stack (MongoDB, Express.js, React.js, Node.js).
This app allows users to submit their feedback through a form and view all feedback entries dynamically.
I used Tailwind CSS and Shadcn UI for styling, and implemented REST APIs to connect the frontend and backend.
I also added real-time effects like highlighting new submissions using Date-fns.
🎯 Why I Did It:
I created this project mainly to improve my full-stack development skills and understand how real-time apps work.
My focus areas were:
✅ Learning CRUD operations (Create, Read, Update, Delete) with MongoDB and REST API.
✅ Understanding API integration between frontend (React) and backend (Express).
✅ Applying real-time UI interactions, like showing “Just now” or “5 minutes ago”.
✅ Practicing styling with Tailwind CSS, and enhancing it using Shadcn UI.
✅ Understanding component structuring and form validation in React.
✅ Learning to deploy frontend and backend separately.
📚 What I Learned:
Built complete CRUD functionality using the MERN stack.
Understood how React state and hooks can manage dynamic form inputs and responses.
Learned to fetch and render data from backend APIs with error handling.
Improved my frontend design skills using Tailwind classes for responsive layout and animations.
Used Date-fns to show live timestamps in a user-friendly format.
Gained real-time development experience, where new feedback entries highlight as they come in.
😓 Challenges I Faced:
API Integration Issues
Initially, I struggled to connect the frontend to the backend. CORS errors and wrong routes slowed me down.
I learned how to configure proper routes, base URLs, and ports for smooth data flow.
Frontend & Backend Deployment
Hosting the frontend and backend separately was confusing at first. I had trouble setting up the API base URL in production, which caused broken functionality.
Solved this by using
.envfiles and setting proper relative paths.
Tailwind Styling Difficulties
Faced trouble in centering elements, managing paddings, and creating responsive designs.
Overcame this by learning Tailwind’s flex, grid, and spacing utilities through documentation and examples.
Feedback Highlighting (Real-Time UI)
Figuring out how to highlight recent feedback entries took some trial and error.
I used a combination of
Date.now()andcreatedAttimestamps to determine which ones are new.
🔮 Future Enhancements:
Here are some features I plan to add:
Update & Delete Feedback: Add edit/delete options with authentication for secure access.
Authentication & Authorization: Users must log in to post or manage feedback.
Send Response via Email: Notify users after their feedback is received or replied to.
Feedback Expiry: Automatically remove or archive feedback after a certain time.
File Upload Option: Let users upload a screenshot or image along with their feedback.
Pagination or Load More: To handle large lists efficiently.
Admin Dashboard: For viewing feedback insights and exporting reports.
🔗LIVE : DEPLOYMENT_LINK
✅ Conclusion:
This Feedback Form project helped me grow as a MERN stack developer.
It strengthened my understanding of full-stack architecture, API integration, UI design with Tailwind, and deploying real-world apps.
I also improved my problem-solving skills while fixing bugs and layout issues.
Overall, this project gave me hands-on experience in building and deploying scalable full-stack applications, and I’m confident about taking on more complex tasks in future projects.
