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. Blog app.

    • This blog app is a CMS or Content Management System. ANYONE can comment on a particular post if you allow them, and they don't have to sign up, or even sign in at all. I didn't include the captcha app here, but I could if I wanted 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)
Hover to share Hover to share Share+
SMS BRIGHTEON. SOCIAL MEWE H DIGG SU in Share by email Share by email Share by SMS Share by SMS Share by Gab Share by Gab Share by Telegram Share by Telegram Share by Minds Share by Minds Share by Diaspora Share by Diaspora Share by Brighteon.social Share by Brighteon.social Share by MEWE Share by MEWE Share on Hacker News Share on Hacker News Share by VK Share by VK Share by Pocket Share by Pocket Share by Digg Share by Digg Share by Stumble Upon Share by Stumble Upon Share by Delicious Share by Delicious Share by WhatsApp Share by WhatsApp Share by Reddit Share by Reddit Share by Parler Share by Parler Share by LinkedIn Share by LinkedIn Share by FaceBook Share by FaceBook Share by Twitter Share by Twitter Share by Pinterest Share by Pinterest Share by Tumblr Share by Tumblr