---

📊 Repository Badges

---

📌 Quick Access

• README.md
• LICENSE
• config/.gitignore
• config/.prettierrc.json
• config/.prettierignore
• config/.gitattributes
• config/.editorconfig
• src/

---

📋 Table of Contents

1. Description
2. Demo
3. Goals
4. Technologies
5. Prerequisites
6. Installation & Usage
7. Project Structure
8. Useful Scripts
9. Features
10. Environment Variables
11. Known Issues
12. Roadmap
13. Project Status
14. Contributing
15. License
16. Contact
17. Credits

---

Description

Project Name is a boilerplate for small web projects using **HTML, CSS, and JavaScript, configured with **Prettier and ESLint**.

It ensures best practices from the start and allows scaling to more complex setups (React, Next.js, etc.).

---

Demo

Screenshot or live example of the app:

🔗 Live Demo Not yet available

---

Goals

• Provide a professional starter template.
• Maintain code quality via ESLint and Prettier.
• Document the project with a clean README.
• Prepare for future integrations (frameworks, testing, CI/CD).

---

Technologies

• HTML5
• CSS3
• JavaScript ES6+
• ESLint
• Prettier
• pnpm

---

Prerequisites

• Node.js ≥ 18
• pnpm (npm install -g pnpm)
• Git
• VSCode with extensions:
  • Prettier
  • ESLint
  • Live Server

---

Installation & Usage

# Clone the repository

git clone https://github.com/<user>/<repo>.git
cd <repo>

# Install dependencies

pnpm install

# Start local server

pnpm dev

📝 Notes

• Open src/index.html in your browser or run with Live Server in VSCode.
• pnpm dev requires live-server installed as a dev dependency:
• pnpm add -D live-server

---

Project Structure

project-name/
├─ .vscode/
│  ├─ settings.json
│  └─ extensions.json
├─ src/
│  ├─ index.html
│  ├─ styles.css
│  ├─ main.js
├─ img/
├─ eslint.config.js
├─ .prettierrc.json
├─ .prettierignore
├─ .gitignore
├─ .gitattributes
├─ package.json
├─ pnpm-lock.yaml
├─ LICENSE
└─ README.md

---

Useful Scripts

Defined in package.json:

{
  "scripts": {
    "dev": "live-server src",
    "lint": "eslint . --ext .js,.ts",
    "lint:fix": "eslint . --ext .js,.ts --fix",
    "format": "prettier --check .",
    "format:fix": "prettier --write ."
  }
}

Usage:

pnpm lint         # Check ESLint errors
pnpm lint:fix     # Fix ESLint errors
pnpm format       # Check Prettier formatting
pnpm format:fix   # Apply Prettier formattin

---

Features

• ✅ Preconfigured ESLint + Prettier
• ✅ Supports JavaScript and TypeScript
• ✅ Clear modular structure (src/, img/, .vscode/)
• 🚧 Pending: UI framework integration (React/Tailwind)

---

Environment Variables

Example .env.example:

API_URL=https://api.ejemplo.com
API_KEY=clave-super-secreta

---

Roadmap

• Add unit tests
• Configure CI/CD with GitHub Actions
• Automatic deploy on Vercel
• Migrate to framework (React/Next.js)

---

Project Status

Version: 0.1.0-beta

Status: In progress

---

Contributing

1. Fork the repository
2. Create a new branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'feat: add feature')
4. Push the branch (git push origin feature/your-feature)
5. Open a Pull Request

⚠️ Guidelines: Conventional Commits + small, well-documented PRs.

---

License

This project is licensed under the MIT License.
See LICENSE for details.

---

Contact

• GitHub: ferran-cipres
• LinkedIn: Ferran Ciprés
• Email: [email protected]

---

Credits

• FreeCodeCamp Guide
• Adapted by Ferran Ciprés