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.
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!
Here’s a sneak peek of the frontend design (hero section):
You can explore our creative Figma design and UI references here:
Open in Figma
- Design
- Description
- Who is this for?
- Tech Stack
- Quick Start
- Backend API Access
- Features
- Project Structure
- Contributing
- Hacktoberfest Contribution Guide
- Documentation
- Contributor Recognition
- Contributors
- Security
- License
- Feedback
- Support
- Connect with us
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.
- 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
- React + Vite (fast dev server & build)
- Tailwind CSS (utility-first styling)
- ESLint + Prettier (code style and linting)
- GitHub Actions (CI/CD with linting & builds)
See the Usage Guide for detailed setup.
# Clone the repo
git clone https://github.com/OpenCodeChicago/hacktoberfest-2025-frontend.git
cd hacktoberfest-2025-frontend
- Copy
.env.example
to.env
:
# Copy .env.example to .env
cp .env.example .env
# Install dependencies
npm install
# Start dev server
npm run dev
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
.
-
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.
- 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
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
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.
- Fork this repository
- 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)
- Create a new branch:
git checkout -b my-new-feature
- Make your changes (small, clear commits)
- Run
npm run lint
before pushing - Push your branch and open a Pull Request
- All PRs are automatically checked for linting in CI
- Tip: Start with Good First Issues
We’re proud to recognize everyone who contributes to Open Code Chicago × CoreX!
Contributors can earn exclusive digital badges via Holopin — our official badge partner for open source recognition.
Badge | Description |
---|---|
🧑💻 CoreX Contributor 2025 | Awarded for a merged PR during Hacktoberfest 2025 |
✨ First PR Merged | Celebrates your very first open-source contribution under Open Code Chicago |
🎨 UI Builder | For impactful frontend or UI/UX work |
⚙️ Backend Engineer | For backend, API, or database contributions |
💬 Community Supporter | For exceptional engagement, documentation, or testing contributions |
After your PR is merged, maintainers will comment with a unique claim link to receive your badge on Holopin.
You can display your earned badges on:
- Your Holopin board
- Your GitHub profile (via Holopin widget)
- LinkedIn (as a verified digital credential)
➡️ Check out the full badge set on our Holopin board:
Open Code Chicago × CoreX 2025 Badges
Let’s build, learn, and grow together 🚀
Thanks goes to these wonderful people:
This project follows the all-contributors specification.
Want to be listed here? See how to add yourself!
Contributions of any kind welcome!
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.
This project is licensed under the MIT License.
We welcome feedback and suggestions to improve the template’s functionality and usability.
Feel free to open an issue or start a discussion.
📧 Contact: [email protected]