{"id":25519466,"url":"https://github.com/moinmn/portfolio","last_synced_at":"2026-04-03T23:34:22.172Z","repository":{"id":278403407,"uuid":"935500124","full_name":"MoinMN/portfolio","owner":"MoinMN","description":"This is a dynamic portfolio website built using the MERN Stack (MongoDB, Express, React, Node.js). It features an admin panel for managing content, sections for About Me, Services, Projects, Skills, Contact, and Client Testimonials. Additionally, it includes a secure testimonial submission system with OTP verification and an automated contact email","archived":false,"fork":false,"pushed_at":"2025-02-19T15:20:18.000Z","size":31258,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-19T16:23:01.114Z","etag":null,"topics":["bootstrap5","cloudinary","express","font-awesome","framer-motion","mern","mern-stack","mongodb","mongoose","nextjs","node","nodemailer","react-icons","reactjs","shadcn-ui","three-js","threejs"],"latest_commit_sha":null,"homepage":"https://portfolio-api-moin-mn.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MoinMN.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-19T14:47:16.000Z","updated_at":"2025-02-19T15:20:22.000Z","dependencies_parsed_at":"2025-02-19T16:33:07.231Z","dependency_job_id":null,"html_url":"https://github.com/MoinMN/portfolio","commit_stats":null,"previous_names":["moinmn/portfolio"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoinMN%2Fportfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoinMN%2Fportfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoinMN%2Fportfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoinMN%2Fportfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MoinMN","download_url":"https://codeload.github.com/MoinMN/portfolio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239699581,"owners_count":19682575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap5","cloudinary","express","font-awesome","framer-motion","mern","mern-stack","mongodb","mongoose","nextjs","node","nodemailer","react-icons","reactjs","shadcn-ui","three-js","threejs"],"created_at":"2025-02-19T17:19:41.978Z","updated_at":"2025-12-21T06:30:16.318Z","avatar_url":"https://github.com/MoinMN.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MERN Stack Portfolio Website\n\n## 🚀 Overview\n\nThis is a **dynamic portfolio website** built using the **MERN Stack (MongoDB, Express, React, Node.js)**. It features an admin panel for managing content, sections for About Me, Services, Projects, Skills, Contact, and Client Testimonials. Additionally, it includes a **secure testimonial submission system** with OTP verification and an automated contact email system.\n\n---\n\n## 📌 Features\n\n### 🔹 **Public Features**\n\n- **About Me** - Dynamic information about the developer.\n- **Services** - List of services provided.\n- **Projects** - Showcasing projects with descriptions and links.\n- **Skills** - Technologies and skills used by the developer.\n- **Contact Page** - Users can send a message, and the developer will receive an email notification.\n- **Client Testimonials** - Display client feedback dynamically.\n- **Submit Testimonial** - A secure route (`/post-testimonial`) where clients can submit testimonials **only if authorized**.\n- **3D PC Model** - A **realistic PC model rendered using Three.js**.\n\n### 🔹 **Admin Features** (`/admin`)\n\n- Admin login (Created manually in the database for security; no API available for account creation).\n- Manage and update dynamic data (About, Services, Projects, Skills, Contact Page, and Testimonials).\n- Review and approve testimonials before allowing clients to post.\n\n### 🔹 **Testimonial Submission Flow** (`/post-testimonial`)\n\n1. The user enters their email.\n2. The backend verifies if the admin has allowed them to post a testimonial.\n3. If approved, an **OTP is sent via Nodemailer**.\n4. The user enters the OTP and submits their testimonial.\n\n### 🔹 **Automated Contact Form**\n\n- When someone sends a message via the contact form, an **email is sent to the developer**.\n\n---\n\n## 🛠️ Tech Stack\n\n### 🔹 **Frontend**\n\n- React.js (Vite)\n- Tailwind CSS\n- ShadCN UI Components (Modern UI)\n- Framer Motion (Animations)\n- Three.js (3D Model Rendering)\n- React Router DOM\n- React Icons \u0026 FontAwesome\n- Axios\n- Bootstrap\n\n### 🔹 **Backend**\n\n- Node.js\n- Express.js\n- MongoDB (Mongoose)\n- JWT Authentication\n- Cloudinary (For image uploads)\n- Nodemailer (For OTP \u0026 Contact Emails)\n\n---\n\n## 💽 Project Structure\n\n### 🔹 **Backend Folder Structure**\n\n```\nbackend/\n├── models/       # Mongoose Models\n├── routes/       # API Routes\n├── controllers/  # Business Logic\n├── middleware/   # Authentication \u0026 Security\n├── template      # For Email HTML Templates\n├── config/       # Database \u0026 Environment Configs\n├── utils/        # Helper Functions\n├── .env          # Environment Variables\n└── index.js      # Main Express Server\n```\n\n### 🔹 **Frontend Folder Structure**\n\n```\nfrontend/\n├── src/\n│   ├── components/      # Reusable UI Components\n│   ├── pages/           # React Pages\n│   ├── api/             # Axios API Calls\n│   ├── assets/          # Static Assets\n│   ├── config/          # Configuration Files\n│   │   └── BackendURL.jsx # Backend API URL\n│   ├── App.jsx          # Main App Component\n│   ├── index.js         # Entry Point\n│   ├── styles/          # Tailwind Styles\n│   ├── router/          # React Router Setup\n└── .env                 # Environment Variables\n```\n\n---\n\n## 🔧 Setup Instructions\n\n### 📌 **1. Clone the Repository**\n\n```bash\ngit clone https://github.com/MoinMN/portfolio.git\ncd portfolio\n```\n\n### 📌 **2. Backend Setup**\n\n```bash\ncd backend\nnpm install\n```\n\nCreate a `.env` file inside `backend/` and add the following:\n\n```env\nPORT='4518'\nFRONTEND_URL='http://localhost:5173'\n\n# Developer Email\nDEV_EMAIL='your-email@example.com'\n\n# Default Client Profile Image\nDEFAULT_CLIENT_IMG_SRC='/src/assets/default-client-profile.jpg'\n\n# Database Connection\nMONGO_URL='your-mongodb-url'\n\n# JWT Secret Key\nJWT_SECRET_KEY='your-secret-key'\n\n# Nodemailer Configuration\nEMAIL_ADDRESS='your-email@example.com'\nEMAIL_PASSCODE='your-email-password'\n\n# Cloudinary API Credentials\nCLOUDINARY_CLOUD_NAME='your-cloudinary-name'\nCLOUDINARY_API_KEY='your-cloudinary-key'\nCLOUDINARY_API_SECRET='your-cloudinary-secret'\n```\n\nRun the backend server:\n\n```bash\nnpm start\n```\n\n### 📌 **3. Frontend Setup**\n\n```bash\ncd frontend\nnpm install\n```\n\nUpdate the API base URL in `src/config/BackendURL.jsx`:\n\n```js\nconst BASE_URL = 'http://localhost:4518';\nexport default BASE_URL;\n```\n\nRun the frontend server:\n\n```bash\nnpm run dev\n```\n\n---\n\n## 🔒 Security Measures\n\n- **Admin Login**: Created manually in the database; no API for admin registration.\n- **OTP Verification**: Prevents unauthorized testimonials.\n- **JWT Authentication**: Protects API routes.\n- **CORS Handling**: Secure backend API requests.\n- **Cloudinary Integration**: Secure image storage.\n- **ShadCN UI Components**: Improved UI security and performance.\n\n---\n\n## 🌟 Contribution \u0026 Feedback\n\nFeel free to open issues or contribute by creating a pull request. Your feedback is appreciated!\n\n### **Developer Contact**\n\n💎 Email: moinnaik98@gmail.com\n\n💛 If you like this project, don't forget to give it a star on GitHub! ⭐","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoinmn%2Fportfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoinmn%2Fportfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoinmn%2Fportfolio/lists"}