A collaborative front-end project built as part of Code Club, focusing on creating a modern, responsive and user-friendly web experience that connects users with locally-sourced fresh produce.
Green Harvest is a front-end web project developed in a team setting during the GoIT FullStack Web Developer program.
Our goal was to design and build a mobile-first responsive website that promotes sustainable eating habits and makes ordering fresh local produce simple and enjoyable.
What started as a design concept turned into a fully-functional, styled website with interactive form handling and modern UI/UX principles.
Working collaboratively helped us strengthen not only our coding skills but also our teamwork, problem-solving and presentation abilities.
- Build a mobile-first responsive website from scratch using HTML5, CSS3, and JavaScript.
- Practice version control and team workflow with Git & GitHub.
- Learn how to divide a complex project into smaller, manageable tasks.
- Apply UI/UX best practices in layout, color harmony, and accessibility.
- Strengthen teamwork through daily communication, sprint planning, and peer review.
✅ Responsive layout for mobile (320 px), tablet (768 px) and desktop (1280 px) resolutions.
✅ Hero section highlighting the brand message and call-to-action.
✅ Order form with validation and interactive user feedback.
✅ Menu and logo icons integration with SVG icons.
✅ Clean, accessible UI following semantic HTML structure.
✅ Collaborative Git workflow with feature branches, pull requests and code reviews.
| Category | Tools |
|---|---|
| Languages | HTML5, CSS3, JavaScript |
| Framework / Build | Vite |
| Version Control | Git & GitHub |
| Design Reference | Figma |
| Collaboration | GitHub Projects, Discord, Google Meet |
| UI Design Approach | Mobile-first, component-based structure |
- Clone the repository
git clone https://github.com/MirayBayan/code_club_green_harvest.git
cd code_club_green_harvest- Install dependencies
npm install- Start the development server
npm run dev- Open your browser
Navigate to
http://localhost:5173
| Device | Breakpoint | Description |
|---|---|---|
| Mobile | 320px–767px | Simplified layout with stacked components |
| Tablet | 768px–1279px | Balanced layout with larger visuals |
| Desktop | 1280px+ | Two-column design, optimized whitespace |
-
The power of teamwork: dividing tasks makes the work faster but maintaining harmony makes it successful.
-
Communication matters — even a one-line clarification can save hours of debugging.
-
The importance of UI precision: small misalignments can completely change user experience.
-
The value of feedback and iteration in both design and code.
-
Add backend integration for real order processing (Node.js + Express).
-
Enhance form validation with real-time user feedback.
-
Implement animation effects for smoother transitions.
-
Expand the project into a full e-commerce prototype.