My full stack blog based portfolio site
Tags: portfolio, career, beginners, webdev
Published: 2020-02-14 13:02:28

---
title: My full stack blog based portfolio site
published: true
description: In this blog I talked about how I build my portfolio site, which technologies I have used and what features my site have.
tags: #portfolio #career #beginners #webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/rjrmsm98q0dssb858oqp.png
---
Hello everyone!👋 I have been working on my portfolio site and it is now live. It's a blog based site where I will write about my web technologies. It's a full stack project, this is my first full stack project. Please give some feedback on it. To see my website visit:- https://iamismile.herokuapp.com

Now I'm going to talk a little bit about myself and my website here. I'm new in web development. Eight month passed away that I'm learning web development. I have learned modern technologies: React.js, Node.js, Express, MongoDB, Mongoose. So I've decided to build my own project, a big project, where I can learn more, implement my knowledge and face some real world problems. And I decided to build a blog site for myself where I can share my thoughts and which also helps me to find a good job.

✨ Lets talk about my website **Stack**, **Design**, **Features** and **Security**.

## ✔ Stack:
The website build with modern technologies. It is an API and Server-Side rendered website. To check my website API visit: https://iamismile.herokuapp.com/api/v1/tidbits

🔹 **Client-Side(i.e. frontend):-** HTML, CSS, JavaScript.

🔹 **Server-Side(i.e. backend):-** Node.js(JavaScript runtime).

🔹 **Database:-** MongoDB(NoSQL).

🔹 **Image Management:-** Cloudinary.

🔹 **Email Services:-** SendGrid(For server-side), EmailJS(For client-side).

🔹 **Deployment & Hoisting:-** GitHub, Heroku.

🔹 **Web Performance:-** Lighthouse Chrome DevTools.

![Website Performance](https://dev-to-uploads.s3.amazonaws.com/i/dyzokcj3s6q1h25m0ta1.png)

## ✔ Design:
The website is designed with mobile first design. I try to keep all the pages simple and nice looking.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ajpw7i4rxcnf2ogdbxj3.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f1mnnhi3ibz2owop6o1p.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/em879frwaglhqhjjbguy.png)

## ✔ Features:
- RESTful API design with advance features: filtering, sorting, pagination.
- Used MVC architecture.
- Complete modern authentication: login, password reset.
- Uploading files and Image processing.
- Send email with SendGrid and EmailJS.
- Advance error handling.
- Used Markdown to write blogs.
- Code Style Practices: Used ESLint.
- Testing: For testing I used ***Postman***(manual testing).

## ✔ Security:
Security is an important thing for a website. So some security best practices for my website are given below:

- Compromised database: Strong encrypt password & password reset token.
- Brute Force Attacks: Implement rate limiting.
- Cross-Site Scripting (XSS) Attacks: Sanitize input data.
- Denial of Service (DOS) Attacks: Implement rate limiting.
- NoSQL query injection.
- Use HTTPS.
- Random password reset token with expiry dates.
- Deny access to a authenticated web pages after password reset. 

Thanks for reading and stay tuned. Don't forget to give feedback.🙂