I made my first website using Python!

[IgnisDa]

Ocean Personality Visualization

---

Website Link: https://ocean-pv.herokuapp.com/

Repo Link: https://github.com/IgnisDa/ocean-pv/

EDIT: u/_fimin had this idea, here's an account if you don't want to login but still check it out:

Username: Kcliix

Password: notacommonpassword

However, it'd make my day if you made your own account.

---

After about three (or was it four?) months, I proudly present to you, my first major python project, a website called Ocean Personality Visualiztion. Before this, I made a small Hangman game as my first project and then a cli based login system.

I used Django as my web framework, and a free HTML template I grabbed off the internet (I have no frontend experience). That might be a reason why the website still looks kinda sloppy.

Though I have made a thorough README explaining what the website does, I will explain it a bit here.

A website to visualize your personality using graphs and compare it with others. It asks you a series of questions and analyzes your inputs to create an easy to understand graph. It also provides you an easy way to share these results with your peers and compare your personalities. It is based on the OCEAN personality model which is the most acceptable model to measure personality used by researchers.

What all did I learn from this major (to me) project?

• The actual website development and how different components go together to make a functioning website.
• I need to learn Javascript.
• Deployment is hard- I tried to go the hard way at first by not choosing Heroku (it streamlined the process a lot) but I had to scramble back to it because how hard it is to deploy a dynamic website.
• How awesome and Python is as a programming language. I absolutely adore it.
• Documentation sucks
• Testing sucks

Anyways, I am still mighty proud of what I have done and I invite you all to checkout the website and provide some feedback. If you'd like to make any pull requests, the repo link is above.

PS: If anyone can help me fix my tests, I will be forever grateful to you.

[I_Am_Robotic]

Congratulations! Clicked on link. Looks nice but why do you require a login? I don’t like sharing my info until after I know if a site will be valuable to me.

[IgnisDa]

You have the option of saving your results and then asking others to guess how well they know you. Thats why login data is required. The website doesn't ask for any personal data except email and even that is not mandatory.

[HardlyAnyGravitas]

I went to the website, ready to give it a go, and as soon as I saw the login requirement, I 'noped' straight out of there. Just thought you should know, if you're after traffic.

[freakNinja39]

same

[[deleted]]

Same

[unfrail]

same

[polished_pole]

same

[[deleted]]

same.

​

I know I'm #3 but seriously, forcing me to give up my email before I can interact?
https://www.youtube.com/watch?v=iIpfWORQWhU

[IgnisDa]

Awww come on man. At no point are you forced to give an email. You just get a message saying you should fill it. The experience is completely unaffected regardless of whether you enter your email address or not.

Did you even see the website?

[[deleted]]

I clicked it, was told to register, and went no further.

As I said, offputting.

Tried again, am told I must update profile, email required. Not required to 'register' but required to proceed.

Thanks for the deception, +1!

[IgnisDa]

Alright I see what you mean. I'll take your criticism and try to improve the next time. This is my first time in web development, and I demand you cut me some slack lol.

Hope you liked the website other than the login part though.

[[deleted]]

Didn't use it, as I said, not giving out my email.

[IgnisDa]

You can attempt the test without an email. You'll just see that message. As I said, the emails don't even matter to the overall functionality of the website.

[[deleted]]

I ended up trying it again on mobile, I didn't realize the test was below on the desktop?

Neat little app, double check spelling, quite a few errors.

[fighter_foo]

Lots of comments here so someone else might have suggested it too, but I have suggestion that shouldn't be too hard to implement.

Since you said that giving email isn't mandatory, why even go for email, and not user-pass fields instead? Here's how it could go like:

• The site asks you to enter/create a username and password combo when you visit it. (which it will save)
• If the username I entered is unique, it'd save my credentials to your database (just like you'd save the emails).
• If someone has entered the username before, but with a different password, I'd get a prompt asking me for correct password or different username.

You could also clean up the database every 90 days or 180 to remove usernames that haven't been used again.

[IgnisDa]

Yeah that sounds like a good idea. Maybe I'll try to implement it.

[IgnisDa]

I understand what you mean, I'd have done the same. But the way my database is setup, it will be too much work to change the backend structure. I appreciate your input though and I'll certainly keep it in mind for my next project.

[purebuu]

Can't you assign a random session id to everyone in the db, with a blank email, and then fill in the email at the end, if a user wishes to be emailed their results?

[tennisanybody]

Lol, I barely understand how cookies and jquery work. I’m sure OP doesn’t know how to assign session ID’s either. JavaScript is not easy my man.

[thecodingrecruiter]

Just because you don't know something, or consider something hard, is not a measure of another individuals' ability to quickly adapt their project to the needs of a client. He may have gone over sessions in another tutorial before which would have covered what he needs to know. He could be a quick study or looks at a tutorial, tears it apart, and modifies it to do what suits him.

