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

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

  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)

  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)

  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

  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)

  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

  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

  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

  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

  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

  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

  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

  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)

  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)

  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

  We're also providing a super productive graphql API playground - codehouse-graphql-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

• Next JS
• Harper DB: source for complete database
• Tailwind: source for complete styling
• react-infinite-scroll-component: for infinite scrolling
• nprogress: for slim progressbars
• react-hot-toast: for toasts
• firebase: for authentication
• date-fns: for formatting dates
• Material UI: for components
• Animate.css: for smooth Animations
• Vercel: for hosting

🛠️ Planning, Building, and Deploying

Here comes the most important part, but I enjoyed every bit of it. I worked confidently as well responsibly. I followed a good timetable, and I found time to code and make this app into reality. June is a pretty busy time for me as I'm a high schooler and have a lot to study. Yet, I was good.

I did the first commit to the app on June 2 and now we have over 500+ commits, which is just amazing. This is the first time, I could proudly say that I did my best 💪

• Planning

  I'm a big fan of notion and I use to prioritize my work. I had my idea, the only thing I should do next, is to mind map how it should be. Yeah, it seemed pretty easy but time-consuming.

• Designing

  I used Figma for my design, I'm not an expert but I know how to do basic designing and prototyping. I didn't completely design all pages at once, I took time and designed on and on when I get new ideas. In fact, the UI was rebuilt twice.

• Building

  Yeah, time's up 🕑 I loved the time I coded, this time, I thought of the problems I had in my last side project, I researched how I could make it work. Next JS started going trending and I was a complete noob to it. I watched some crash courses on youtube, read many blogs, created some code and that helped me to get a start and gradually, I felt it easy and started using it for Code House. I continued with Next JS and learned more. I just loved it after then.

  npx create-next-app -e with-tailwindcss codehouse
  

  Another thing for me to learn is Harper DB, I just out the official channel of Harper DB at youtube, they're doing a great job there. They're organizing podcasts and live coding. I followed some videos and learned to start using Harper DB, gradually, I started feeling that Harper DB is just amazing, it is super simple and easy to use. It has a large number of examples that helped a lot in building apps. I started loving it and learned how to get started.

  Hashnode has an amazing discord channel dedicated specially for #harperdbhackathon, it indeed helped me a lot, and thanks to the amazing devs helping there.
  Here is the app diagram. This is how everything works, first I get the DB from harperdb, and can access it with API, and the client uses this API to access DB. GraphQL Playground also uses the same API. Together, they all work and provide a secure database.

  I created a code, where I could reuse anywhere and access all part of my database. Here is it ⬇️

  export const harperFetch = async (body) => {
  const request = await fetch(process.env.NEXT_PUBLIC_DB_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Basic ${process.env.NEXT_PUBLIC_DB_AUTHORIZATION}`,
    },
    body: JSON.stringify(body),
  });
  
  return request.json();
  };
  

  and then, I created .env file in the root to get access to environmental variables.

  NEXT_PUBLIC_DB_URL= YOUR_HARPER_DB_DATABASE_URL
  NEXT_PUBLIC_DB_AUTHORIZATION= YOUR_HARPER_DB_AUTHORIZATION_ID
  

  and then I could use it anywhere on my app, saving a lot of time and duplication of same code ⬇️

  useEffect(async () => {
  // fetching
  const cheatSheets = await harperFetch({
    operation: "sql",
    sql: "SELECT * FROM dev.cheatsheets",
  });
  
  // storing data
  await setData(cheatSheets);
  }, []);
  

  Yeah, I could also interact with db like adding, or editing in the same way ⬇️

  harperFetch({
    operation: "insert",
    schema: "dev",
    table: "review",
    records: [{
        id: uuid,
        cheatsheet_name: cheatsheet_name,
        website_url: website_url,
        category: category,
    }],
  });
  

  I also was concerned about the UI and UX, that's why I took some time getting mood boards and desgning the app. I also cared about the animations, I tried to include many animations.

  For parallax effect, I used parallax.js, a pretty amazing library. To animate on scroll, I used AOS. For the steady animations, I used Animate.css. For the ripple effect, I use react-ripples library and for smooth toasting, I used react-hot-toasts. I created many animations on my own too.

  For underline animation, I created this code ⬇️

  .continuous-line {
    background: linear-gradient(currentColor 0 0) var(--d, 201%) 100% /200% 1.5px no-repeat;
    transition: 0.5s;
    width: fit-content;
  }
  .continuous-line:hover {
    --d: -101%;
  }
  

  and for image zooming effect ⬇️

  .parent-for-image-scale:hover .scale-on-hover {
    transform: scale(1.15);
  }
  

  and the shiny button animation ⬇️

  .shine {
    position: relative;
    overflow: hidden;
    transition: all 100ms linear;
  }
  .shine::after {
    content: "";
    top: -50%;
    display: block;
    width: 40%;
    height: 200%;
    left: -55%;
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    transform: rotate(25deg);
    transition: 0.5s;
  }
  .shine:hover::after {
    left: 120%;
  }
  

  and many more animations, I developed to give you the best interaction. I used to document by journey when I learn new tech or code something amazing, when I start building a side project, this becomes so handy 🙌

  I have already written a blog on creating a search filter, indeed, that's how I created it. I also have a blog on setting dark mode with tailwind. I used the exact same tutorial to create dark mode in code house. To setup Google and Github Authentication, I have written a tutorial on it. That's exactly how I could use it too.

  I generate cover images, description,s and more by extracting the meta of the webpage. I created my own API to do so. I made us of html-metadata-parser library and created a simple API.

  const websiteURL = req.query.url;
  Meta.parser(websiteURL, (err, result) => {
    if (err) {
        return res.status(400).json({
            message: "URL NOT FOUND",
        });
    } else {
        return res.status(200).json(result);
    }
  });
  

  And now, I used it by calling the API ⬇️

  http://localhost:3000/api/META/parser?url=https://www.freecodecamp.org/news/how-to-use-branches-in-git/
  

  To handle the sorting by time, popularity, oldest, newest. I made use sort() method of javascript. It was pretty easy to construct ⬇️

  if (sort === "newest") {
   cheatSheets.data
      .sort((a, b) => {
         return a.__createdtime__ - b.__createdtime__;
      })
      .reverse();
  } else if (sort === "oldest") {
   cheatSheets.data.sort((a, b) => {
      return a.__createdtime__ - b.__createdtime__;
   });
  } else {
   cheatSheets.data.sort((a, b) => {
      if (a.upvotes.length > b.upvotes.length) {
         return -1;
      } else {
         return 1;
      }
   });
  }
  

  And yeah, the total build process is far longer, I just told you the main part of it. Head over to Github Code and find more. I actively pushed my code to Github and crossed 500+ commits, the biggest ever commits I have made.

  Checkout the repo: https://github.com/saviomartin/codehouse, give a star ⭐️ if you liked it.

• Deploying

  Vercel is my all-time favorite, I pretty much use it to host all my apps. In fact Next JS is best to host with Vercel, so, I stick on to my favorite. Deploying to Vercel, was super fast and easy, It automatically deploys again when I add new commits 🌊

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

🧐 Challenges

🌈 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.

• Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.

• Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

🛡️ 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

• Github
• Twitter
• LinkedIn
• Instagram

🎸 Feedback

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