Artemis

Let’s go into web design blind. Let’s Code in the Dark.

• Download for VS Code
• Spectator Demo Site

Inspiration

Being stuck at home in quarantine we bring you Artemis, a VS Code extension and game that allows anyone to learn and practice HTML/CSS. For both beginners and professionals, Artemis is a simple and fun application for learning and practicing web design. We aim to support and teach anyone interested in web development by gamifying HTML and CSS.

With all competitions going online, we are passionate about bringing everyone an at-home web design competition experience. Without the ability to see your friends in person or go out to public competitions, we bring you a way to have that joy in your own home. Join up with your friends in a call and see what each of you design. Vote on your favorites and laugh together over the failures. In the end, practice your skills and have a fun competition.

We were greatly inspired by the coding competition: Code in the Dark and wanted to make this more available to people. Especially during this pandemic, we see competitions moving to online and so we made a coding competition application that you could play with anyone. With a simple, clean interface we bring to you Artemis where you can show off your web design skills right at your desk at home!

What it does

Install our extension on VS Code and join a game. Play with your friends or strangers in a real-time online coding environment. By seeing how others build their websites, you'll get a first-hand look into web design techniques.
Create or join a room to begin a competition. Once everyone signals that they are ready, the competition starts.

The game is simple. You are given a certain amount of time to build the website shown to you. You're not allowed to preview your HTML/CSS code (...which can lead to some fun and interesting outcomes).

Even those with no experience can join competitions as a spectator to learn the basics of HTML/CSS before they compete. Spectators can view competitions, chat with other members of the audience, and cast votes for the winners. It's a fun and interactive way to learn from others and connect with the web development community. You'll gain experience by viewing how competitors are designing their website and make new friends in the spectator chat. We all need some more social interaction being isolated at home.

How we built it

Coding in the Dark is built from a variety of components including:

• React
• VSCode extensions
• No external APIs (!!!)
• Express
• 🕸️🧦ets
• HTML/CSS
• Redux
• Node.js

Challenges we ran into

1. Setting up the web sockets
2. Spectator chat interface (gotta brush up on those CSS skills)
3. What is this React you speak of?
4. Surprisingly little documentation on the inner workings of VS Code

Accomplishments that we are proud of

During quarantine we can have fun with friends and practice coding at the same time! Without the ability to go out to competitions, we now get to have a way of hunkering down at home and having fun coding with other people. With spectators and voting, this is a great way to connect with others and have fun with friends.

What we learned

1. Wait... web sockets are not just socks for the web?
2. React isn’t just javascript
3. Bootstrap can help!
4. Friendship and Teamwork ;D

What's next for Coding in the Dark

There is always room to improve!

• Difficulty Levels
• Tournaments and prizes?
• Account system
• Kahoot music
• Security ???
• Practice Mode