Jonathan Watson

Intro

I'm Jonathan Watson, a software developer that recently made the transition from the entertainment industry. With a longstanding interest for technology and design, as well as continued learning and problem solving, I decided to pursue a career that I felt would be a better fit for personal and educational growth.

const faves = ["cycling", "coding", "cheeseburgers"]
const random = Math.floor(Math.random()*faves.length)
const faveHobby = faves[random]
console.log(faveHobby)

Projects

Dub's Doubles

React / Django

An easy to use app that allows customers to order cheeseburgers and allows the manager/owner to operate the business using an admin dashboard.

...More

Swipe Home

React / JSON-Server

An intuitive house finding app based on a well known app that utilizes swiping.

...More

Dub's Doubles

I created this app for my hypothetical cheeseburger restaurant. I wanted to give my customers the ability to pre-order burgers for pick-up, so I built a client facing POS system. I also wanted the ability to manage my app as the owner, so I built an admin dashboard with charts to show different data.

Since this project was focused on the server, I wanted to deepen my knowledge of Django by exploring Many-To-Many relationships and also wanted to learn how to use custom SQL queries to transform data into a format that was plottable on the frontend dashboard charts. I chose to keep the client frontend minimal to ensure a high conversion rate, while using Material UI as much as possible.

App Story

1. Customer Walkthrough
2. **Best Viewed on a Mobile Device
3. - Register or Login using the Customer credentials below.
4. - Choose Burgers or Fries.
5. - Add Products to Cart. Notice the Cart icon appears with an item count and total price.
6. - Check out the BYOBurger at the end of the Burger page. Add Toppings to your heart's content. Notice the price at the bottom changes when Toppings are added.
7. - Click on the Cart icon. Verify that your order is correct. Remove items if you need.
8. - Click Payment. Choose an existing card or Add a new one if you registered a new user. When adding a new card, PLEASE use a fake a card number.
9. - Review the final order. Place Order.
11. -Fin

1. Admin Walkthrough
2. **Best Viewed on a Desktop
3. - Login using the Admin credentials below.
4. - Check out the main view
5. - CLick the Cheeseburger Icon the upper left of the Nav Bar
6. - Explore
7. - Fin

Demo Credentials

Tech Stack

• HTML 5
• CSS 3
• JavaScript
• React JS
• Python
• Django
• Material UI
• React Charts
• Firebase
• Heroku

Swipe Home

I thought of this app while looking for houses to rent. While growing bored with scrolling through houses on the other apps, I thought it would be neat to be able to swipe left or right through a stack.

The learning goals of this client side project were to solidify CRUD functionality, familiarize myself with React, learn how to handle multiple 3rd party APIs, to explore Material UI, and mainly to have fun. The server is currently built with JSON-Server, a fake REST API.

App Story

1. User Walkthrough
3. - Login using the User credentials below. Upon login you are greeted with an automajically generated avatar that can be changed by uploading your own photo in the User Profile.
4. - Click Search. Enter some search criteria. Choose whether you're buying or renting. Click Submit Search
5. - Swipe Left or Right on the houses. Swiping Left will remove the house from the stack, while Swiping Right will add the house to a list of favorites.
6. - Click the User Profile icon located in the the Nav Bar. From this screen you can view past Searches, edit info, go to your Faves, and log out.
7. - Click Faves. Here you can choose to remove them from the stack by Swiping Left, keep them in the stack, by Swiping Right, or check out more details by clicking on the photo.
8. - Click a photo. The Fave details card features a photo carousel, a list of features, and an embedded map of it's location.
9. - Click the Messages icon the Nav Bar. Click the Message bubble. You have entered the Chat.
10. - Fin

1. Agent Walkthrough
2. - Login using the Agent credentials below.
3. - Same functionality as the User, but also has the ability to list houses from the Home Screen.
4. - Fin

Demo Credentials

To Do

• Rebuild server with Django - in progress 1/19/22
• Make Agent Listings editable

About

Lorem ipsum dolor sit amet, consectetur et adipiscing elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices. Aliquam libero et malesuada fames ac ante ipsum primis in faucibus. Cras viverra ligula sit amet ex mollis mattis lorem ipsum dolor sit amet.

Contact

• Twitter
• Facebook
• Instagram
• GitHub

Elements

i = 0;

while (!deck.isInOrder()) {
    print 'Iteration ' + i;
    deck.shuffle();
    i++;
}

print 'It took ' + i + ' iterations to sort the deck.';