DEV Community

loading...
Cover image for Introducing Code House - A whole new world of 300+ Developer Cheatsheets πŸ‘¨β€πŸ’»

Introducing Code House - A whole new world of 300+ Developer Cheatsheets πŸ‘¨β€πŸ’»

Savio Martin
14 | An Enthusiastic frontend developer, UI/UX Designer and a learner. Focued on βš›οΈ. Build apps with πŸ’–. Let's connect 🍻
・8 min read

Hello Folks πŸ‘‹

This is Savio here. I hope you all are doing good. I'm young web dev with an intention to enhance as a successful web developer. Today, I'm super proud to introduce my latest and biggest ever project, which I had made till date as a submission for HarperDB Hackathon on Hashnode. Once the hackathon was announced, I was super busy organizing my time and put myself into a good schedule to complete the project by the deadline. After the hard work for 24 days, I finally could meet up with the project, I had in my mind. It was hard, but I loved every moment of it.

Little flashback

Developers love cheatsheets, we cannot leave without them. Indeed, that's true for me too. I always spend a lot of time hunting for the best cheatsheets, I waste a lot of time to find a good cheat sheet for my need. That gave me the thought that what if I could build a super huge storehouse of developer cheatsheets, and a user can get access easily to tons of cheatsheets according to his need. Once, I started building πŸ› οΈ, I found that they're more I could do to improve it. And that's how Code House started. The project is never finished, it is still becoming better and better. I'm glad I was able to create a super useful app for the DEV community πŸ‘¨β€πŸ’».


Introducing Code House

ezgif-2-6b372a5232e3.gif

Code House is the all-in-one storehouse for developer cheatsheets. Welcoming you to a whole new world of developer cheatsheets. Code House is made up of 300+ curated cheatsheets from 230+ sources. Filter by categories, or source, sort by time or popularity, dark mode, bookmark cheatsheets, add new cheatsheets, request feature, and much more features, make the app amazing! 🀟

Github Repo / Live Demo

✨️ Inspiration

Hunting for cheatsheets took a lot of time, and we developers don't like to waste it. And that is how I came up with an idea to create a website, that contains a huge amount of curated cheatsheets from the internet. All cheatsheets are reviewed and there will no such spam, giving developers a lot of time to code than hunt. There are 29 categories currently, so, if a user need a cheatsheet of a particular language, he can just sort it up.

There is a lot of content on the internet and it is not so easy to sort out which one is good, this is where code house takes place. All cheatsheets are curated and reviewed by users, therefore helping you to have the best one.

This was my first goal 🎯 in mind, and soon as I started building, I put myself into a schedule to improve the app with more advanced features.

TL;DR

Please watch the short teaser (~2 mins), use headphones 🎧

