My personal portfolio/blog site + admin management (CMS) dashboard

---

📌 Overview

Public Website

Notable features

• Automatic online/offline status (status from Discord)
• Automatic latest tweet status update (via Tweetshift)
• Automatic service status section for monitored services from Uptime Kuma (via webhook call)
• Real-time websocket chat (two way sync with Discord)
• Dynamic blog (managed via admin dashboard)
• Dynamic projects list (managed via admin dashboard

Admin Dashboard

Login

• Secure login page
• 2FA prompt (if setup, optional)

Statistics Page

• Displays statistics of web traffic (public pages only)
• Configurable timeframe (24h, 7d, 30d, all time)
• Displays total site visits, number of individual visitors,
• Chart displaying total visits + individual visitor changes over time
• Chart displaying individual page popularity and total page visits per page
• Table of top ten most-viewed blog posts w/ number of views per post
• Visitor countries donut chart + list of top ten countries
• List of top ten most popular visitor user agents
• Raw request logs (public pages only)

Blog Page

• List of all blog posts
• Option to create new blog post
• Edit/delete existing post functionality
• Rich-text content editor w/ preview (markdown formatting)
• Image upload functionality (thumbnail + blog post content)
• Publish/unpublish option (changes whether post is shown on public website or not)
• Blog post tagging functionality (displays on public website)

Projects Page

• List of all projects
• Seperate project list per category
• Drag'n'drop ordering of projects (order that projects are returned on public site)
• Option to create new project
• Edit/delete existing project functionality
• Project category selection dropdown + management modal to add/edit/delete categories
• Rich-text description editor w/ preview (markdown formatting)
• Image upload functionality (thumbnail)
• Featured option (if disabled, project is only shown when clicking "view all" on public site)
• Customizable button URL + text
• Project tagging functionality + management modal to add/edit/delete tags

User Management Page

• List of all available user accounts
• Ability to add new accounts
• Ability to edit/delete existing user accounts
• Ability to reset existing user passwords + reset 2FA if setup
• Only accessible by user accounts marked as admin (standard accounts cannot reach this page)

Account Page

• Management page for logged-in user
• Displays whether account is an administrator account or standard account
• Option to change username w/ availability checking
• Option to change password w/ existing password checking
• Option to setup & enable app-based 2FA authentication on account

Discord Integrations

I use a custom Discord bot for both the logic behind retrieving and displaying my latest tweet from Twitter & to enable the websockets chat to post/send from a channel in my Discord channel.

You can read the repo wiki for information on these integrations & how to set them up.

---

📂 Project Structure

• The files for the public website are located within the /public folder
• The admin panel react project is located within the /admin folder

The full project structure is shown below:

.
├── admin/             # React admin panel
├── config/            # Configuration for uptime status monitoring
├── controllers/       # API/webhook controllers
├── data/              # JSON files to store API data (latest tweet, online/offline status, services status)
├── middleware/        # Express auth/stats tracking middleware
├── public/            # Public website files
├── routes/            # Express routes
├── services/          # Express API service logic
└── server.js          # Express app entry point

---

📦 Build

Prerequisites

• Node.js 20+
• PostgreSQL database
• Docker (Recommended)

Environment Variables

Create a .env file in the root directory:

DATABASE_URL=postgresql://user:password@localhost:5432/dbname //PostgreSQL datatbase connection string
LASTFM_USERNAME=your_lastfm_username //Last.fm username
LASTFM_API_KEY=your_lastfm_api_key //API key from last.fm development account
WEBHOOK_AUTH_TOKEN=your_webhook_token //Random token to use for authorization when posting to the webhook endpoints
DEFAULT_WEATHER=snow/rain //
JWT_SECRET=your_jwt_secret

Docker (Recommended)

Development

1. Build the development image

docker compose build

2. Run the image in Docker This will automatically create a PostgreSQL Docker image with the required schema

docker compose up

3. Create the initial admin user in the users database:

docker compose exec web node createInitialUser.js <username> <password>

This will start:

• Backend server on port 3000
• Admin dev server on port 3001

Production

1. Build the production image

docker compose -f docker-compose.prod.yml build

2. Run the production Docker image

docker compose -f docker-compose.prod.yml up -d

3. Create the initial admin user:

docker compose -f docker-compose.prod.yml exec web node createInitialUser.js <username> <password>

Node.js

Development

1. Install dependencies:

npm install
cd admin && npm install

2. Create initial admin user:

node createInitialUser.js <username> <password>

3. Start development servers:

npm run dev

This will start:

• Backend server on port 3000
• Admin dev server on port 3001

Production

1. Install dependencies and build admin panel:

npm install
cd admin && npm install && npm run build
cd ..

2. Create initial admin user:

node createInitialUser.js <username> <password>

3. Start production server:

npm start

---

Technologies

• Backend:
• Frontend:
• Admin Panel:
• Database:
• Real-time:
• Authentication:
• Container: