Zeus would be proud that you're here!

Welcome y'all!!!!!!!

YO FAM welcome to the hackathons OMG SO STOKED TO HAVE YOU HERE!!!!

Welcome to our first JS Bootcamp Olympics, we're SO SO SO excited at the amazing lineup of speakers and presenters today!

Y'all are on the Discord server! right? Right? OK good! Let's go!

How these hackathons help you find jobs

The basic formula here is: Strength of portfolio = Quantity + Visibility

You become more attractive to potential employers if you have tons & tons of projects on social media, Github, and on your portfolio.

This hackathon's goal is to help you:

Build your portfolio to make your profile more impressive to employers.
Showcase your projects on social media (our employer research shows LinkedIn and Twitter are where employers hang out!)
Repeat. We do these hackathons 2x to 3x a week as a community.

So TL;DR, attending Mintbean hackathons 2x-3x a week is a GREAT!!! way to boost your portfolio and your social media visibility, and it helps you nab that job!

Today's 3-part challenge:
Build, refine and explain a personal Kanban board!

You've probably at least heard of the following examples of Kanban boards:

Trello
Asana
Atlassian JIRA

From Atlassian's own website: "A kanban board is an agile project management tool designed to help visualize work, limit work-in-progress, and maximize efficiency (or flow). Kanban boards use cards, columns, and continuous improvement to help technology and service teams commit to the right amount of work, and get it done!"

Basically, a kanban board is a bunch of post-its on a wall. In our case, they're virtual post-its on a virtual wall.

In today's 3-part challenge, you'll be building, refining and explaining your own kanban board!

Part 1 - Building the Kanban board

Rather than go into a long-winded explanation of how to build the board, here's what I'm going to do.

I'm going to give you the user stories.

Build this in a frontend-only fashion so that it's deployable on Github Pages. Backends are DISALLOWED for reasons of scope management (it'd be too hard to do a full stack kanban board).

Required entity relations

Here are some basic entity relations. You need to fulfill these requirements, but they are not limits. You can definitely expand on top of them.

Column: Title (required), Ordering, Cards

Card: Title (required), Description

User: this entity does NOT exist since this is not an authenticated app

Required features

Here are the basic features. You MUST implement all these features over the course of the weekend in order to win the hackathon.