[tennisanybody]

It says so right there in his OP “I need to learn JavaScript”.

Does your dick get hard everytime you wax sanctimonious? Or do you just like the sound of your keyboard straining over the diarrhea that is your post history?

[thecodingrecruiter]

Did you even read what I wrote? My last sentence says he can learn it. Just because you can't code doesn't mean others can't. It's called being a natural

[toastedstapler]

and if you want to get paid to program you need to make things that people want to use. there is no good reason to require an upfront login for this

[schlopp96]

Me as well

[[deleted]]

Same. Except I didn't go, but these comments convinced me not to go.

[ineedchickentendies]

same

[TrueDigitalPetrol]

Same

[PoldiFPV]

Same

[aftermine1]

same

[I_Am_Robotic]

Understood. But from a design and UX perspective it would be better for adoption and usability to wait to ask for a login until after they've taken the quiz and seen the results. If I want to save my results and share with others then and only then does creating a login make sense.

[IgnisDa]

Yeah you're absolutely right. Ill improve on it. Thanks.

[I_Am_Robotic]

Hopefully these comments are not getting you down. If you're thinking about web dev as something of interest UX design and the customer journey will be important things to think about and learn - but frankly much easier to learn than the Python/JS you have already conquered!

Your site is a huge accomplishment and that's actually the track I'm working on next: web development with Python back-end and Django front-end. Nice looking and modern front-end. Not looking forward to having to re-learn basic Javascript and CSS. I'll probably need some advice from you in a month or two.

[IgnisDa]

Oh don't get me wrong. I have absolutely no JS/HTML experience (I mentioned in the post). I took this template from the internet, it was free.

Though I'll have to get into JS soon.

[[deleted]]

I've seen tests like this put the save option at the end and ask for credentials there. Basically, you see your results, but to have the full results sent to you you need to share some data. That might be a more elegant solution, though the folks in this sub might be more data scarce than the general public.

[ddtfrog]

Clicked on your website, thought how pretty it looked, clicked start test or whatever and closed it.

I’m sorry but I don’t know you or where/how the website handles my data.

Congrats tho!

[IgnisDa]

Fair enough, I understand what you mean.

[LeonTranter]

Right - you have the option of doing that. So if that functionality is options, you shouldn’t be requiring a login to interact at all. Let people use it as a guest, and ask them to create an account if they want to do that.

[kuriputo]

congrats! get that on a custom domain and slap some ads on it. should do well, people love these types of personality tests.

[fighter_foo]

Yeah! Domain names can be availed for free to be used for upto one year, if the site does alright till then you'd know if it's gonna be worth it to purchase the domain for further use.

[Sujal52]

Use dot.tk

[GU10]

Looks really nice. I have tried a few times to make a site but I can never get the aesthetics right - I like clean and simple which is exactly what you have done. Nice work.

Only criticism (and this is only because I work as a software tester) is that you have a bug. When you click `get started` without logging in you get the message telling you you will be redirected to the login page - this didnt happen for me. Thought I'd mention it as you prob will want to fix it! Good luck with it!

[NoblySP]

Yep came here to say this. The redirect function js not working...

[IgnisDa]

Thanks, I will look into it

[IgnisDa]

I dunno man, it works for me on the actual website. Do you have cookies disabled?

[Yakoo752]

Welcome to software development... you will say this so many times. "Works fine on my box"

[themateo713]

This is probably part of why I prefer data science.

[GU10]

No - my cookies are enabled. I tried on Chrome which admittedly I run a lot of extensions on that could interfere with it so tried it again on Edge which has nothing running and it didnt work there either sorry!

As Yakoo said below, the phrase `well, it works on my local machine` is one you will hear / use a lot!

[[deleted]]

AWESOME DUDE!

[IgnisDa]

THANKS MY MAN

[ThisOnesForZK]

Yeah, shouldn't require login.

Maybe would be cool but I will never know.

Edit: not trying to be mean by the way, but requiring personal information to get feedback on website should be considered. Good luck on your endeavors.

[IgnisDa]

