<h2>Overview</h2>
<p>Hack Club has made an innovative leap by introducing its design system: hackclub/theme. This isn't just a simple revamp but a comprehensive approach to streamline design and development processes across their projects. Inspired by the successful design principles of Priceline.com, this transition aims to create a cohesive visual language while enhancing usability and accessibility for the user interface.</p>
<p>The project serves to address some significant challenges in web development, particularly concerning speed and consistency. By minimizing repetitive decisions and ensuring that components are reusable, hackclub/theme stands to significantly boost both design and development velocity, setting a new standard for Hack Club's digital presence.</p>
<h2>Features</h2>
<ul>
<li>
<p><strong>Speed Up Development:</strong> The design system aims to accelerate both design and development processes, allowing quicker iterations and releases.</p>
</li>
<li>
<p><strong>Consistent UI:</strong> Promotes a cohesive and visually appealing user interface across different websites, enhancing the user experience.</p>
</li>
<li>
<p><strong>Accessibility Focus:</strong> Embeds best practices for accessibility, ensuring that applications are usable by everyone.</p>
</li>
<li>
<p><strong>Responsive Design:</strong> Prioritizes responsive web design principles to enhance usability on various devices.</p>
</li>
<li>
<p><strong>Reduced Code Duplication:</strong> Aims to minimize code repetition across applications, making maintenance and updates simpler and more efficient.</p>
</li>
<li>
<p><strong>Extensible Components:</strong> Provides easy-to-use and adaptable components that developers can quickly incorporate into their projects.</p>
</li>
<li>
<p><strong>Standardization:</strong> Serves as a guideline for hackclub.com’s visual language, providing a clear framework for design consistency.</p>
</li>
<li>
<p><strong>MIT License:</strong> The project is open-source, allowing developers to contribute and improve upon the design system freely.</p>
</li>
</ul>


<h2>Overview:</h2>
<p>This project aims to create the best curated directory of hackathons for high school students, recognizing that hackathons shouldn't just be limited to university students. The directory is maintained with strict guidelines to ensure high quality, and event submissions are requested through a designated form for review.</p>
<h2>Features:</h2>
<ul>
<li><strong>Curated Directory:</strong> Comprehensive list of high-quality hackathons for high school students.</li>
<li><strong>Strict Guidelines:</strong> Maintained with strict guidelines for listing events to ensure quality.</li>
<li><strong>Development Environment:</strong> Built using Next.js &#x26; Theme UI with Hack Club Theme for easy development.</li>
<li><strong>Vercel Deployment:</strong> Utilizes Vercel for easy and efficient deployment.</li>
</ul>
<h2>Summary:</h2>
<p>This project aims to provide a curated directory of hackathons for high school students, ensuring high quality through strict guidelines and utilizing Next.js &#x26; Theme UI for development. Deployment is managed using Vercel, and the hackathon data is powered by a backend with a REST API. The project is licensed under the MIT license, promoting open-source collaboration and usage.</p>


<pre><code class="language-markdown">## Overview
Happy birthday to Max Wofford! This special site serves as a digital celebration of his birthday, offering a unique platform where friends and family can leave their birthday wishes. By utilizing a straightforward system, users can express their congratulations creatively through personalized cards.

The site not only showcases individual messages, but also engages the community by inviting everyone to contribute. With the ease of setting up and the promise of heartfelt wishes, this repository is truly a delightful tribute to Max on his special day.

## Features
- **User-Friendly Interface**: The platform is straightforward, making it easy for anyone to navigate and leave their wishes without hassle.
- **Personalized Cards**: Each user can create their own card, adding a personal touch that makes the birthday wishes feel special and unique.
- **Community Engagement**: Encourages collaboration and participation from friends and family, fostering a sense of community spirit.
- **Example Guidance**: Included guidance, like Mingjie's card, helps users understand how to craft their messages effectively.
- **Easy Setup**: With a simple setup process, users can quickly get the site running on their local machine to start sharing their wishes.
- **Accessible Viewing**: Once set up, the site is viewable from localhost, making it simple to share moments directly with loved ones.
</code></pre>


<h2>Overview:</h2>
<p>Scrapbook is a platform designed for Hack Clubbers to share their daily projects and updates with the community. It encourages consistent contributions and showcases a streak of the user's progress on their profile.</p>
<h2>Features:</h2>
<ul>
<li><strong>Automatic Generation:</strong> Scrapbook generates a post for users when they make their first post, requiring only a description and an image.</li>
<li><strong>Slack Integration:</strong> Allows users to post updates directly from the Hack Club Slack channel, syncing with their Scrapbook account.</li>
<li><strong>Scrappy Slack Bot:</strong> Provides commands for managing streak counts, customizing profiles, linking domains, adding audio files, and more.</li>
<li><strong>Custom Domains:</strong> Users can link their profile to a custom domain by setting up a CNAME record on their DNS provider.</li>
<li><strong>CSS Customization:</strong> Allows users to customize the CSS on their profile page by providing a link to a CSS file or GitHub Gist.</li>
</ul>
<h2>Summary:</h2>
<p>Scrapbook is a valuable platform for the Hack Club community, enabling members to share their daily progress and stay motivated by showcasing their streak. With features like Slack integration, Scrappy Slack Bot, custom domains, and CSS customization, Scrapbook offers a seamless experience for Hack Clubbers to document their learning and building journey.</p>


