{"id":27970077,"url":"https://github.com/aleksanderveriksen/react-react_portfolio","last_synced_at":"2026-04-08T16:03:49.055Z","repository":{"id":278752190,"uuid":"885854535","full_name":"AleksanderVEriksen/React-React_portfolio","owner":"AleksanderVEriksen","description":"Portfolio created using React, HTML, CSS, JS with nodejs, vite. Also integrated using a server with SQL to fetch images. Deployed with Github action","archived":false,"fork":false,"pushed_at":"2026-03-27T20:45:47.000Z","size":7420,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-28T02:45:28.962Z","etag":null,"topics":["cicd","github","github-actions","github-pages","html-css-javascript","nodejs","react","server","sql","vite"],"latest_commit_sha":null,"homepage":"https://aleksanderveriksen.no/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AleksanderVEriksen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-11-09T15:15:01.000Z","updated_at":"2026-03-27T20:45:28.000Z","dependencies_parsed_at":"2025-05-07T21:56:25.612Z","dependency_job_id":"22d89185-f79e-4ad9-b015-1a4976bd3a53","html_url":"https://github.com/AleksanderVEriksen/React-React_portfolio","commit_stats":null,"previous_names":["aleksanderveriksen/react-react_portfolio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AleksanderVEriksen/React-React_portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AleksanderVEriksen%2FReact-React_portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AleksanderVEriksen%2FReact-React_portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AleksanderVEriksen%2FReact-React_portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AleksanderVEriksen%2FReact-React_portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AleksanderVEriksen","download_url":"https://codeload.github.com/AleksanderVEriksen/React-React_portfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AleksanderVEriksen%2FReact-React_portfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31562697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cicd","github","github-actions","github-pages","html-css-javascript","nodejs","react","server","sql","vite"],"created_at":"2025-05-07T21:56:18.344Z","updated_at":"2026-04-08T16:03:49.050Z","avatar_url":"https://github.com/AleksanderVEriksen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Portfolio App (React + Vite + Node/Express + MySQL)\n\n## Overview\n\n- Frontend: React (Vite) single-page app with sections: Profile, About, Experience, and Projects.\n- Backend: Node/Express API serving content from a MySQL database.\n- Data: Components like `Profile`, `Experience`, and `Projects` can fetch from the backend (e.g., `http://localhost:3308/profile`).\n\nFolder layout\n\n- Frontend app: root (Vite project) with sources under `src/`\n- Static assets: `public/assets/...`\n- Backend API: `database/server.js` with `database/package.json`\n\n## Prerequisites\n\n- Node.js 18+ and npm\n- MySQL server running locally (or hosted) with a database named `my_db`\n- Tables expected by the app: `nav`, `profile`, `experience`, `skillset`, `projects`\n\nThe backend is currently configured for local MySQL:\n\n```cmd\nhost: localhost\nuser: root\nport: 3307\npassword: password\ndatabase: my_db\n```\n\nUpdate these as needed in `database/server.js` or via environment variables for production.\n\n## Local Development\n\n### 1) Start the backend API (Express + MySQL)\n\n```cmd\ncd database\nnpm install\n# Install required dependencies if not already present\nnpm install express mysql cors nodemon --save\n\n# Option A: start with nodemon (auto-restart on changes)\nnpm start\n\n# Option B: start directly with node\nnode server.js\n```\n\nBackend listens on `http://localhost:3308`.\n\nEnsure your MySQL instance is running and the `my_db` schema/tables exist.\n\n### 2) Start the frontend (Vite dev server)\n\n```cmd\ncd ..\nnpm install\nnpm run dev\n```\n\nVite dev server runs on a port like `http://localhost:5173` by default.\n\nNotes on assets\n\n- Place project images and icons under `public/assets/...`\n- Components may reference assets directly (e.g., `/assets/about/code_image.jpg`).\n- If using helper functions like `getImageUrl`, ensure the base URL they use is reachable during development.\n\n## Build\n\n```cmd\nnpm run build\n```\n\nOutputs production assets to `dist/`. You can preview with:\n\n```cmd\nnpm run preview\n```\n\n## CI/CD Options\n\n### Frontend deployments\n\n- Vercel: Import the repo, set Build Command `npm run build`, Output Directory `dist`. Vercel will auto-detect Vite.\n- Netlify: Use \"Deploy settings\" → Build command `npm run build`, Publish directory `dist`. Enable continuous deployment from your repo.\n- GitHub Pages: Build locally and push `dist` to a `gh-pages` branch (or use an action). Ensure `vite.config.js` `base` is set if deploying under a subpath.\n\nSample GitHub Actions workflow (frontend build only):\n\n```yaml\nname: build\non:\n push:\n  branches: [ main ]\njobs:\n build:\n  runs-on: ubuntu-latest\n  steps:\n   - uses: actions/checkout@v4\n   - uses: actions/setup-node@v4\n    with:\n     node-version: 18\n   - run: npm ci\n   - run: npm run build\n   - name: Upload artifact\n    uses: actions/upload-artifact@v4\n    with:\n     name: dist\n     path: dist\n```\n\n### Backend deployments\n\n- Render/Railway/Fly.io: Create a service for the Express app, set the start command (e.g., `node server.js`), and configure environment variables for DB connection.\n- Hosted MySQL (e.g., PlanetScale, AWS RDS, Azure MySQL): point the Express app to the hosted DB and open firewall rules as needed.\n\nImportant: Replace hard-coded DB config in `database/server.js` with environment variables for production, for example:\n\n```js\nconst db = mysql.createConnection({\n host: process.env.DB_HOST,\n user: process.env.DB_USER,\n port: Number(process.env.DB_PORT),\n password: process.env.DB_PASSWORD,\n database: process.env.DB_NAME\n});\n```\n\nExpose the port (3308 by default) and ensure CORS is configured for your frontend domain.\n\n## Common Troubleshooting\n\n- 404 on images: Verify assets exist under `public/assets/...` and paths in components are correct.\n- CORS errors: Ensure `cors()` is used in `server.js` and your frontend origin is permitted.\n- MySQL connection errors: Check credentials, DB name, and that MySQL is listening on the expected port.\n- API fetches fail: Confirm the backend is running on `http://localhost:3308` and routes match (`/about`, `/profile`, etc.).\n\n## Scripts\n\n- Frontend dev: `npm run dev`\n- Frontend build: `npm run build`\n- Backend dev: `npm start` (nodemon) or `node server.js`\n\n## Tech\n\n- React + Vite\n- Node/Express\n- MySQL\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faleksanderveriksen%2Freact-react_portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faleksanderveriksen%2Freact-react_portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faleksanderveriksen%2Freact-react_portfolio/lists"}