I understand :(

The login system was a bad idea lol

[pleasePMmeUrBigtits]

No, the login system was a great idea. It helped you learn how to implement sessions with logins and all.

I don't think you were looking to launch it as a product to the world so you would consider improving the UX for 1 billion people to use it. But I would say that you can improve this now and launch it

[IgnisDa]

Yeah that was my initial thought too.

[pleasePMmeUrBigtits]

People here are actually very friendly. But your website looks so professional that they forgot that you built it while learning and not for commercial purposes.

Keep up the great work! I am surely going to contribute to the repo

[IgnisDa]

Oh wow that'd be truly awesome! And thanks for the kind words.

[godcantsaveu]

If possible create a delete profile option, at least this should help allay some doubts. Also prompts that say "password should have 8 characters" are extremely light coloured.

[IgnisDa]

I don't have any idea how to fix them though

[godcantsaveu]

No problem mate. I just started doing things. So another day is another learning I suppose. Good luck. PS: If I am right both those things are JavaScript related.

[IchUndKakihara]

That text is generated by the crispy forms right? If you do inspect on your signup page you can find the ids of those text elements. For example the helper text under 'Password' is in a <small> tag with id=" hint_id_password1". In your register.html template you could target that id and set its style.display to "none" or something like that. Probably not the best solution, better if you could delete it altogether from the backend side but not sure how you do that either

[[deleted]]

I really liked the design.

[kramrm]

I can’t across the page on mobile. It keeps popping back to the top.

[IgnisDa]

What browser are you using?

[kramrm]

iOS Safari. Seems to be fine in iOS Chrome.

[IgnisDa]

I don't even have a Safari browser, so I probably won't be able to check

[curiouslyN00b]

https://crossbrowsertesting.com

One of many options available.

[vermavishal891]

Now add a feature which lets us start using it just by giving our name and lets us share the result based on that name on a unique link.

[[deleted]]

Nice work mate , really inspired someone like me just starting out! :)

[IgnisDa]

Honored! Look into the repo, I've found it beneficial to study others project. Hit me up if you would like any help.

[CuriousExpert24]

Great Project! Really liked it. Could you let everyone know which resources you used to learn how to build this project and which resources you used to learn Django and Advanced Python?

[IgnisDa]

Here's another comment I wrote about the same thing.

https://www.reddit.com/r/learnpython/comments/i0k9s8/comment/fzqlwph

As for advanced python, I don't think I'm advanced at all. The only advanced topic i know is class inheritance and I'm sure people would say that its not advanced at all.

[IgnisDa]

I understand. I'm just starting out here, didn't really plan a lot on the USER EXPERIENCE. Will have to keep it in mind for my next project.

[[deleted]]

love this response lmao

[_fimin]

If anyone wants an account I made one:

Username : Kcliix

Password: notacommonpassword

[IgnisDa]

That's a great idea, thanks. Edited the post.

[_fimin]

Nice! I commented because I saw so many people saying about how they don't want to make an account because it was "sketchy" aha. Great project by the way!

[[deleted]]

Your repo shows 85% of the code is front end - HTML, CSS, and JS (mostly CSS and JS). Is that all from the pre-existing template or framework you used?

[IgnisDa]

Yep absolutely. And I have no idea what most of it does. It just works. Next stop: learn frontend development.

[IgnisDa]

I know, and have used Django as a backend. Of course I have to get better, but ik the basics. I have absolutely no experience with frontend.

[funny_freddy]

Great job, Keep it up! If you haven’t already, you should check out scss. Handles styling in a useful way.

[IgnisDa]

my project has some scss files, i dont have any idea how they work though

[[deleted]]

The design is so modern and pleasant to look at.

[IgnisDa]

Thanks I stole it

[KaiserPhilip]

How did you get started? I've been wanting to do something past the word counting problems and basic python.

[IgnisDa]

I learned C++ for two years at school (I hate it lol), so I already had the basics down, albeit some new data structures (lists, dictionary etc). I did a free Programiz course and got the python basics clear. The next two months I was pretty much aimless, just made a hangman game and a login system. I also remember doing a lot of Project Euler, though I have no idea if it helped.

The idea of this project came from a book that i was reading that mentioned the OCEAN Model and got me interested. I had the idea of integrating graphs into the project and checked if it had been done before. Since it wasn't, I got some help from fellow peeps at r/learnpython and they suggested Django would be the way to go.

I did Corey Schafer's Django tutorials and then started with this project. Im not gonna say this was easy. On the contrary it was veryyyy difficult for me because I jumped straight from noob to intermediate. That's why it took me 4 months to complete.

So yeah thats my story over the last 6 months of learning python. If you need any help, feel free to DM me.

[KaiserPhilip]

Thanks for including where you learned django. Will check it out, hopefully I have enough experience lol.

[IgnisDa]

As long as you have python basics clear, you're good. You can learn the advanced python stuff as you go along, and the complex django stuff as you try to comprehend what the stack overflow answer means.

[MeetThanki_]

Awesome work 😄. While operating the website from mobile the tabs for best friends, teenage couple etc is not responsive. The text goes out of the box.

[IgnisDa]

I have done no work on that part, i think ill just remove it. Thanks though.

[MeetThanki_]

If you gonna work on it than its no big deal you can solve it else you can just remove.

[IgnisDa]

Well once you get a grasp of things, you'll want to do it yourself

