Introducing Code House - A whole new world of 300+ Developer Cheatsheets 👨‍💻
Tags: react, programming, css, javascript
Published: 2021-06-28 10:29:31

## 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](https://townhall.hashnode.com/announcing-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](https://cdn.hashnode.com/res/hashnode/image/upload/v1624514224008/RxHSkHUCI.gif)

[Code House](https://codehouse.vercel.app/) 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](https://github.com/saviomartin/codehouse) /[ Live Demo](https://codehouse.vercel.app/)

## ✨️ 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 🎧

{% youtube bFFDe6Inyno %}

Now, let me introduce you to the amazing features [code house](https://codehouse.vercel.app/) have so far ✌️

- ### 300+ Cheatsheets
![ezgif-3-90f2222cae93.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1624805308398/is48ALNjQ.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1624805382056/NxfKPjkLU.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1624805793346/yaXtCSUSo.gif)
If you need to filter cheatsheets by source, eg: you need cheatsheets from [freecodecamp.org](https://www.freecodecamp.org/) or [medium.com](https://medium.com/), you can filter in super fast. You can also do advanced sorting too.

- ### Bookmark Cheatsheets
![ezgif-3-51ac738bd820.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1624806537885/tXH5kDdQI.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](https://codehouse.vercel.app/bookmarks).

- ### Add new Cheatsheet (on browser itself)
![ezgif-3-4263a177f2d6.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1624806138754/bJuVC4yJg.gif)
Yeah, you could. If you found a good cheat sheet, you can just click on the [New Cheatsheet](https://codehouse.vercel.app/new) 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1624852138255/oAxiohvMo.png)
You can help code house by reviewing cheatsheets, just go to [codehouse.vercel.app/review](https://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](https://cdn.hashnode.com/res/hashnode/image/upload/v1624806316027/GeFDNWRkI.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1624806364194/knXODurAV.png)
Do you have an idea to improove Code House, we love 💖 to hear your words. That's why we built [feature requests page](https://codehouse.vercel.app/feature-requests), you can easily add a new request or upvote the requests that're currently in.

- ### Report Cheatsheet
![ezgif-3-c91b6577bced.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1624806898378/ZrYqUld30.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1624806691895/C0fGxNV2_.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1624852202376/rqLsuRutA.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1624807063378/jRwybZc7s.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1624852238645/TrgZAfR9b.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1624852396488/CVKLaKdBV.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1624806744197/8G-1id1SL.gif)
We're also providing a super productive [graphql API playground](https://codehouse-api.herokuapp.com/) - [codehouse-api.herokuapp.com](https://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](https://github.com/saviomartin/codehouse/blob/main/API-usage.md)

> Feel free to star ⭐️ the project if you found useful - [github.com/saviomaritn/codehouse/](https://github.com/saviomartin/codehouse/)

[Code House](https://codehouse.vercel.app/) is the next revolutionary app to hunt the best cheat sheets for all types ✨️

## 💻 Built with

- [Next JS](https://nextjs.org/)
- [Harper DB](https://harperdb.io/): source for complete database
- [Tailwind](https://tailwindcss.com/): source for complete styling
- [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component): for infinite scrolling
- [nprogress](https://www.npmjs.com/package/nprogress): for slim progressbars
- [react-hot-toast](https://react-hot-toast.com/): for toasts
- [firebase](https://firebase.google.com/): for authentication
- [date-fns](https://date-fns.org/): for formatting dates
- [Material UI](http://material-ui.com/): for components
- [Animate.css](https://animate.style/): for smooth Animations
- [Vercel](http://vercel.com/): for hosting

> Feel free to try Code House: [codehouse.vercel.app](https://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](https://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](https://codehouse.vercel.app/contributors). Works through Github API.

- Please contribute using [GitHub Flow](https://guides.github.com/introduction/flow). Create a branch, add commits, and [open a pull request](https://github.com/saviomartin/codehouse/compare).

- Please read [`CONTRIBUTING`](https://github.com/saviomartin/codehouse/blob/main/CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](https://github.com/saviomartin/codehouse/blob/main/CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.

🛡️ Licensed under [`MIT`](https://github.com/saviomartin/codehouse/blob/main/LICENSE)

---

## 👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed [Code House](https://codehouse.vercel.app/). Feel free to bookmark the app, it will become super handy. I'd love to hear feedback and thoughts on [Code House](https://codehouse.vercel.app/). Share on Twitter, tag me [@SavioMartin7](https://twitter.com/SavioMartin7)

### 🙌 Support 
If you're enjoying my app, consider supporting me with a coffee ☕️
<a href="https://www.buymeacoffee.com/saviomartin"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=saviomartin&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>

### 🌎 Lets connect
- [Github](http://github.com/saviomartin)
- [Twitter](https://twitter.com/saviomartin7)
- [LinkedIn](https://www.linkedin.com/in/saviomartin/)
- [Instagram](https://www.instagram.com/teen_developer/)

## 🎸 Feedback
Feedback helps to improve [Code House](https://codehouse.vercel.app/). I'd love to hear feedback and thoughts on [Code House](https://codehouse.vercel.app/). Looking forward to your views.