MissionBit Cirriculum used to teach web application development to high schoolers.

Superwall is a simple web application that has a single "wall" onto which anyone can post anonymous messages. As simple as it is, it's a real-deal, fully-functional web application that could be deployed as-in onto the web at large.

This is what it looks like once running:

Getting Started
Editing the application
Saving your changes to superwall

Getting Started

We're going to work on superwall using GitHub like a professional programmer would.

Fork the repository

First, you need to create your own copy of the code. To do this you need to "fork" the main repository at https://github.com/MissionBit/superwall. This will create a copy of the superwall repository under your own GitHub account.

To do this, go to the superwall repository on GitHub. In the upper-right hand corner you should see a button labeled "Fork"

Click the button and this will create a new repository under your own GitHub account. The number next to the button indicates how many times this repository has been forked, so it might be a different number.

Get the clone URL

Now that you have your own copy of the repository, you need to create a copy on your local computer. In git-ese this is called "cloning." Go to your own GitHub page and you should see the "superwall" repository.

On the right-hand side you should see a little section labeled "HTTPS clone URL".

Copy this URL. It should look like

https://github.com/your-actual-github-username/superwall.git

where your-actual-github-username is your personal GitHub username.

Important! Make sure you are not copying the original repository's clone URL, which would be https://github.com/MissionBit/superwall.git.

Clone the repository

Once you have the clone URL, open the Terminal on your desktop and run the git clone command:

git clone https://github.com/your-actual-github-username/superwall.git

You might be prompted to enter your GitHub username and password.

If everything worked, it should look something like this:

Start the web application!

We're ready to go! To start, run the following commands one at a time:

Change into the superwall directory
```
cd superwall 
```
Install the bundle gem, a Ruby library for managing larger applications
```
sudo gem install bundler
```
Use bundle to install the libraries that superwall needs
```
sudo bundle install
```
Run the application!
```
ruby app.rb
```

My computer is set up slightly differently so I don't need to use sudo, but this is roughly what you should see:

Using superwall

At this point you have a real, live web application running on your computer. Open a browser and go to http://localhost:4567 and you should see the "Superwall" application.

You can take it from here! If you want ideas for how to play around with this, visit the What to work on section.

Editing the application

The main application is in the app.rb file. If you want to change the HTML, look in the templates/ directory. The main CSS file is located at public/main.css, which you can edit.

If you want to add images to your website...

Find an image on the web or create it yourself
Download it to your computer
Name it something sensible like banner.jpg or profile-picture.jpg. Spaces and upper-case letters are annoying on the web, so avoid those.
Move the image to the superwall/public/ directory

You can now display the image on your website using the <img> tag, like so

<img src="/my-awesome-image.jpg" alt="This is an awesome image!">

The forward slash / before the image name is important, here.

Saving your changes to superwall

Coming soon! The tl;dr version is to run these three commands from inside your superwall directory:

Tell git we want to commit every change we've made — the . means "the current directory"
```
git add .
```
Commit your changes with a commit message — the -m means "message" and the bit between the quotes is the (required) commit message
```
git commit -m "Saving my changes to superwall"
```
Push your changes to GitHub — you might be prompted for your username and password again
```
git push
```

sandbochs/superwall2