<h2>Overview</h2>
<p>The Hack Club's new website is a codebase that powers the hackclub.com website. It is built using Next.js with MDX, Theme UI, and the Hack Club Theme. The codebase is available under the MIT License. The website aims to showcase Hack Club and its community to new developers and provide information about various projects and events.</p>
<h2>Features</h2>
<ul>
<li>Integration with Next.js, MDX, Theme UI, and Hack Club Theme</li>
<li>Modularity with cards to easily add and remove components on the homepage</li>
<li>Three main sections: connection, open-source, and IRL community</li>
<li>Opportunity to contribute and suggest improvements through Pull Requests</li>
<li>Customizable card design with the challenge to make them unique and visually appealing</li>
<li>Ability to add community-led projects to the website's carousel</li>
</ul>
<h2>Summary</h2>
<p>The Hack Club's new website is a dynamic and modular platform built using Next.js, MDX, Theme UI, and the Hack Club Theme. It offers features such as card-based components, customizable design, and support for community-led projects. Developers can contribute to the website by making Pull Requests for improvements or adding new content. The website aims to provide information about Hack Club, its projects, events, and community to new developers.</p>


<h2>Overview</h2>
<p>The Hack Club Summer of Making is more than just a simple program; it's an invitation to explore your creativity and push the boundaries of your skills this summer. Drawing inspiration from the historic Summer of Love, Hack Club challenges individuals to reflect on what they will create, learn, and build during this vibrant season. With the support of generous grants and an engaging community, the Summer of Making fosters an environment where your innovations can thrive.</p>
<p>This initiative promises to kickstart numerous projects, whether you're interested in web development, hardware, or something entirely unique. The focus is on self-driven exploration, enabling you to step outside your comfort zone in your quests, whether that's building your first website or crafting a smart mirror.</p>
<h2>Features</h2>
<ul>
<li>
<p><strong>Free Electronics Grants</strong>: Hack Club is offering $50,000 in hardware grants, funded by GitHub, to help bring your electronics projects to life.</p>
</li>
<li>
<p><strong>Community Engagement</strong>: Participate daily in the #scrapbook channel by sharing photos and videos of your progress, creating an impressive portfolio of your summer accomplishments.</p>
</li>
<li>
<p><strong>Customized Scrapbook</strong>: Express your individuality by customizing your scrapbook with CSS and even setting up a custom domain for your project showcases.</p>
</li>
<li>
<p><strong>Weekly Live Events</strong>: Join weekly Zoom sessions featuring coding workshops, show &#x26; tell presentations, and office hours with Hack Club team members.</p>
</li>
<li>
<p><strong>Inclusive Participation</strong>: The initiative encourages all participants, especially existing Hack Club members, to engage and innovate in their chosen fields.</p>
</li>
<li>
<p><strong>Motivational Theme</strong>: The Summer of Making is centered on the spirit of creation, urging individuals to think about what they will learn and build over the summer.</p>
</li>
<li>
<p><strong>Supportive Environment</strong>: Hack Club aims to provide resources and guidance tailored to the needs and interests of its community members, making this summer truly productive and inspiring.</p>
</li>
</ul>


<h2>Overview:</h2>
<p>The Hack Club Theme Starter is a sample Next.js project designed to help users get started with MDX, Theme UI, and the Hack Club Theme. It provides a structured template for creating websites and includes features such as a theme switcher, customizable fonts, meta tags, and analytics integration. The project can be easily deployed with Vercel or Netlify.</p>
<h2>Features:</h2>
<ul>
<li><strong>MDX, Theme UI, &#x26; Hack Club Theme</strong>: This project utilizes MDX, Theme UI, and the Hack Club Theme to create a cohesive and customizable website.</li>
<li><strong>Theme Switcher</strong>: The project includes an example theme switcher component that can be customized or replaced to change the website's theme.</li>
<li><strong>Customizable Fonts</strong>: Users can make use of the Hack Club's font, Phantom Sans, by uncommenting a line of code. This is particularly useful for Hack Club HQ projects.</li>
<li><strong>Custom Theme</strong>: The project allows users to edit the theme by creating a theme file, giving them full control over the website's visual style.</li>
<li><strong>Running at Another Port</strong>: Users can easily run the project on a different port by adding a command line argument.</li>
<li><strong>Adding Meta Tags</strong>: The project includes an integration with @hackclub/meta, allowing users to add meta tags to their Hack Club HQ sites.</li>
<li><strong>Adding Analytics</strong>: Users can easily integrate Fathom Analytics into their project for privacy-focused analytics. The necessary scripts and configurations are provided.</li>
</ul>
<h2>Summary:</h2>
<p>The Hack Club Theme Starter is a useful starting point for creating websites with Next.js, MDX, Theme UI, and the Hack Club Theme. It provides various features such as a theme switcher, customizable fonts, meta tags, and analytics integration. The project can be easily installed and deployed with Vercel or Netlify. Whether you're creating a Hack Club HQ project or any other website, this starter project can save you time and provide a solid foundation for your development.</p>