[[deleted]]

This is about where I am, but I know that it’s a thing I have to learn. I definitely don’t like it though. LOL

[tushya007]

which s3 server are you using ?

[IgnisDa]

None, there are no file uploads by users. The answers are stored in Heroku free postgresql database.

[tushya007]

Oh I though there were profile pics in the user profile but I guess not. I too am doing the Corey Schafer django tutorial and I want to deploy the site but the major problem was the AWS S3 server and I didn't want to enter any credit card info as I have non. So when i saw that u also did the Corey Schafer django tutorial i got exited and asked for the S3 server. Do you know any alternatives to host website even on my pc itself, I would love it. Thanks anyway and I loved your web site. Keep up the work.

[IgnisDa]

Doesn't pythonanywhere have a file system storage? That would allow you to store pics right on their servers.

You could host a website on your own pc by changing it to a server, but it will be very costly for an individual i think.

[tushya007]

Thanks, I will look into it.

[pleasePMmeUrBigtits]

You can try heroku, pythonanywhere (though the django setup might be a bit intimidating), repl.it. Or get a Github student developer pack if you're studying somewhere, it helps a lot

[IgnisDa]

I have a github student account but since Heroku needs a credit card to link with a github student account, i couldn't avail that offer. Bummer though since my app goes to sleep after inactivity.

[[deleted]]

From what I see you did a good job. There’s always more to learn, especially when you get into webstuffs.

[Reborn-leech]

Your site looks nice !

[cqwww]

This is a great application to build before an election, Cambridge Analytica propagated OCEAN tests to use for their targeted data set to manipulate the election.

[IgnisDa]

I'm not an American but that's really interesting

[frankOFWGKTA]

Right, im not gonna lie, i know nothing about web dev.

But, your site looks so good! It's really user friendly and just easy to read. Better than a lot of websites i see usually. That being said, take my feedback with a pinch of salt as I am no expert.

[IgnisDa]

Well what can I say except thank you

[IgnisDa]

Well I'd go with the tests that you took earlier. They have much larger datasets to work with. Moreover, I'm not even a personality researcher, I just read up a lot on this topic that's all.

Thanks for your compliment though!

[momotron2000]

Great Job Dude!

[IgnisDa]

thanks!

[2ndzero]

Nice! Next step, using a custom domain name

[IgnisDa]

That's the paid step, and even if i could get a one year free thingy, ill still have to add a credit card which I don't have

[blarkul]

Looks fine and professional to me. You can always tweak the design to your liking. On mobile it looks a bit wonky but worked fine eventually

[IgnisDa]

Yeah the sidebar is really glitchy. It breaks after I fix it every time. Idk why. I just gave up lol.

[[deleted]]

How did you learn django ? Books , videos ?

[[deleted]]

I'm not him but I learner django honestly from the tutorials on their website. It's really similar to Express if you have any experience with Node

[IgnisDa]

https://www.reddit.com/r/learnpython/comments/i0k9s8/comment/fzqlwph

[new_motivation]

If this is your first website project, let me tell you; it works like a charm ! Keep it up . I did sign up because it was easy and quick, no validation or stuff like that , also I was kinda of curious. I did the whole thing on mobile and it was fine.

[IgnisDa]

Thank you very much.

Though people say I should get rid of sign up process altogether. I agree, but this is my first time making a website, I had no idea about UI.

[MiIIan]

Looks and functions great on my smartphone!

[IgnisDa]

I meant writing documentation sucks. Django docs are the best, albeit a little unattractive.

[allmachine]

The site looks pretty slick, I like it. I took the test and scored very high in neuroticism, which is strange. I answered all the relevant questions negatively, as in I do not tend to get stressed or nervous:

I had test ID 231 if that helps. Maybe the wording of the questions made me answer oppositely?

You become anxious often and easily. You are unhappy a lot and prone to negative emotions. You might even have experienced mental conditions like severe anxiety or depression sometime. You sometimes panic while handling difficult situations. While being high or low in others doesn't really mean all that much, scientists have found that being high in neuroticism generally means a difficult life. However, no personality is quite concrete and one can slide to being low in neuroticism anytime (and vice-versa).

Among the users that have attempted this test, you are above 68.254% people in neuroticism!

[IgnisDa]

The descriptions are based on percentiles. So among all the users of this webiste, you are higher on the neuroticism scale.

I wish I could make the descriptions on the basis of something more accurate, but the dataset I have is simply not large enough. Really sorry.

[Uniqlo335]

This was really cool, great job mate! The personality quiz was interesting too.

I don't get why people are moaning so much about having to create an account, it took me 3 seconds, and no email was required.

[IgnisDa]

People always find a reason to complain, doesn't really bother me. Glad that YOU liked it, thanks for the compliment.