Building my dev portfolio from scratch with MERN Stack.

gilbert-kiana — Thu, 11 Jan 2024 13:31:32 +0000

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.

Handling Image Uploads in Node with Multer and Cloudinary

gilbert-kiana — Thu, 04 Jan 2024 10:45:35 +0000

Hey there! 👋 I recently ran into a bit of a challenge while creating my portfolio. I had a blog page with cover images, and initially, I used Multer to upload images to a local folder on my server. Everything worked like a charm until I decided to host my site on Render directly from GitHub. The images weren't uploading to GitHub, which wasn't surprising.

I decided to use cloud-based storage and opted for Cloudinary. In this guide, I'll walk you through how I set up Cloudinary on my server integrated it with Multer, and saved the image links to MongoDB.Solving my problem.

I started by installing the dependencies.

npm install multer cloudinary dotenv

Before diving into code, I had to set up Cloudinary account and grab my API key, API secret, and cloud name from the dashboard. I added a .env file in my server's root folder and populated it like this:

CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
CLOUDINARY_CLOUD_NAME=your_cloud_name

Next, I created a utils folder and within it, a file named cloudinary.js to configure my Cloudinary setup:

// utils/cloudinary.js

const cloudinary = require('cloudinary').v2;
require('dotenv').config();

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

module.exports = cloudinary;

Now, in my root folder, I set up a middleware folder, and within it I Created a file named multer.js to configure Multer:

// multer.js

const multer = require('multer');

const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

module.exports = upload;

imported these two files into my post controllers like this:

// Your post controllers file


const cloudinary = require('./utils/cloudinary');
const upload = require('./multer');

Now, in my post route, I can upload a file and wait until it's uploaded using a promise before adding the rest of the form data from the body. Here's how my post route looks:

DEV Community: gilbert-kiana

Building my dev portfolio from scratch with MERN Stack.

Handling Image Uploads in Node with Multer and Cloudinary