<h2>Overview</h2>
<p>Hack Club Theme is a frontend design system and set of tools made specifically for Theme UI. It serves as an alternative to CSS projects and provides a seamless way to create and customize themes for web applications. With its base theme and React component for generating social tags, Hack Club Theme simplifies the process of frontend design and development.</p>
<h2>Features</h2>
<ul>
<li><strong>Theme UI base theme</strong>: Hack Club Theme provides a base theme that can be easily used with Theme UI, making it simple to create and maintain consistent design across an application.</li>
<li><strong>React component for generating social tags</strong>: The included React component makes it easy to generate social tags for the <code>&#x3C;head></code> section of a web page. This streamlines the process of adding social media metadata to enhance sharing on platforms like Facebook and Twitter.</li>
<li><strong>Easy installation and setup</strong>: Hack Club Theme includes a theme-starter package that provides all the necessary tools and resources to quickly get started with using the theme. This eliminates the need for manual configuration and ensures a smooth setup process.</li>
</ul>
<h2>Summary</h2>
<p>Hack Club Theme is a frontend design system and set of tools designed for use with Theme UI. With its base theme and React component for generating social tags, it simplifies the process of creating and customizing themes for web applications. Its easy installation process and extensive documentation (located in <code>/docs</code>) make it a convenient choice for frontend developers looking for an alternative to traditional CSS projects.</p>


<h2>Overview</h2>
<p>TonicWebsiteTonic offers a unique opportunity for developers and designers to engage in creating a Jekyll theme through a collaborative event called "You Ship, We Ship". Launched on April 24, this ongoing event provides bite-sized tasks designed to guide participants in their theme design journey while fostering a sense of community. In addition to enhancing your skills, participants can earn a Hack Club hat as a fun incentive for completing the tasks.</p>
<p>By signing in with Slack on the Tonic website, you can easily dive into this creative challenge. Whether you’re a beginner or an experienced Jekyll user, this event is tailored to help individuals enhance their abilities and contribute to the world of web design.</p>
<h2>Features</h2>
<ul>
<li>
<p><strong>Bite-Sized Tasks</strong>: The event breaks down the theme design process into manageable tasks, making it easy for participants to progress and stay motivated.</p>
</li>
<li>
<p><strong>Community Engagement</strong>: Participate in a collaborative online environment where you can connect with fellow designers and developers sharing similar interests.</p>
</li>
<li>
<p><strong>Incentive for Participation</strong>: Earn a stylish Hack Club hat as a reward for your contributions, adding an element of fun to the learning experience.</p>
</li>
<li>
<p><strong>Accessible Sign-In</strong>: Joining the event is simple; just sign in using your Slack credentials to get started right away.</p>
</li>
<li>
<p><strong>Skill Development</strong>: Whether you’re new to Jekyll or looking to refine your existing skills, the structured tasks help improve your web development abilities.</p>
</li>
<li>
<p><strong>Ongoing Event</strong>: Launched on April 24, the event continues to be available, allowing more participants to join in and enhance their design prowess over time.</p>
</li>
<li>
<p><strong>Focus on Jekyll</strong>: The event specifically centers around creating Jekyll themes, ensuring that participants gain specific knowledge and hands-on experience with this popular static site generator.</p>
</li>
</ul>


<h2>Overview:</h2>
<p>The Hack Club Design System is a development project that uses React and Gatsby to create websites. The project includes repositories for various components like icons, seasonal themes, and banners. The design system is aimed at developers who want to use a standardized set of components for building websites efficiently.</p>
<h2>Features:</h2>
<ul>
<li><strong>React and Gatsby Stack</strong>: Utilizes React and Gatsby technologies for web development.</li>
<li><strong>Hack Club Design System</strong>: Offers standardized components for consistent website design.</li>
<li><strong>Multiple Repositories</strong>: Includes separate repositories for icons, seasonal themes, banners, etc.</li>
<li><strong>Development Environment Setup</strong>: Guides for setting up the development environment with necessary tools.</li>
<li><strong>Installation</strong>: Clear instructions for cloning, installing dependencies, and running the project.</li>
<li><strong>MIT License</strong>: Distributed under the MIT license, allowing for modification and distribution.</li>
</ul>
<h2>Summary:</h2>
<p>The Hack Club Design System is a React and Gatsby project that provides developers with a standardized set of components for building websites. By following the installation guide and utilizing the various repositories available, developers can efficiently create websites with consistent designs. The project is open-source under the MIT license, allowing for flexibility in usage.</p>


Hackclub

Design System

Hackathons

Maxday

Scrapbook

Site

Summer Site

Theme Starter

Theme

Tonic

V2