Hacktoberfest 2025 – Frontend

---

Welcome Hacktoberfest Contributors!

This repo is part of Open Code Chicago’s Hacktoberfest 2025 initiative.
Whether it’s your first pull request or your 50th, you are welcome here!

Contribute to real-world open source code, learn frontend development, and collaborate with a global community.

⭐ Support the Project!

If you like this project, please consider giving it a ⭐ on GitHub! More stars help us reach a wider audience, attract new contributors, and make your contributions even more visible and valuable for your portfolio or employer. Thank you for helping our open source community grow!

---

Project Preview

Here’s a sneak peek of the frontend design (hero section):

---

Design

You can explore our creative Figma design and UI references here:
Open in Figma

---

Table of Contents

• Design
• Description
• Who is this for?
• Tech Stack
• Quick Start
• Backend API Access
• Features
• Project Structure
• Contributing
• Hacktoberfest Contribution Guide
• Documentation
• Contributors
• Security
• License
• Feedback
• Support
• Connect with us

---

Description

This is the frontend project for Open Code Chicago’s Hacktoberfest 2025 initiative.
It’s built with React, Vite, and TailwindCSS, and designed for community collaboration.
Contributors of all levels are welcome to help improve UI, components, and user experience.

---

Who is this for?

• Beginners looking to make their first open source contribution
• Intermediate developers who want to learn React, Vite, and frontend best practices
• Experienced contributors mentoring and guiding others

---

Tech Stack

• React + Vite (fast dev server & build)
• Tailwind CSS (utility-first styling)
• ESLint + Prettier (code style and linting)
• GitHub Actions (CI/CD with linting & builds)

---

Quick Start

See the Usage Guide for detailed setup.

# Clone the repo
git clone https://github.com/OpenCodeChicago/hacktoberfest-2025-frontend.git
cd hacktoberfest-2025-frontend

2. Copy .env.example to .env:

# Copy .env.example to .env
cp .env.example .env

# Install dependencies
npm install

# Start dev server
npm run dev

---

Backend API Access

Our backend is now live! Contributors can connect to the deployed API to retrieve product data for their tasks.

Base URL:
https://corexshoptest.onrender.com

API URL is available as the environment variable VITE_API_URL.

Available Endpoints

• GET /api/products
  Retrieve all products (supports pagination and filtering).

• GET /api/products/:id
  Retrieve a single product by its ID.

• GET /api/products?category=Protein
  Filter products by category.

• GET /api/products?goals=Weight Loss
  Filter products by goal.

• GET /api/products?minPrice=20&maxPrice=50
  Filter products by price range.

• GET /api/products?search=whey
  Search products by keyword.

• GET /api/products?category=Protein&goals=Muscle Growth&minPrice=30
  Combine multiple filters.

• GET /api/products?page=1&limit=10
  Pagination support.

Example usage:

GET https://corexshoptest.onrender.com/api/products?category=Protein&minPrice=20&maxPrice=50&page=1&limit=10

Feel free to use these endpoints in your components and features! If you have questions about the API, open an issue or ask in our Discord.

---

Features

• Developer-friendly setup with React + Vite
• Utility-first styling with Tailwind CSS
• Preconfigured linting & formatting (ESLint + Prettier)
• Automated checks via GitHub Actions CI
• Community-driven with issues & PR templates

---

Project Structure

hacktoberfest-2025-frontend/                     # Main project root
├── .github/                                     # GitHub configuration
│   ├── ISSUE_TEMPLATE/                          # Predefined issue templates
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   ├── workflow/                                # GitHub Actions workflows
│   │   └── ci.yml
│   ├── CODEOWNERS                               # Defines code reviewers
│   ├── dependabot.yml                           # Automated dependency updates
│   └── PULL_REQUEST_TEMPLATE.md                 # Standard PR template
│
├── docs/                                        # Project documentation
│   ├── images/                                  # Images and assets for docs
│   ├── faq.md
│   └── usage.md
│
├── src/                                         # Application source code
│   ├── components/                              # React components
│   └── main.js                                  # Entry point
│
├── .all-contributorsrc                          # Config for all-contributors bot
├── .gitignore                                   # Ignored files
├── .prettierrc                                  # Code formatting config
├── CODE_OF_CONDUCT.md                           # Community standards
├── CONTRIBUTING.md                              # Contribution guidelines
├── LICENSE                                      # License file
├── README.md                                    # Project overview
├── SECURITY.md                                  # Security policy
└── index.html                                   # Main HTML file

---

Contributing

We welcome contributions from everyone! Please see our Contributing Guidelines for details on how to get started.

💡 Tip: Before working on UI-related issues, please refer to the Design section for Figma files and UI guidelines.

---

Hacktoberfest Contribution Guide

1. Fork this repository
2. Check our Project Board
   • Look for an issue you’d like to work on
   • Comment on the issue to let others know you’re taking it
   • Maintainers may assign you to it (to avoid duplicates)
3. Create a new branch:

   git checkout -b my-new-feature

4. Make your changes (small, clear commits)
5. Run npm run lint before pushing
6. Push your branch and open a Pull Request
   • All PRs are automatically checked for linting in CI
   • Tip: Start with Good First Issues

---

Documentation

• Usage Guide
• FAQ
• Contributing Guidelines
• Pull Request Template
• Code Owners
• Issue Templates

---

Contributors

Thanks goes to these wonderful people:

Alex Smagin 📖 🚇 🚧 📆	amilliiee 💻	SOHAM 💻	Ankit Kumar 💻	a-woodworth 💻	Emerson Vieira 💻	Apar Agarwal 💻
mitaliiiiii 💻	Muhammad Anas Farooq 💻 ⚠️	anantjain-afk 💻	shiv7shukla 💻	Ryan Barley 💻	Onwudebelu Prisca Ebubechukwu 💻

This project follows the all-contributors specification.

Want to be listed here? See how to add yourself!

Contributions of any kind welcome!

---

Security

This repository has the following security features enabled:

• Dependency Review Action – warns/block PRs introducing vulnerable or malicious packages
• OpenSSF Scorecard – weekly scans for open-source best practices and supply-chain risks
• Dependabot – automated dependency updates

For details, see our Security Policy.

---

License

This project is licensed under the MIT License.

---

Feedback

We welcome feedback and suggestions to improve the template’s functionality and usability.
Feel free to open an issue or start a discussion.

---

Support

📧 Contact: [email protected]

---

Languages and Tools

---

Connect with us