Building my dev portfolio from scratch with MERN Stack.

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.