1st. QUANBLUE's Portfolio

My first portfolio project using MERN stack

Demo • Documentation • Report Bug • Request Feature

PC demo

Mobile demo

📖 Table of Contents

• Demo
• Key features
• Getting start
  • Prerequisites
  • Environment Variables
  • Run locally
    • Manually
    • Using Docker compose
    • Using Docker
• Monitoring and Logging
• CI/CD
• Roadmap
• Contributors
• Credits
• License
• Related Projects

📽️ Demo

Check out deployed app:

• Frontend: https://quanblue.netlify.app/
• Server: https://portfolio-n0cz.onrender.com

⭐ Key features

• Responsive design - Dynamic responsive for all devices (mobile, desktop)
• MERN stack - Stack used for building web applications
• Monitoring and Logging - Helping to ensure system reliability, troubleshoot issues, and gain insights into system performance
• CI/CD - Deliver code changes frequently and reliably

🧰 Getting start

📌 Prerequisites

• NodeJS >= v14.17.3
• npm >=8.3.1

🔑 Environment Variables

To run this project, you need to add the following environment variables to your .env :

• Server configs: Create .env file in ./

  • DB_CONNECT: API key of MongoDB to connect MongoDB's database.
  • DISCORD_WEBHOOK_URL: Discord webhook URL to send alerts notification.

    Check Making a Webhook to know how to create a webhook.

  Example:

  # .env
  #  DB guess credentials key (Read only)
  DB_CONNECT = mongodb+srv://guess:0aGRADHax24DXzCL@cluster0.wgaas.mongodb.net/portfolio
  
  # Discord webhook URL
  DISCORD_WEBHOOK_URL=https://discord.com/api/webhooks/YOUR_SERVER_ID_HERE

• Client configs (Optional): Create .env file in ./client

  • REACT_APP_SERVER_URL: URL of server.

  Example:

  # .env
  # Server URL or Empty if run server locally
  REACT_APP_SERVER_URL = https://portfolio-n0cz.onrender.com

You can also check out the file .env.example to see all required environment variables.

Note: If you want to use this example environment, you need to rename it to .env.

🛠️ Run locally

Manually

# Clone this repository
git clone https://github.com/QuanBlue/Portfolio.git

# Go into the repository
cd Portfolio

# Install client and server dependencies
npm run install-dependency

Run client and server separately in 2 terminals:

# Run client
npm run client

# Run server
npm run server

Note If you're using Linux Bash for Windows, see this guide or use node from the command prompt.

Using Docker compose

docker-compose up

Using Docker

Run server

docker run -d -p 5000:5000 --name portfolio-server ghcr.io/quanblue/portfolio-server:latest

Run client

docker run -d -p 3000:3000 --name portfolio-client ghcr.io/quanblue/portfolio-client:latest

Access client at http://localhost:3000
Access server at http://localhost:5000

🔭 Monitoring and Logging

Note: You need to run the project with Docker compose to use this feature.

Both infrastructure monitoring and application telemetry use:

• Prometheus to scrape metrics from the application.
• You can then observe these metrics using Grafana dashboards.
• alertmanager to send alerts notification to Discord webhook.

Prometheus

To see the Prometheus targets go to http://localhost:9090/targets.

Grafana dashboards

To view Grafana dashboards go to http://localhost:7070 and log-in with:

User: admin
Password: admin

Alertmanager To see the Alertmanager go to http://localhost:9093/#/alerts.

Note: Open Discord to see the alerts notification.

⚙️ CI/CD

Using Github Actions to:

• Deploy the project to Netlify and Render.
• Package the project to Docker image and push to Github Container Registry.

CI/CD progress run automatically when you pull, push to master branch or manually run.

Note: watch the CI/CD flow in .github/workflows/

🗺️ Roadmap

• Application
  • Web UI - ReactJS
  • Backend - MongoDB - Rest API
• Dockerize project
• Continuous deployment - Github Actions
  • Frontend - Netlify
  • Backend - Render
  • Deploy package
• Monitoring and Logging
  • Scrape metrics - Prometheus
  • Alert
    • Prometheus Alertmanager
    • Discord webhook
  • Data visualization - Grafana

👥 Contributors

Contributions are always welcome!

✨ Credits

This software uses the following open source packages:

• ReactJS - Frontend
• ExpressJS - Backend
• Node.js - Environment
• npm - Package manager

This software deployed by the following hosting services:

• Netlify - Deploy frontend
• Render - Deploy backend

Monitoring and Logging:

• Grafana - Visualization
• Prometheus - Data collection
• Youtuber @evanugarte

Emoji and Badges from:

• github@thebespokepixel - Badges
• github@WebpageFX - Emoji

📜 License

Distributed under the MIT License. See LICENSE for more information.

🔗 Related Projects

• QuanBlue: My bio
• Portfolio: My first portfolio website, using MERN stack. Visit here
• Readme-template: A template for creating README.md

---

Bento @quanblue  ·  GitHub @QuanBlue  ·  Gmail quannguyenthanh558@gmail.com