README.MD

💡 About   |    ✨ Features   |    🚀 Technologies   |    🎯 Getting Started   |    📋 Commit Standards   |    📝 License

💡 About the Project

Ecoleta is a waste collection marketplace that helps people find collection points efficiently. The project features a responsive web interface with search functionality and dynamic point registration, optimized for all screen sizes. With SQLite integration and robust error handling, it provides a reliable platform for connecting waste collectors with those seeking proper disposal methods.

✨ Features

• 🔍 Search for Collection Points

  • Modal-based search interface
  • City and state filtering
  • Dynamic search with database integration
  • Real-time results display
  • Intuitive search experience

• 📝 Collection Point Registration

  • Form with required field validation
  • Dynamic UF and City selection using IBGE API
  • Interactive items grid with visual feedback
  • Responsive form layout with styled field groups
  • Success and error feedback modals

• 🎨 Interface Components

  • Responsive header with dynamic navigation
  • Mobile-first design with optimized layouts
  • Modal system for search interface
  • Custom styled buttons with hover effects
  • Optimized for screens as small as 375px

• 🔧 Backend Features

  • Express.js server implementation
  • Nunjucks template engine integration
  • Modular project structure
  • RESTful API endpoints
  • Static file serving

• 📊 Database & Error Handling

  • SQLite3 integration for data persistence
  • Dynamic search functionality with database queries
  • Robust error handling for form submissions
  • Success and error feedback modals
  • Data validation and sanitization

🚀 Technologies Used

• HTML5
• CSS3 (with modular organization)
• JavaScript (Vanilla)
• Express.js
• Nunjucks template engine
• SQLite3 for data persistence
• External APIs Integration (IBGE)
• Git for version control
• Mobile-First Design Approach

📂 Project Structure

├── public/
│   ├── assets/          # Images and SVG files
│   ├── scripts/         # Client-side JavaScript
│   └── styles/          # CSS files and modules
├── src/
│   ├── database/        # Database related files
│   │   ├── db.js       # Database configuration
│   │   └── database.db # SQLite database file
│   ├── server.js       # Express application setup
│   └── views/          # Nunjucks template files
├── package.json        # Project dependencies
└── README.md          # Project documentation

🎯 Getting Started

1. Clone the repository:

git clone https://github.com/rafaumeu/ecoleta.git

2. Install dependencies:

npm install
# or
yarn install

3. Set up the database:

# The database will be automatically created on first run
# Make sure you have write permissions in the src/database directory

4. Start the development server:

npm start
# or
yarn start

5. Open http://localhost:3000 in your browser

🔧 Database Configuration

The project uses SQLite3 for data persistence. The database file is automatically created in the src/database directory when the application first runs. Make sure you have appropriate write permissions in this directory.

Database Schema

The database includes tables for:

• Collection points (storing location and contact information)
• Items for collection (categories of recyclable items)
• Point-item relationships (linking points to their accepted items)

📋 Commit Standards

We follow the Conventional Commits specification for our commit messages:

📝 Format

<type>(<scope>): <description>

[optional body]

[optional footer(s)]

🏷️ Types

• feat: ✨ A new feature
• fix: 🐛 A bug fix
• docs: 📚 Documentation changes
• style: 💎 Changes that do not affect the code's meaning
• refactor: 📦 Code changes that neither fix a bug nor add a feature
• perf: ⚡ Performance improvements
• test: 🔍 Adding or fixing tests
• chore: 🛠️ Changes to build process or auxiliary tools

💡 Examples

feat(form): ✨ add required field validation
fix(modal): 🐛 correct modal closing animation
docs(readme): 📚 update project setup instructions
style(css): 💎 improve button hover effects
refactor(js): 📦 reorganize create-point.js functions

🔄 Pull Request Process

1. 📝 Ensure your commits follow the standards above
2. 📚 Update the README.md with details of changes if needed
3. 🔗 Reference any relevant issues in your commit messages and PR description
4. 👀 Your PR will be reviewed by at least one maintainer

🌿 Branch Naming

feature/description-here
bugfix/description-here
hotfix/description-here

🎨 Layout

You can view the project layout through this link. You need a Figma account to access it.

👥 Development Team

• Rafael Dias Zendron - Lead Developer - GitHub

📬 Contact

Rafael Dias Zendron - rafael.zendron22@gmail.com

📝 License

This project is licensed under the MIT License - see the LICENSE.md file for details.

🙏 Acknowledgments

• IBGE for providing the API for location data
• SQLite team for the robust database engine
• Nunjucks team for the powerful templating engine
• SVG icons for waste categories
• Inspiration from modern waste management solutions

---

Built with 💚 by Rafael Zendron