Web app development / logo design portfolio

Web app development saas with Python and Django:

Here are a few things I made. Click them to test out for yourself. In depth explanations are beneath each link, and throughout each app.

  1. Crowd funding app / GoFundMe clone alternative.

    • This is a GoFundMe clone. Anyone can donate fairly anonymously to any cause. As the administrator, you create any categories you want, and when people sign up / log in to your site, they can create any Fundraiser they want.
    • I limited each Fundraiser to lasting 90 days, and letting the admin take 10% of the earnings, but that can be changed on the backend easily. This is all implemented with a sandbox merchant account too, so you'll have to use specific dummy credit card numbers to use it.
    • Markdown syntax is supported for both feed types, and the particular fundraiser.
    • Has RSS 2 and Atom 1 feeds enabled for each fundraiser created. That way, people can subscribe to any feed and get push notifications for that fundraiser, without having to make native iOS or Android apps just for push notifications.
  2. Forum app.

    • You'll need an account to use it, but not to view it (see below to create an account).
    • I made this forum. Create some posts if you want. You can then reply or edit your own posts, but not other people's. It supports markdown syntax for looking prettier. You can also follow users, they can follow you, and get the feeds from them based on the latest topics they make, sort of like Twitter. Searching with multiple values is supported too.
    • As with anything on this page, I could modify the forums to deny people access based on whatever you'd want. Such as if I merged it with my tiered access app below, so you could potentially only get access if the users paid, or whatever you wanted.
  3. Tiered levels of access app.

    • This requires you to create an account.
    • This app demonstrates that I can restrict access to certain levels, such as bronze, silver and gold, or however many levels you'd want. I didn't implement any payment system with it because I already do that with 2 other apps. All you have to do is click some buttons to enable it's usage, and see it for yourself.
    • If you make some replies in the forum above, the first level in this app will let you give a mini csv file based on those replies, the 2nd gives a bigger csv file with more details, and the 3rd level gets you a much more detailed zip file filled with the content of each reply you made. A more real world example would be giving someone some special content behind a paywall (meaning if they paid, they get access to certain content based on how much they paid).
  4. Crypto currency app.

    • This app uses the cryptocompare.com API to pull the latest crypto currency news stories from them. Multi value search is supported to filter stories based on different categories. Just follow the directions.
    • You can also test out the API that lets you run a search for crypto currency prices. Multi value search is supported too.
  5. Poll app.

    • Notice how you can't vote more than once. Read the directions there to see how it goes.
    • I kept this poll app open to the public so no login is required. As the administrator you would be able to login, create a new poll question with as many choices as you want, and it can run whatever poll you want, or the latest poll, on whatever page you wanted, based on a user's actions (such as if they paid).
  6. Wordcount app.

    • Enter some text, click the submit button, and watch it count all your words.
    • Has instant feedback with javascript based on how many characters I allow left.
    • Notice how the results for it show the most used words in descending order, and evenly distribute the answers across the width of the page. You won't see that even distribution if you have an outdated browser. So I suggest the latest version of Chrome or Firefox.
    • I also wrote the function to filter out all uses of semicolons, colons, periods, and commas. It was important to do that because if you typed the word "sky", and then "sky," with the extra comma in it, you would get 2 separate words. Or if you typed "a", and "a,a,a,", Your results will be 2 words: One as "a", and the 2nd as "aaa".
  7. Email list sign up app.

    • No account is required to sign up to this list.
    • This app showcases the use of a double opt in with a unique uuid to prevent blackhat hackers from deleting the value in the database. Explanation follows...
    • So you give your email, that gets put into an unconfirmed email list, I then generate a unique link for you, and send you an email to confirm it by going to the link. Once you go to the link and confirm it, you get taken out of the unconfirmed list, and put into a confirmed one.
    • I also made it so you can only be sent 1 email. The reason why is to help protect my IP from being blacklisted as spam. This is important because if you send the same email to the same person over and over again, your IP will be blacklisted and your chances of getting anything sent will be 0.
    • This function also has a fallback just incase the server is overloaded with work and can't send the email yet. So if you try to signup again with the same email, you will be directed to a page that has a javascript based captcha that I made, to prove you're a human. I didn't require ajax in this app like I did with others, but I used a clever workaround that uses fewer trips to the database, so I preferred that.
  8. Account app.

    • This example goes with many of the other apps on this page.
    • When you sign up, it's complete with javascript and an ajax request for instant feedback on the same page. There's an immediate ajax request as soon as you leave the name field on the signup page. What's an ajax request? Try signing up with the name abcd. As long as you have javascript on you'll see an immediate alert that that username is taken once you target the next input field. Also notice how the submit button is disabled, and the color is changed until both passwords are filled in, are correct, and at least 8 characters long. Try clicking it with short, or incorrect passwords. If you do, nothing will happen.
    • Notice how there is also a length requirement for the username field. That one requires 3-12 characters before the warning goes away.
    • I also intentionally made it so you can still click the submit button even if the name is already taken, but both passwords are the same. If you do this, you're going to see the fallback I wrote on the backend that reloads a new page that says that name is already taken, so use another. Try it yourself. For some of the apps that follow, when you login it doesn't allow that at all. So you can't use those apps at all unless you answer the correct answer for the captcha. There is a good reason for this design. I will describe why in those apps below.
  9. Subscription app based on time.

    • This requires you to create an account.
    • If you hired me and you wanted a potential user to have access to certain areas of your website based on payment, I can do that. Test this app for an example. I can also do it with any tiers you want, such as bronze, silver, and gold levels like I show below. But after you make an account, you can't have access to a video unless you go through the right process. This app will give a dummy credit card to test this, so you can fill out fake info everywhere else too. Once you go through it and it validates the fake number, you'll have access for 3 minutes. It's accurate up to the second too, so if you got access from 12:34:56 PM - hours, minutes, seconds - then you'll have access until 12:37:56 PM.
    • This app will also use the api and drop in user interface from braintree's payment gateway. That means that when you go through the process properly, you will get content loaded from braintree's site onto mine, for testing the payment with a dummy credit card. I only have the regular fake credit card enabled right now because every other payment option requires me to make an account for each one (paypal, venmo, apple pay, google pay, etc), which I don't want to do, but I'm still capable enabling them.
  10. Shopping cart CMS.

    • This one does NOT require an account to test.
    • This app has an automatic email sent once you make a fake purchase.
    • A CMS is a Content Management System. If you hired me, this system would give you the ability to add, update, and delete your own products, all on one neat little dashboard that lets you edit the prices and quantity on the fly. Click here for an example.
    • On the admin's side, I can give you the ability to export all orders to a csv file so you could send it to a warehouse for distribution.
    • In this app I use braintree's hosted fields for making fake payments, which is more complicated to make than the example in the subscription app above. That means you will make a fake purchase, but the payment inputs are designed like I designed them, not braintree's design like the app above. It looks prettier and more professional in this example, but is not required.
  11. Article app with comment system, captcha, ajax.

    • Requires you to make an account.
    • Notice how you can also leave comments on any "article" as long as you go into it.
    • Notice how you can only update or delete your own articles, and not anyone else's. I kept the buttons there to let you attempt it, but show you that you can't if it's someone else's. If you were an admin you could update or delete any article, or comment on that article, through the admin panel.
    • I can also make it so you can filter bad comments. Click here for an example. It's at the bottom on that page.
    • Every "article", and all the comments for each "article" also show's the date and time it was posted (based on the time zone I set - US Central Standard Time), the user's name, their comment, and are ordered by the most recent ones up top first, up to 10. I could allow them all, but this is to show what I can do, and limiting database queries for things that can change often, like comments and "articles", also makes it faster. In other words: 10 database queries is faster than 100.
    • Notes on the custom made captcha app:
      • Once you try to make a comment on an "article", a box will load a random Roman numeral picture that you have to give the answer for in CAPITAL ROMAN NUMERALS ONLY. You will get instant feedback through javascript in the same area on whether you are right or wrong. When right, the submit button will show up to allow you to add your comment. When wrong, the submit button disappears and is also disabled.
      • As I was mentioning above with the account app: I intentionally made this app require javascript to run, instead of having a backend fallback that allows you to hit the submit button even if the username is already taken. Why? To show you what I can do, so read on. This app has it's submit button disabled by default in the HTML, and when your answer is correct, it removes the disable and shows the button.
      • Why do the above? Because it's always a wise idea to offset as much processing power as possible to your users with javascript, instead of having your backend render the page all over again. Imagine you had 10,000 users trying to leave a comment through this captcha app all at once... If they were all wrong and I followed the design I showed with the account app above on some other app that allowed you to still hit the submit button even though the username was taken, now your backend has to process the same page 10,000 times for each individual user, along with any individual settings they may have on that page. That would be a very resource intensive, inefficient, and stupid design, which at some point would force you to buy or rent more powerful equipment to keep up with the extra processing power your users would require. But if you force users to require javascript for it to run correctly to begin with, such as I've done by disabling the submit button by default: Now you no longer need to have the extra processing power to render the ENTIRE page again, and instead only need some teeny tiny bit for just the comments they wanted to add. Designing with these principles in mind makes everything far more efficient if you get lots of users in the future. For a few users it wouldn't matter, but if you got lots, it can make the world of difference.
      • And for people who have javascript disabled, if they're smart enough to know how to disable it, they're probably smart enough to know how to enable it. Those people will also see an HTML fallback letting them know they can't use the app without javascript. Because of all of this: Know that I always have efficiency and cost effectiveness in mind when designing.
      • I also could have used the free google captcha, but I made my own to show you what I can do. So you're not going to see this variation anywhere else unless someone makes the same thing like it. It's already made in a way that you can make your own images, load them through the admin panel, assign a value to them, and that would be a randomly loaded image that a user would have to type the value in. I could even make it so it showed an image with no text, but users have to type what it was, such as a circle, although that would require a few edits to keep things consistent. Either way, it's all straight forward and you don't have to know how to program anything.
  12. Blog app.

    • This blog app is a CMS or Content Management System. It's also a bit different from the "articles" app above because only the admin can create posts for it. But ANYONE can comment on a particular post, and they don't have to sign up, or even sign in at all. I also didn't include the captcha app, but I could if I want to.
    • Notice the automatic pagination and the tag filters. Just click a tag for a particular post, and it will show you all post's related to that tag. Then when you go into a particular post, it will show you similar ones as well based on the filters I set.
    • Every comment that people can create is listed in earliest order first, but also have automatic numbering of the comment it was, like 1st, 2nd, 3rd, etc. And as the admin you can add or delete comments as you want. I also set it so in the admin panel you can delete or filter out bad comments. Again, click here for an example. It's at the bottom on that page.
    • It also has automatic RSS 2 and Atom 1 feeds generated every time the owner posts a blog. Click the RSS button up top, and subscribe to either one to test it yourself. It also automatically updates your sitemap with the newest post.

