Skip to content

web ui enhancement #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
komalharshita merged 1 commit into from
Mar 30, 2026
Merged

web ui enhancement #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 54 additions & 89 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,143 +1,108 @@
# Contributing to DevPath
# Contributing to Skill to Project Recommender

Thank you for your interest in contributing to DevPath.

This project is designed to be beginner-friendly, so even if you are new to open source, you are welcome to contribute.
Thank you for your interest in contributing. This project is built for learners, so all skill levels are welcome. Below are simple steps to make your first contribution.

---

## Getting Started

### 1. Fork the Repository
## Before You Start

Click the "Fork" button on the top right of the repository page.
- Read the README.md to understand how the project works
- Look at the open issues on GitHub for tasks labeled `good first issue`
- Make sure you have Python 3.8 or higher and Git installed

---

### 2. Clone Your Fork
## Step 1: Fork the Repository

```bash
git clone https://github.com/your-username/devpath.git
cd devpath
````
Click the Fork button on the top-right of the GitHub repository page. This creates a personal copy of the project under your GitHub account.

---

### 3. Create a New Branch
## Step 2: Clone Your Fork

```bash
git checkout -b feature/your-feature-name
git clone https://github.com/your-username/skill-project-recommender.git
cd skill-project-recommender
```

---

## Making Changes
## Step 3: Create a New Branch

* Keep code simple and readable
* Add comments where necessary
* Follow the existing project structure
* Do not introduce unnecessary complexity

---

## Types of Contributions

You can contribute by:

* Fixing bugs
* Improving UI
* Refactoring code
* Adding new features
* Improving documentation

---

## Running the Project
Always create a new branch for your changes. Never work directly on the `main` branch.

```bash
pip install -r requirements.txt
python app.py
git checkout -b your-branch-name
```

---

## Running Tests
Use a short, descriptive branch name, for example:

```bash
python -m unittest tests/test_basic.py
```
- `fix-form-validation`
- `add-new-projects`
- `improve-card-layout`

---

## Code Style Guidelines
## Step 4: Make Your Changes

* Use meaningful variable names
* Keep functions small and focused
* Add single-line comments for clarity
* Follow consistent indentation (4 spaces)
- Follow the existing code style and structure
- Add a short single-line comment above any new logic you write
- If adding new projects to `projects.json`, follow the existing data format
- If adding a new starter code file, place it in the `starter_code/` folder

---

## Branch Naming Convention
## Step 5: Test Your Changes Locally

Use the following format:
Start the Flask server and verify your changes work as expected:

* feature/add-search
* fix/ui-alignment
* docs/update-readme
```bash
python -m venv venv
source venv/bin/activate # or venv\Scripts\activate on Windows
pip install -r requirements.txt
python app.py
```

---
Open `http://127.0.0.1:5000` and test the feature you changed.

## Pull Request Process
---

1. Ensure your code works properly
2. Run tests before submitting
3. Write a clear PR title and description
4. Link the issue you are solving (if applicable)
## Step 6: Commit Your Changes

Example:
Write a clear and short commit message that describes what you changed:

```bash
git add .
git commit -m "Add three new beginner Python projects to dataset"
```
Title: Improve project card layout

Description:
- Updated card spacing
- Improved readability

