Make, Learn, Hack

Need help getting started with coding? Come Make, Learn, Hack with us. Our site provides all you need to start hacking.

Comment

💡 Inspiration

While reminiscing about our first hackathon experience, we thought about how lost we were and how much it would have helped if there was some form of guidance to guide us lost sheep.

We were heavily inspired by MLH (ahem, take a look at the colour scheme of our site and acronym of our project name…) :P

🔍 What it does

This is a website meant to guide beginner hackers through their first hackathon! Rookie hackers could benefit too, with our simple pipeline to take them through the different steps, from ideating to the finished product! This would help make sure they’re not lost along the way. The simple pipeline also includes links to templates and resources we think are most useful to a newbie hacker. Through the simple pipeline, we hope to show that joining and completing a hackathon is actually very doable! We also have a simple demo page for newbies to quickly start their hacker journey with a simple web development project, and a FAQ section (which uses the cohere API) for rookies who have burning questions they want to be answered.

🔧 How we built it

We spent the start of the hackathon reflecting on our experiences as hackers, asking ourselves questions such as "What would a new hacker need to get started?", "What was our first hacking experience like?", "What are some of the things we struggled with as a new hacker?" and "What are the tools that help us most as a hacker?". With this in mind, we aimed to compile this information and find a way to communicate it to new hackers.

Our process:

  • Ideation and planning: Google Docs
  • Wireframing: Figma
  • Remote collaboration and version control: GitHub
  • Frontend development framework: Vue.js
  • Frontend design: Bootstrap 5.0.2
  • Coding IDE: Visual Studio Code

🏃‍♂️ Challenges we ran into

  • VueJs was a new framework for some of us
  • [Siew Wen] faced issues with running npm so she couldn’t view the Vue project properly
    • Siew Wen persevered by coding the site in vanilla HTML and js
    • Francene helped out by transferring her HTML work into the Vue project

🏅 Accomplishments that we're proud of

  • We made our first Vue hackathon project
  • Made use of more Github features like Projects and Actions!

🧠 What we learned

  • VueJs
  • We made a website with Vue and hosted it
  • We learnt more about GitHub actions, and the other tools they have to help with project management (e.g. their Kanban board feature)
  • Bootstrap 5.0

⏭️ What's next for Make, Learn, Hack

  • We definitely could beautify the website
  • More features:
    • Project Logo Maker - make a logo for users based on the name of their project
    • Downloadable templates for code
    • Online compiler/“Try it yourself” platform where we have some boilerplate code for users to edit to their liking and preview results on the site
    • Better demos
      • More demos available for users
      • Have demos for all the languages
      • More engaging demos
      • Clearer comments in code of demos so that users can easily follow through

Built With

Share this project:

Updates