Forem: Mohamed Fathy The latest articles on Forem by Mohamed Fathy (@mohamed_fathy_5fbdd59a420). https://forem.com/mohamed_fathy_5fbdd59a420 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3543868%2Fc89771a1-fbc0-4984-8588-be330f6b9160.png Forem: Mohamed Fathy https://forem.com/mohamed_fathy_5fbdd59a420 en How I built a professional portfolio using React, Redux, and APIs. Mohamed Fathy Fri, 03 Oct 2025 15:12:26 +0000 https://forem.com/mohamed_fathy_5fbdd59a420/how-i-built-a-professional-portfolio-using-react-redux-and-apis-2km https://forem.com/mohamed_fathy_5fbdd59a420/how-i-built-a-professional-portfolio-using-react-redux-and-apis-2km <h1> Introduction </h1> <p>In this article, I’ll walk you through how I built my own multi-page portfolio website using React.<br><br> The goal was to showcase my projects, technical skills, blog posts, and contact form — all built with modern technologies like React, Redux, and APIs.</p> <h1> Project Goals </h1> <ul> <li>Build a responsive and professional portfolio UI.</li> <li>Use React Router for navigation between pages.</li> <li>Fetch dynamic content from real-world APIs.</li> <li>Use Redux for global state management.</li> <li>Create a contact form that actually sends messages.</li> </ul> <h1> Tech Stack </h1> <ul> <li> React (Functional Components + Hooks)</li> <li> React Router</li> <li> Redux &amp; Redux Thunk</li> <li> Axios for API calls</li> <li> Quotable API (Random quotes)</li> <li> GitHub API (Public repos)</li> <li> Dev.to API (Blog posts)</li> <li> Formspree (Contact form)</li> </ul> <h1> Pages Overview </h1> <h2> 🏠 Home </h2> <ul> <li>Short personal introduction</li> <li>Random motivational quote fetched from <a href="https://api.quotable.io/random" rel="noopener noreferrer">Quotable API</a> </li> <li>Button to load new quotes</li> </ul> <h2> 👤 About </h2> <ul> <li>Bio, education, and skills</li> <li>Responsive layout with skill tags and profile picture</li> </ul> <h2> 💻 Projects </h2> <ul> <li>GitHub repositories displayed dynamically using:</li> </ul> portfolio tutorial react api