Fixes #12
```
Avoid vague messages like "fix stuff" or "update".

---

## Issue Selection Guide
## Step 7: Push and Open a Pull Request

If you are a beginner:

* Look for issues labeled:
```bash
git push origin your-branch-name
```

* good first issue
* help wanted
Then go to your fork on GitHub and click "Compare and pull request". Fill in:

Start with UI or documentation tasks before moving to logic improvements.
- A short title describing your change
- A brief description of what you changed and why

---

## Things to Avoid
## Code Guidelines

* Do not submit unrelated changes
* Do not copy code from external sources without understanding
* Do not make large changes without discussion
- Keep code simple and easy to read for beginners
- Do not use advanced libraries or frameworks not already in the project
- Follow the existing naming style: lowercase with underscores for Python, camelCase for JavaScript
- Do not leave unused code or debug print statements in your submission
- One feature or fix per pull request — keep changes focused

---

## Need Help?

If you get stuck:
## Questions

* Ask questions in issue comments
* Seek clarification before implementing


Every contribution matters.

---
If you are unsure about anything, open a GitHub Discussion or comment on the relevant issue. No question is too basic.
163 changes: 162 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,162 @@
# DevPath
# Skill to Project Recommender

A beginner-friendly open-source web application that recommends project ideas based on your skills, experience level, area of interest, and available time.

Enter what you know and what you enjoy, and the app returns tailored project ideas complete with feature lists, tech stacks, step-by-step roadmaps, and starter code templates.

---

## Features

- Personalized project recommendations based on skills, level, interest, and time
- Clear roadmap for each recommended project
- Ready-to-run starter code templates for every project
- Simple, clean interface built with plain HTML, CSS, and JavaScript
- Rule-based backend written in Python with Flask
- No database required — all data is stored in a JSON file
- Beginner-friendly codebase with single-line comments throughout

---

## Tech Stack

| Layer | Technology |
|----------|---------------------|
| Backend | Python, Flask |
| Frontend | HTML, CSS, JavaScript |
| Data | JSON file |

---

## Project Structure

```
skill-project-recommender/
|
|-- app.py Main Flask application
|-- requirements.txt Python dependencies
|-- README.md Project documentation
|-- CONTRIBUTING.md Contribution guidelines
|-- .gitignore Git ignore rules
|
|-- data/
| |-- projects.json Sample project dataset
|
|-- templates/
| |-- index.html Main HTML page
|
|-- static/
| |-- style.css Stylesheet
| |-- script.js Frontend JavaScript
|
|-- starter_code/
| |-- expense_tracker.py Starter template
| |-- weather_dashboard.html
| |-- grade_manager.py
| |-- task_api.py
| |-- portfolio.html
| |-- url_shortener.py
| |-- data_report.py
|
|-- docs/
|-- project_overview.md Project overview document
```

---

## Setup Instructions

Follow these steps to run the project on your local machine.

### 1. Clone the repository

```bash
git clone https://github.com/your-username/skill-project-recommender.git
cd skill-project-recommender
```

### 2. Create a virtual environment

```bash
python -m venv venv
```

Activate it:

- On macOS and Linux:
```bash
source venv/bin/activate
```
- On Windows:
```bash
venv\Scripts\activate
```

### 3. Install dependencies

```bash
pip install -r requirements.txt
```

### 4. Run the application

```bash
python app.py
```

### 5. Open in your browser

Navigate to `http://127.0.0.1:5000` in any web browser.

---

## How It Works

The recommendation engine in `app.py` uses a simple rule-based scoring system:

1. Each project in `data/projects.json` is scored against the user's inputs.
2. A skill match adds 3 points per matching skill.
3. A level match adds 2 points.
4. An interest match adds 2 points.
5. A time availability match adds 1 point.
6. The top 3 highest-scoring projects are returned.

---

## Adding Your Own Projects

Open `data/projects.json` and add a new object following this format:

```json
{
"id": 8,
"title": "Your Project Title",
"skills": ["Python"],
"level": "Beginner",
"interest": "Web",
"time": "Low",
"description": "A short description of what this project builds.",
"features": ["Feature one", "Feature two"],
"tech_stack": ["Python", "Flask"],
"roadmap": ["Step 1: ...", "Step 2: ..."],
"resources": ["Resource name: https://example.com"],
"starter_code": "starter_code/your_template.py"
}
```

Valid values:
- `level`: `Beginner`, `Intermediate`, `Advanced`
- `interest`: `Web`, `Data`, `Education`, `Automation`, `Games`
- `time`: `Low`, `Medium`, `High`

---

## Contributing

Contributions are welcome. Please read [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines on how to get started.

---

## License

This project is open source and available under the [MIT License](LICENSE).
Loading
Loading