Scrapbook

screenshot of Scrapbook
nextjs
react
styled-components
prisma

A daily streak system & portfolio for your projects.

Overview:

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.

Features:

  • Automatic Generation: Scrapbook generates a post for users when they make their first post, requiring only a description and an image.
  • Slack Integration: Allows users to post updates directly from the Hack Club Slack channel, syncing with their Scrapbook account.
  • Scrappy Slack Bot: Provides commands for managing streak counts, customizing profiles, linking domains, adding audio files, and more.
  • Custom Domains: Users can link their profile to a custom domain by setting up a CNAME record on their DNS provider.
  • CSS Customization: Allows users to customize the CSS on their profile page by providing a link to a CSS file or GitHub Gist.

Summary:

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.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

styled-components
Styled Components

Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.

prisma
Prisma

Prisma is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way.

fullstack
Fullstack

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

mdx
MDX

MDX is a format that allows developers to write JSX within Markdown documents, combining the power of React with the simplicity of Markdown. This allows for the creation of dynamic and interactive content that can be easily shared and consumed across different platforms and devices.