Web design services:

I built this website from scratch to W3C standards with progressive enhancement (no WYSIWYG editors), and it works in all major browsers. I made all of the:

  • Custom art and button sprites (so there's fewer server requests for faster loading times),
  • CSS and SVG animations,
  • Popups for the art gallery below,
  • I set a custom webfont that is most likely not on your computer,
  • I also used Javascript with ajax requests for certain things too. See the web app examples to try them out.
  • But I can utilize templates to keep costs down and make development faster.

Mobile friendly responsive design

That means I made it work and look good all the way down to a screen width from 280px to 1920px wide. So it will even work on cell phones and other mobile devices with small screens.

If you're on a desktop computer: Resize your window below 724px wide until you see the style change. The triangle up top is a button you click or tap for navigation.

Check out the layout difference in the art / logo designs below

Notice how when over 725px wide, all the images continue to stay perfectly centered when resizing the window. If you don't see that, your browser might need to be updated so it has the ability to render flex boxes, otherwise you'll just see them spaced equally from left to right, but not perfectly centered every time.

The responsiveness of the popup modals when you click on them also continue to be proportional to the screen width and height, and how when the images are larger, you can scroll down to see the rest of the popup (without the overflow: auto; property/value, you wouldn't be able to see it).

The breakpoints and buttons for each popup still look good too. The white-space property has been set to not wrap the text. After you click on a popup, notice the red 'Close (X)' button when resizing the window from 1920px wide down to 280px, and how it stays as one single unit instead of breaking into 2 separate pieces of 'Close', and an ugly overlapping block of '(X)' (a very common mistake with WYSIWYG editors).

SVG buttons for speed and karma points!

SVG, or Scalable Vector Graphics, are types of graphics that are infinitely scalable, and never pixelated. You can do many cools things with SVG buttons.

SVG object efficiency

I set the svg buttons on this site inside an <object> tag to make people cache the buttons and not have to download the file over and over again everytime they go to a new page. Doing so makes it more efficient than if I wrote it inline. This saves 23kb everytime, a very valuable thing if you have a bad internet connection.

Cool things you can do with SVG's:

You can have wonky shaped buttons. On a desktop with an updated browser like Firefox or Chrome: resize your window to under 675px, then move your mouse in between the teeth of any cog, and notice how it won't brighten up unless it touches the cog or it's teeth. So you can have wonky shaped buttons in any way you desire.

Let's say you wanted SVG link navigation that looked like a flower with many overlapping flower petals. Then when you hover one of the petals, it would change color, come to the top of the ones overlapping it, and go to a certain page when you click it. And if you clicked anywhere between each petal, nothing would happen.

SEO and semantic markup

What is semantic markup?

Semantic markup is very important for blind people that use screen readers. They have programs that go through the code I write, and read the words out loud so they can go through the site. Having semantic markup like <article> <section>, and <nav> tags help search engines and screen readers recognize what a tag contains, so it's more efficient for the user to go through and understand.

What is SEO? Why is it important?

SEO is Search Engine Optimization. It's a long term strategy to help you rank higher in search results. The basics of it are to have relevant search terms inside the <title>, <meta> description, and <h#> tags, but search engines often like more. To give more, I utilize schema.org's microdata. Doing this can give you a chance at having a snippet of your code inside the searh results, which can bring much more traffic to your site.

SEO matters because, let's say you want a website that sells organic dog food. So you make a business, get your suppliers, ship it to a warehouse, and set up your website with a WYSIWYG editor (WhatYouSeeIsWhatYouGet). Those editors usually only create a bunch of <div> tags for everything, which are generalized tags for essentially anything. With no relevant title, meta, heading tags, nor schema and other SEO markup: Your chance of getting any traffic from free search results is going to be 0. Especially if you're a local business. You won't even show up on google maps or anything else like that. The only way you will get any traffic with a site like that is by burning money into paid advertisements. On the other hand, if you did the research to set those properly with hot keywords, you registered with the major search engines to submit your sitemap(s) and your local business: you can expect free traffic. There are some other factors involved, but what I just said are some of the biggest and most important.

Digital Artist / Logo Design / Memesmith / UI UX Design Services:

Hover your mouse over the images below, click to see them MUCH larger, and scroll as needed. I put more than just the art on this website here. This website looks prettier on Chrome or anything based off it because I could style the scroll bar with webkit, but it's still pretty on Firefox, just slightly less.

Close (X)
Close (X)
Close (X)
Close (X)
Close (X)
Close (X)
Close (X)
Close (X)
Close (X)
Close (X)
Close (X)