Building my dev portfolio from scratch with MERN Stack.
Published: 2024-01-11 13:31:32

**Intro**


In November of 2023, I decided to revamp my portfolio, realizing the importance of showcasing my work as a developer. I had previously used a generic GitHub template, which lacked the personal touch I sought. However introverted you are it is essential to put yourself out there as a developer, I decided to change my approach and started sharing my insights on Twitter while simultaneously working on a new and improved portfolio. I hope this inspires you to start showcasing your work.

This blog provides an overview of the design process, the technology stack employed, and the future of the site.

**Design Principles and Tech Stack**

I opted for a minimalistic design that prioritized visual appeal and functionality. React served as the frontend framework for the full-stack application, and Tailwind CSS provided seamless styling. The backend was powered by Node.js’s API with MongoDB as the database

**Choosing React and Tailwind**

Given the requirement of React in many front-end jobs, I choose it as my framework of choice. I also love Tailwind CSS for its ease of use and comprehensive documentation. While some components utilize normal CSS, Tailwind is easier when creating responsive designs, especially for mobile.

**Workflow**

The development process began with the front end, focusing on three core pages: Home, Blog, and Contact. The Home page featured a slider showcasing my projects using Swiper Js, with data sourced from a JSON file. 

The Blog page, more complex, required the creation of an API for fetching blogs, So I used the JSON Server tool to serve as a placeholder API for designing the blog page. 

The Contact page seamlessly integrated functions redirecting to phone and WhatsApp apps. Initially, email functionality is handled by Typeform, with a potential shift to Email.js due to limitations. Typeform only offers 10 emails per month in the free tier.

**State Management and Backend Setup**

Context API facilitated state management, storing user information in local storage. On the backend, Node.js established routes and postman for testing. The database was Mongo.

**Deployment**

Frontend hosting is on Truehost, while for the backend I leveraged Render's free tier, which essentially means the blogs will load slower.

**In summary**

Frontend Tools: React, Vite, React-Quill for rich text editing, Swiper, Slick-carousel, and Tailwind CSS.
Backend: Mongo Db and Node Js.
Site Pages: Home, Blog, Contact, and Single Post
Admin: Add Blog, edit blog, delete blog, and login.
Components: Editor, Footer, Header, Hero Section, Hero Swiper, Navlist, Post, and Single Post.

**Functionalities to add:**
Shop for selling Designs.
Payment integration through cards and M-Pesa.
Chatbot for inquiries or live chat.
Blog categories, resume/CV section.
Blog comment section.
Analytics.
Switch to redux for state management.

**Conclusion**

While this is a brief overview, the journey involved overcoming numerous challenges, which I'll delve into in Part 2 of this blog. Stay tuned for a deeper insight into problem-solving and the evolution of my developer portfolio.