💻 Tech Stack Tracker

A modern, lightweight web application designed to help developers track their learning progress, manage their technical skills, and visualize their software development arsenal.

---

📖 About The Project

In the fast-paced world of software engineering, keeping track of every language, framework, and tool you learn can be overwhelming. Tech Stack Tracker solves this by providing a centralized dashboard to log your skills.

This project was built to demonstrate:

• Modern frontend development practices using Vite.
• Utility-first styling methodologies with Tailwind CSS.
• Efficient DOM manipulation using vanilla JavaScript.

✨ Key Features

• ⚡ Blazing Fast: Powered by Vite's Hot Module Replacement (HMR) for instant feedback during development.
• 🎨 Responsive Design: Fully responsive UI that adapts to mobile, tablet, and desktop screens using Tailwind's grid system.
• 🛠 Modular Architecture: Component-based file structure for easy scalability.
• 🔧 Easy Customization: Tailwind configuration allows for easy theming and design updates.

⚙️ Built With

This project leverages a modern frontend ecosystem:

Tech	Usage
Vite	Next Generation Frontend Tooling for fast builds.
Tailwind CSS	A utility-first CSS framework for rapid UI development.
PostCSS	A tool for transforming CSS with JavaScript.
JavaScript (ES6+)	The core logic of the application.

---

🚀 Getting Started

Follow these instructions to set up the project on your local machine.

Prerequisites

Ensure you have Node.js (v14.18+ or v16+) installed.

node --version
npm --version

Installation

1. Clone the repository

   git clone [https://github.com/Raja-89/tech-stack-tracker.git](https://github.com/Raja-89/tech-stack-tracker.git)
   cd tech-stack-tracker

2. Install dependencies This will install Vite, Tailwind, and other necessary packages from package.json.

   npm install

3. Start the development server

   npm run dev

   The app should now be running at http://localhost:5173.

---

📜 Available Scripts

In the project directory, you can run the following commands:

Command	Description
npm run dev	Starts the development server with HMR.
npm run build	Builds the app for production to the dist folder.
npm run preview	Locally previews the production build.

---

📂 Project Structure

A detailed look at how the codebase is organized:

tech-stack-tracker/
├── node_modules/       # Project dependencies
├── src/                # Source code
│   ├── assets/         # Images, icons, and static files
│   ├── style.css       # Tailwind directives and custom CSS
│   └── main.js         # Main JavaScript logic
├── public/             # Static assets (favicon, robots.txt)
├── index.html          # Entry point (HTML template)
├── tailwind.config.js  # Tailwind CSS configuration
├── postcss.config.js   # PostCSS configuration
├── vite.config.js      # Vite configuration
├── package.json        # Manifest file for scripts & dependencies
└── README.md           # Project documentation

---

🤝 Contributing

Contributions make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

⚠️ Strict Contribution Requirements

To maintain the security and integrity of this repository, the following are mandatory for all Pull Requests:

1. DCO (Developer Certificate of Origin) Sign-off: You must sign off your commits to certify that you have the right to submit the code.

   • Command: git commit -s -m "Your commit message"

2. GPG Signature Verification: All commits must be cryptographically signed with a GPG key. Unverified commits will be rejected.

How to Contribute

1. Fork the Project
2. Create your Feature Branch

   git checkout -b feature/AmazingFeature

3. Commit your Changes (Signed & Verified)

   # Stage changes
   git add .
   
   # Commit with GPG signature (-S) and DCO sign-off (-s)
   git commit -S -s -m "feat: Add some amazing feature"

4. Push to the Branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

---

🐛 Troubleshooting

Issue: Tailwind styles are not applying.

• Fix: Ensure the dev server is running (npm run dev). Tailwind scans your HTML/JS files in real-time to generate styles.
• Fix: Check tailwind.config.js and ensure the content array includes the path to your files (e.g., "./index.html", "./src/**/*.{js,ts,jsx,tsx}").

Issue: "vite" is not recognized.

• Fix: Ensure you ran npm install before trying to start the server.

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

👤 Author

Raja-89

• GitHub: @Raja-89