https://github.com/danerxc/dane.gg
🌐 My personal portfolio website w/ admin CMS dashboard
https://github.com/danerxc/dane.gg
cms express personal-website portfolio react vite
Last synced: about 1 year ago
JSON representation
🌐 My personal portfolio website w/ admin CMS dashboard
- Host: GitHub
- URL: https://github.com/danerxc/dane.gg
- Owner: danerxc
- License: gpl-3.0
- Created: 2024-10-29T17:27:42.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-09T11:04:42.000Z (about 1 year ago)
- Last Synced: 2025-05-09T12:23:10.024Z (about 1 year ago)
- Topics: cms, express, personal-website, portfolio, react, vite
- Language: JavaScript
- Homepage: https://dane.gg
- Size: 7.65 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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:
```env
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
```sh
docker compose build
```
2. Run the image in Docker
This will automatically create a PostgreSQL Docker image with the required schema
```sh
docker compose up
```
3. Create the initial admin user in the users database:
```sh
docker compose exec web node createInitialUser.js
```
This will start:
- Backend server on port 3000
- Admin dev server on port 3001
Production
1. Build the production image
```sh
docker compose -f docker-compose.prod.yml build
```
2. Run the production Docker image
```sh
docker compose -f docker-compose.prod.yml up -d
```
3. Create the initial admin user:
```sh
docker compose -f docker-compose.prod.yml exec web node createInitialUser.js
```
## Node.js
Development
1. Install dependencies:
```sh
npm install
cd admin && npm install
```
2. Create initial admin user:
```sh
node createInitialUser.js
```
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
```
3. Start production server:
```
npm start
```
## Technologies
- Backend: 
- Frontend: 
- Admin Panel: 
- Database: 
- Real-time: 
- Authentication: 
- Container: 