Now, let me introduce you to the amazing features code house have so far ✌️

  • 300+ Cheatsheets

    ezgif-3-90f2222cae93.gif
    Code House is well sufficient with more than 300+ developer cheatsheets from 230+ sources. All the cheatsheets are sorted into 29 categories making it easy to select one. You can filter all the cheatsheets by popular, oldest, newest or even use the search bar to find one.

  • Filter by Category (29 Cateogries)

    ezgif-3-f3b39b699acb.gif
    All cheatsheets are sorted into 29 categories, you can easily choose one according to your language or code. All the types of sorting like popular, oldest, newest and search bar will also work for the filter category cheat sheets.

  • Filter By Source (230+ Sources)

    ezgif-3-9b23faa136ee.gif
    If you need to filter cheatsheets by source, eg: you need cheatsheets from freecodecamp.org or medium.com, you can filter in super fast. You can also do advanced sorting too.

  • Bookmark Cheatsheets

    ezgif-3-51ac738bd820.gif
    If you found any cheatsheets interesting and want to save it for later πŸ”–, you can also do it. Just click on the bookmark icons and it will then be stored on bookmarks page.

  • Add new Cheatsheet (on browser itself)

    ezgif-3-4263a177f2d6.gif
    Yeah, you could. If you found a good cheat sheet, you can just click on the New Cheatsheet button and it will take you to a form where you could add a new cheatsheet with simple data, Cheatsheet Name, Website URL and Category. Your cheat sheet will be reviewed and added to the app, also see yourself in contributors.

  • On Review Cheatsheets

    codehouse-video (4).png
    You can help code house by reviewing cheatsheets, just go to codehouse.vercel.app/review, you can see the cheatsheets that are on review. If you think, they're good, you can give an upvote or a comment.

  • Separate page for each Cheatsheet

    codehouse-video (1).png
    Each cheatsheet has a special page dedicated to that cheat sheet. You can get to see a large amount of data and do more functions on that page. You can also see who has added the cheatsheet, or who wrote the cheatsheet.

  • Request for Features

    codehouse-video (2).png
    Do you have an idea to improove Code House, we love πŸ’– to hear your words. That's why we built feature requests page, you can easily add a new request or upvote the requests that're currently in.

  • Report Cheatsheet

    ezgif-3-c91b6577bced.gif
    We always need to keep Code House, clean and good for everyone. So, if you find any problems, such as spam, broken link, or like that. You can report it to us. Just click on the report button and you're good to go.

  • Contributors Page

    codehouse-video (3).png
    We proudly show our contributors on our main website and we love to ❀️ Go ahead and give a pull request, get featured on our contributor's page πŸ‘¨β€πŸ’». You can also be a contributor by just adding a cheat sheet on the web.

  • Dark mode

    codehouse-video (5).png
    Dark mode is a thing developers could not live with, that's why we built dark mode in Code House. Enjoy Code House in dark mode 🌘

  • Upvote/Comment on Cheatsheets

    ezgif-3-b30fb2f398b5.gif
    Feel free to add an upvote or a comment to a cheatsheet. You have full freedom to decide what you wanna do.

  • Toggle View (List View or Grid View)

    codehouse-video (6).png
    You can toggle between List View or Grid View according to your preferences. So, you can enjoy it in the way you wish.

  • Newsletter (once a week)

    codehouse-video (7).png
    If you sign up for the newsletter, we'll let you know when new cheat sheets are available. PS, we won't spam. Only once a week πŸ“¬.

  • GraphQL API Playground

    ezgif-3-fca986f60938.gif
    We're also providing a super productive graphql API playground - codehouse-api.herokuapp.com. Here you can play with our API, and build new apps. How cool is that πŸ™Œ Here is a small documentation on how to use the API

Feel free to star ⭐️ the project if you found useful - github.com/saviomaritn/codehouse/

Code House is the next revolutionary app to hunt the best cheat sheets for all types ✨️

πŸ’» Built with

Feel free to try Code House: codehouse.vercel.app

🧐 Challenges

Challenge Solution
Adding scroll animations Used AOS library
Sorting by time Used javascript sort()
Infinite Scrolling Used react-infinite-scroll-component
Skeleton Loader Created with Pure CSS
Server Side Rendering Moved to next js
Search Filter Used filter method of javascript
Generate cover image and description Extracted meta
Parallax Effect Used parallax.js library
Notifications withing the app Used react-hot-toast library
Stop duplication of same content Used Lodash

🌈 What's next

Code House is the biggest ever project I have made till date, I have a big idea in my mind, and you can see a lot more features coming soon. These all are the things I have planned to do in the next few days πŸ‘€

  • Profile Page
  • PWA, In Progress ⏳️
  • Reply to a comment
  • Markdown support for feature requests
  • Twitter and Facebook Auth, In Progress ⏳️
  • Perform Operations with API
  • Create Collection when bookmarking cheatsheets
  • Featuring Cheatsheets on day basis
  • Generate Cover Image for missing ones
  • Settings page
  • Choose Secondary color
  • Notification tab
  • AMP Support, In Progress ⏳️
  • Hear description for posts, In Progress ⏳️

🍰 Contributing

Pull Requests are always welcome! You can add a cheat sheet on the browser. Your cheat sheet will be reviewed and added to the app, also see yourself in contributors.

If you wish to contribute using Github, you can work on any features codehouse.vercel.app/feature-requests or create one on your own. After adding your code, send us a Pull Request.

After your PR got merged, you'll be automatically appared on contributors page. Works through Github API.

πŸ›‘οΈ Licensed under MIT


πŸ‘€ Wrapping Up

Yeah, that's a wrap. Hope you enjoyed Code House. Feel free to bookmark the app, it will become super handy. I'd love to hear feedback and thoughts on Code House. Share on Twitter, tag me @SavioMartin7

πŸ™Œ Support

If you're enjoying my app, consider supporting me with a coffee β˜•οΈ

🌎 Lets connect

🎸 Feedback

Feedback helps to improve Code House. I'd love to hear feedback and thoughts on Code House. Looking forward to your views.

Discussion (0)