SkillForge

SkillForge is a full-stack web application that helps developers plan, track, improve, and showcase their coding projects.

The app allows users to create projects, add tasks, track progress, manage technologies, view project quality scores, and organize project details from a clean dashboard.

Features

• User registration and login
• JWT authentication
• User-specific project dashboards
• Create, view, edit, and delete projects
• Add, complete, and delete project tasks
• Automatic project progress calculation
• Add technologies used in each project
• Technology badges for better project presentation
• Search projects by title, description, or technology
• Filter projects by status
• Project details page
• GitHub and live demo link fields
• Basic URL validation for GitHub and live demo links
• Project quality score system
• Portfolio readiness suggestions
• Toast notifications for user feedback
• Custom delete confirmation modal
• Responsive dark-themed UI

Tech Stack

Frontend

• React.js
• Vite
• Tailwind CSS
• React Router
• Axios
• LocalStorage for saved authentication token

Backend

• Node.js
• Express.js
• Prisma ORM
• SQLite
• JWT
• bcryptjs
• CORS
• dotenv

Pages

Home Page

The home page includes:

• Landing hero section
• Dashboard preview
• Backend connection status
• Feature cards
• How it works section
• Tech stack section
• Smart call-to-action buttons based on login status

Authentication Pages

The authentication pages include:

• Register page
• Login page
• Form validation
• Token saving after login/register
• Navbar state changes after login/logout

Projects Dashboard

The projects dashboard includes:

• Create project form
• Search and filter section
• Project cards
• Project quality score preview
• Technology badges
• Project progress bar
• Add task form
• Task list
• Edit project option
• Delete project option
• Custom delete confirmation modal

Project Details Page

The project details page includes:

• Full project information
• Technologies section
• Progress tracking
• GitHub and live demo link cards
• Full project quality score breakdown
• Strengths and improvement suggestions
• Task management
• Edit project form
• Delete project option

API Routes

Health

GET /api/health

Checks if the backend API is running.

Authentication

POST /api/auth/register
POST /api/auth/login
GET  /api/auth/me

Used for creating accounts, logging in, and checking the current logged-in user.

Users

GET  /api/users
POST /api/users

Temporary user routes used during development.

Projects

GET    /api/projects
POST   /api/projects
PUT    /api/projects/:projectId
DELETE /api/projects/:projectId

Used to create, read, update, and delete projects. Project routes are protected and return only the logged-in user's projects.

Tasks

GET    /api/projects/:projectId/tasks
POST   /api/projects/:projectId/tasks
PATCH  /api/tasks/:taskId/toggle
DELETE /api/tasks/:taskId

Used to manage project tasks. Task routes are protected so users can only manage tasks belonging to their own projects.

Database Models

User

Stores user account information.

id
name
email
password
role
projects
createdAt
updatedAt

Project

Stores project information.

id
title
description
status
progress
githubUrl
liveUrl
technologies
userId
tasks
createdAt
updatedAt

Task

Stores tasks linked to projects.

id
title
completed
projectId
createdAt
updatedAt

Project Quality Score

SkillForge includes a project quality score that checks how portfolio-ready a project is.

The score is based on:

• Description quality
• Technologies added
• Tasks added
• Completed tasks
• Valid GitHub repository link
• Valid live demo link
• Project progress

Score labels:

0-39%      Needs Work
40-69%     Good Start
70-89%     Portfolio Ready
90-100%    Excellent

The quality score appears in two places:

• Project card preview
• Full project details page

How to Run the Project Locally

1. Clone the repository

git clone <your-repository-url>
cd skillforge

2. Install frontend dependencies

cd frontend
npm install

3. Install backend dependencies

cd ../backend
npm install

4. Set up backend environment variables

Create a .env file inside the backend folder:

DATABASE_URL="file:./dev.db"
PORT=5000
JWT_SECRET="your_secret_key_here"

5. Run Prisma migration

npx prisma migrate dev

6. Generate Prisma Client

npx prisma generate

7. Run the backend

npm run dev

The backend should run on:

http://localhost:5000

8. Run the frontend

Open another terminal:

cd frontend
npm run dev

The frontend should run on:

http://localhost:5173

Current Status

The project currently supports a full authentication flow, user-specific project management, task tracking, technologies, search/filter, project details, quality scoring, toast notifications, and custom confirmation modals.

Future Improvements

• Deploy frontend to Vercel
• Deploy backend to Render
• Move production database to PostgreSQL
• Add password reset
• Add user profile settings
• Add project priority
• Add project deadline
• Add project screenshots
• Add project notes
• Add public portfolio showcase page
• Add GitHub API integration
• Add README generator
• Add CV bullet point generator
• Add Python project analyzer service
• Add export project summary feature
• Add dark/light mode toggle

Screenshots

Screenshots will be added later.

Author

Built as a full-stack learning and portfolio project.