About WonderMap

WonderMap is a 48-hour project created by two programmers in a sparse amount of time. It's intended to be a Google Keep and Evernote hybrid, with sharing functionality and notes. We got quite far, but a few things that are planned for the future include teams and projects for better sharing, better authentication, cleaner code, and a mind map style view.

For the record, this entire website was entirely thought up, designed, styled, and scripted by us.

React
Next.js
Node.js
Tailwind.css
MongoDB
GitHub

This wouldn't have been possible without tons of awesome projects.

Design

We created a psuedo design system, which means we get to have a cool page demonstrating the components!

Heading 1

Heading 2

Heading 3

Text is set in 16px Rubik. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae neque at dui vehicula consectetur at eu lacus. Sed nec mauris molestie, rutrum tellus sit amet, dictum enim. Pellentesque mollis lacus ex, vitae blandit felis dignissim nec. Sed quis luctus mauris. Aenean ut aliquet diam, ut consequat felis. Vestibulum at rutrum purus, sagittis interdum enim. Donec leo quam, egestas vitae semper vel, gravida ac nisl. Donec turpis tellus, dignissim sit amet malesuada ut, auctor in lectus.

Card

This is a card in a grid, it can contain anything from a form to some metadata, and can have an icon in the top right.

Card

This is a card in a grid, it can contain anything from a form to some metadata, and can have an icon in the top right.

Card

This is a card in a grid, it can contain anything from a form to some metadata, and can have an icon in the top right.

Card

This is a card in a grid, it can contain anything from a form to some metadata, and can have an icon in the top right.

Card

This is a card in a grid, it can contain anything from a form to some metadata, and can have an icon in the top right.

Card

This is a card in a grid, it can contain anything from a form to some metadata, and can have an icon in the top right.

We also have a card loading placeholder.

The below component is designed for rendering website embeds.