When the application starts, you have 3 empty columns: "Todo", "In progress", "Done"
Each column has a "+" button. The user can click this button to create a task card in any column
Task cards clearly display the title of the contained task
The user can move tasks between columns using drag-and-drop
The user can delete a task.
The user can expand a task card to see its description
The user can move tasks between columns using the "Move" button in the context menu
The user can edit column titles
The user can create columns
The user can change the order of columns using drag-and-drop
The user can delete columns (you will have to decide what happens to a column's cards in this case)

Bonus features

These are suggestions for improvements once "Important" features are completed. The more of these you do, the better your app will be, and the more chances you have of winning the hackathon.

The site is mobile-responsive (highly recommended but not required)
Each card has a context menu you can access through right-click (desktop).
Each card has a context menu you can access through long-press (mobile).
Nice animations
The user can access the context menu using right-click
The user can add images as attachments to the cards (yes, it is possible to save images to localstorage, https://stackoverflow.com/questions/19183180/how-to-save-an-image-to-localstorage-and-display-it-on-the-next-page)
Data is saved to LocalStorage or IndexedDB (to avoid collisions when using FeaturePeek, please use a unique name for the namespace you're saving your data to)
Something cooler? More creative? It's your site! Make it however you want, we're looking forward to seeing your creativity!

Disallowed features

These features should NOT be present, in favour of scope management.

1. Login/logout

2. Backend server

Part 2 - Refining the UX & optional "help" sections

From Rocket55's site:
UX is important because it tries to fulfill the user's needs. It aims to provide positive experiences that keep users loyal to the product or brand. Additionally, a meaningful user experience allows you to define customer journeys on your website that are most conducive to business success.

In order for your kanban board to have good UX, each part should be either intuitive or clearly & concisely explained.

Here are some more suggestions to help you win this section of the challenge:

onboarding tutorial
help text
info bubbles
helpful hints
clear notifications

Part 3 - Landing page + promoting on social media

We have this section because:

Personal projects without landing pages end up being COMPLETELY invisible to recruiters & employers.
Personal projects that are not promoted on social media are RARELY seen by recruiters & employers.

Part 3.A: You must create a landing page for your kanban board that clearly explains your product. For example, see FeaturePeek's landing page: https://featurepeek.com/ . It's a great landing page that concisely explains what FeaturePeek is all about. Google "Product Landing Page" for more examples of standard landing pages for products.

Part 3.B: promote your project on social media! LinkedIn and Twitter are great places to be. There will be an award for "Best marketing" so make sure you paste your posts + tweets inside the Discord server! and tag Mintbean!!!

Here are some fully-tested LinkedIn post templates you can use to show off your work!

A Very Merry Unconference to You!

Over my career, I've learned a lot from mentors and peers who had a lot more experience than me. Who had been there, done that. Who knew how to build not just great software, but also entire frameworks.

In that spirit of sharing knowledge, I'm very excited to welcome you to another Mintbean Unconference.

What is an unconference? An unconference is a community-run series of chats where anyone from the community can come on stage and talk about tech.

Check out our events scheduled over the weekend! Full schedule is on Hopin.

Rules & Constraints

Rules and constraints help keep everybody's projects relevant and interesting to all other participants.

The only restrictions are the following:

You must build a frontend web application.
There must be no backend server/serverless components.
You may only use web development frameworks and libraries. This means that React, Svelte, Mithril, Angular, Vue, Ember.js, Backbone, Handlebars, Mustache and jQuery are totally fine.
The project is scoped for teams of 2 to 3. A single person may struggle creating this project, but it is still totally possible given a large amount of skill or effort.

Pro Tip #1: Keep it simple.

This section is what will determine the "scope" of your project. So, keep it simple. Don't try to build something that involves skills that you don't have, and always overestimate how difficult a given feature will be to implement.

Please, save us from this!

Use familiar tools with a dash of new tech.

Because this is a short hackathon, you should stick to technology that you already know for the most part. Don't try to experiment with technology you're not familiar with it -- this is not the hackathon to do that in. In this hackathon, you're exercising your skillset to build a great project in a couple of days.

“The simple things are also the most extraordinary things, and only the wise can see them.” ― Paulo Coelho, The Alchemist

Know when its time to call for "back-up"

There are a two types of struggle, productive and unproductive. Struggling through a problem is an amazing way to learn, but there is a point when you might need a little help. I would recommend spending at least 20-30 minutes on a problem before you ask the community or a code mentor for help. With the limited time we have for these hackathons getting stuck on a problem for much longer than that could make finishing your project a lot harder.

"Don't be afraid to ask questions. Don't be afraid to ask for help when you need it. I do that every day. Asking for help isn't a sign of weakness, it's a sign of strength. It shows you have the courage to admit when you don't know something, and to learn something new." -Barrack Obama

Resources.

Want to get a head start? Use our CLI tool! Installed with "npm install -g mintbean-cli", you can create and deploy projects straight from the command line. Having GitHub pages ready to go its as easy as "mint deploy". If you have any questions, check out our docs.

FeaturePeek Docs and Repo

Code Mentors.

Code mentors help guide participants through rough patches and sticky bugs by sharing their knowledge and experience. You can ask questions in the #questions channel on Discord

Join our Discord dev community here!

Your code mentors for this hackathon are:

Frank Luiz-Ravelo
Kyle Barnett
Peter Bahn

We are very lucky to have them aboard!

Managing risk means knowing when to say "no".

When you start, you will know what your application generally looks and feels like, but you haven't exhaustively listed everything that you need to do to make your vision a reality. Estimation is also impossible at this point, because you probably have no idea how your application is going to be shape up, how your team works together, or how focused or distracted you will end up being during the hackathon. So you don't know the average speed of working on this project (because the project doesn't even exist yet).

Therefore, it is wiser to take the approach of risk management and prioritization. It's better to say "No" to doing some things.

Pro Tip #2: Deploy early, deploy often, and always deploy working code.

You must deploy your submission in order to be considered for scoring. You also never know when you're going to hit a snag, so you should try to deploy as often as possible (i.e. multiple times daily). That way, you will never be taken off-guard by a nasty bug and be forced to deploy older code.

Make sure to show off on LinkedIn!

After you've submitted your project, make sure you show off on LinkedIn! Because:

Showing off your work on LinkedIn can get recruiters' attention.
LinkedIn is built for recruiters, so there are TONS of them on there.
Companies love seeing hackathons on resumes & portfolios. (it's a sign of passion)

Here are some fully-tested LinkedIn post templates you can use to show off your work to companies & recruiters!

Pro Tip #3: Iterate and Have Fun!

Now that you have all the tools you need, you can start building a simple project of your own design.

Over the next few days, you want to make your project more complex, bit by bit. Keep things simple to start with, then iterate incrementally. Don't rush it :-) you have plenty of time! Make sure you deploy on the web!

We'll be submitting using https://mintbean.io.

Deadline

Projects for todays hackathon will be due on Monday, Aug 31st at 11:00AM EST / 8:00AM PST / 10:00AM CST.
Submit here: https://www.mintbean.io/mb-event/2a23cb9a-f82e-447b-8b83-9f22257841ab

Demo Day - First Come, First Serve

To increase your chances of winning, your team can demo your project in front of the judges on Monday, Aug 31st at 11:00AM EST / 8:00AM PST / 10:00AM CST. We will only have the demo room open for 30mins, it is on a first come, first serve basis, otherwise you can submit at the deadline time and join the Opening Ceremony at 12:30PM EST.

Please register here for the Monday, Aug 31st, Hopin Demo event. (we host it alongside our regular Mon. hackathons!)

The winning team will be announced on Wedneday, September 2, 2020 at 12:00PM EST at Opening Ceremony. The winning team will also be contacted directly on Discord and announced on all of our social media platforms! :)

So... What are you waiting for? Get started!

Page updated

Report abuse

Javascript Bootcamp Olympics