CheatHub

CheatHub is an open-source web tool that organizes code snippets into collections of cheat sheets, built with a Flask/Python REST API and a React/TypeScript frontend. It is a full-stack monorepo where users can create, search, favorite, and share code snippets, and group them into named collections for quick reference. The project is hosted on GitHub, licensed under MIT, and deployed with the frontend on Vercel and the backend API on Heroku.

What is CheatHub?

CheatHub is a web app that lets users store and organize code snippets into collections called cheat sheets. It takes a snippet's title, description, language, code body, optional source URL, and tags as input, and produces a searchable, publicly visible feed of snippet cards, as well as personal collections. The app is built as a clean monorepo: a Flask/Python RESTful backend that writes to a MongoDB Atlas database, and a React/TypeScript frontend bootstrapped with Create React App. The UI includes a landing view, sign-up/sign-in forms, a Collections profile page, and a Snippets search feed. The project is maintained by Joem Elias Sanez and uses Chakra UI for theming, Framer Motion for animations, and react-syntax-highlighter for code display.

Key Features

• Authentication — sign up, sign in, and sign out with access tokens stored in memory; only the username is saved to local storage, and a logout event triggers a storage event listener to sign out all open windows.
• Snippet CRUD — create, edit, and delete snippets via forms; snippet fields include title, description, language, code, source URL, and tags.
• Collections — group snippets into named collections (cheat sheets) with add/remove operations, plus an automatic Faves collection for snippets you favorite.
• Search and filters — MongoDB text indices on snippet title and description power the search; results can be filtered by language and tags, with pagination on the search endpoint.
• Clipboard copy — one-click copy of any snippet's code to the clipboard, with a success icon state.
• Favorite/unfavorite — registered users can fave or unfave snippets from the search feed and view their faves as a collection.
• Dark/light theme — two neutral tone sets for dark and light modes, implemented via Chakra UI's ThemeProvider.

Who is CheatHub for?

• Individual developers — build a personal library of reusable snippets and organize them into collections by project, language, or topic.
• Programming learners — search the public feed for examples, filter by language or tag, and copy snippets to study syntax; the seed data includes hello-world examples in 28 different languages.
• Full-stack learners — use the codebase as a reference for a Flask REST API, MongoDB Atlas integration, React Router, and TypeScript patterns with Chakra UI and Framer Motion.
• Open-source contributors — the project has a contributing guide and accepts pull requests, with clearly separated frontend and backend subdirectories for focused work.

What can you do with CheatHub?

• Create a personal cheat-sheet library: write snippets with titles, descriptions, languages, tags, and source links, then group them into named collections.
• Discover public snippets: browse the feed, search by text, filter by language or tag, and copy useful code directly to the clipboard.
• Save and manage favorites: fave and unfave snippets from other users and view them all in a Faves collection.
• Study a working full-stack app: read the backend and frontend docs to see how Flask RESTful endpoints, JWT-protected routes, and React components are structured.

How does CheatHub work?

After registering, users sign in to receive an access token. They can create snippets through a form; each snippet is saved to MongoDB Atlas via the Flask API. Snippets can then be added to named collections. The Snippets page provides a public feed with a search bar, language and tag filters, and pagination. The backend also blocks tokens on logout using a token blocklist cluster, and frontend state is managed with React hooks and Context.

FAQ

Is CheatHub free to use?

Yes. CheatHub is an open-source project released under the MIT License, so the code is free to use, modify, and deploy.

What is the tech stack of CheatHub?

The frontend uses React and TypeScript with Create React App, Chakra UI, Framer Motion, and react-syntax-highlighter. The backend is Flask with Flask-RESTful and flask-jwt-extended, and it connects to a MongoDB Atlas database.

Can I deploy CheatHub myself?

Yes. The frontend deploys to Vercel and the backend to Heroku; the README provides subdirectory deployment instructions and local development setup for both the frontend on localhost:3000 and backend on localhost:5000.

Does CheatHub have dark mode?

Yes, the app supports both dark and light modes using Chakra UI's theming system, and the UI switches between two neutral tone sets.

What features are not yet implemented?

The README lists planned features including adding query params to all resources, extending the query parser to parse multiple queries at once, optimizing performance by dereferencing database records, user profile pages, friend systems, and snippet sharing.