GUYS I DID SOME FINAL TOUCHUPS! I AM READY TO SHIP! THE TOUCHUPS HAD TO DO WITH THE GROUPPOSTS CONTENT RENDERING!💀💀💀💀

I FINISHED ITTTT!
So, I basically cleaned up the CSS as I told in the previous devlog. I also added category tags in every post, which was a feature of the HTML version but I had forgot to add it. Then, I also added a going and interesting interactions in events so that people may express where they would like to go from all the events. I also added the refactored edit and delete functions for events and groups, they weren’t working. I fixed the notifications cleanup which was previously not working, it was a cron job I added in the previous devlog. Also, in the profile page, I have now separated the person’s content into posts and replies, that way the UX is far better. Also, I made a crop image component so that the users can customize which part of the image they want in their PFP, and that is also good because now I don’t have to do the fitting anymore because once they have selected it, only the selected part of the icon is saved, so it becomes a lot more gestible for me. I am also adding content so that stemnet has lots of stuff, and further on I will be adding one or two more details and then shipping it. I really don’t think there is anything else to do, I really put a lot of hours into this, and yeah.

Hello!!! Sooooo I Did a few things like:

• I added pagination for if and when I get a larger userbase the app/webapp won’t crash (Mostly for mobile users) by loading all posts at once.
• I added a few things in the backend to make expanding this app/webapp easier.
• I also added RSVP buttons for “Going” and “Interested” in EventDetails and Events pages to make them more interesting.
• Implemented handleRsvp function to manage user RSVP status and update counts.
• Adjusted comment reply button to display comment count.
• Updated requirements.txt to include Pillow and redis.
• Added a second cron job to cleanup old read notifications
  NEXT UP:
• Fixing the UI
• Add right image sizes in every page w/ content
• Fix the reversed colours thing

Today I worked on the cybersecurity aspect of my site btw :P ( I meant to write : but I did a typo P).
I honestly was chilling doing nginx configuration and I also secured the recaptcha key. I also took heed of one of my comments and added an api for malicious domains plus I hardcoded some others. I also moved the sanatisation to the forms themselves (post, create group)

I did all of the following:

I’m thinking to fix the change password, change email, and report a bug functions. Also, make it able to upload GIFs for content types because currently, although possible, it is not working. I don’t know why. I have to troubleshoot it. And to fix those verification tokens and redirection.

Problems I ENCOUNTERED:

• I tried and tried times again to fix my redirecting script for half an hour antil my stupid a$$ realised the problem was that resend was injecting a tracker in the website to track if the email was clicked and I removed it resulting on verification links working.
• After searching up my content error on stack overflow I found out it was neither a supabase or python storing error but it was in fact a nginx framework error that needed one line to be solved:(

UP NEXT

I am currently running Pentests and rawlers to optimise my webapps cybersecurity and when done I ll prevent any vulenerabilities (I got dyslexia).
Right after that I ll try to get a userbase by using lapse to record me addvertising my site!

SOOOOOOOO: Today I tried to make up for yesterday (I only did like 2 hrs) and here is what I did:
So, I updated the navbar to have a settings page, which I was inspired to make because when trying to find an icon that represents stem extras and all the stem together and not just one kind of stem, a gear came to mind. But then I thought I should also make settings, so I put that aside for the time. And now I made the stem extras icon a more chemistry-looking bottle, and the gear I kept for the settings as I said I would. Everything is pretty much the same, except I made an edit and delete event buttons that were much needed because after all the test events I made, it was getting kind of sloppy and unprofessional because it was filled with gibberish. Same goes for the groups, so I did the exact same thing. Also, I made a table for the users to delete a post that many people have replied to by adding a soft delete function that basically checks if the post is deletable, and if it is not, it changes it to this post is no longer available, this post has been deleted. So, I then proceeded to make the settings page, which was very difficult and still I haven’t got over yet. So, I’ve made the appearance and delete account. I made the delete account button to work. It was kind of difficult so that I could secure it that there is no misuse of this button and hackers might mass delete accounts by hacking into them. I also made a report bug, change email, and change password tabs that although they technically or three work, they need some improvement, which I will make in the next devlog. I also made the appearance into something more modern and nice, which is like every other setting, an accordion dropdown that you press to switch to what mode you want. I’m trying to currently recreate the icon near the mode text so it’s a bit more fun, and I will do it in the next devlog. Logout works just fine. I’ve made custom emails and verification tokens for every single action. Also, They still need some work to be done. The verification tokens have made because they currently don’t redirect you back to a login page or something, so they feel empty and don’t work exactly as they are built to work as. Everything else is pretty much the same. I updated the content type so users can upload much larger files. For the next dev log, I’m thinking to fix the change password, change email, and report a bug functions. Also, make it able to upload GIFs for content types because currently, although possible, it is not working. I don’t know why. I have to troubleshoot it. And to fix those verification tokens and redirection.

IT TOOK ME 1 HOUR BUT IT WAS WORH IT:

LADIES AND GENTS THE NOTIFICATION ICON CHANGES TO INDICATE YOU HAVE NOTIFICATIONS

I’ ll describe this session cuz it was so funny frfr:

• So like I got started wondering why the notification button in navbar doesnt update
• I then proceeded to delete the svg s I had and replace them with pc generated ones
• Then I proceeded to change the structure of both my app.py and navbar.jsx (visible in my commits)
• But I suddenly remembered I can debug with console logs which I have kept cuz y not
• To cut it short after debugging I saw in the console log a messoge that said and I quote index-D9jqm-wX.js:11 Navbar hasUnreadNotifications: undefined undefined and that was when I realised I had nowhere in the .jsx included the hasUnreadNotification boolean so there was no way of the client knowing what I was yapping abt in Navbar.jsx basically I was saying check if hasUnreadNotification is True
• I then used the find thingy of VSCode to add the argument to all the react pages
  Up Next:
• Have it tested by people give feedback.
• Activate global acces via Clouflare
• Automate deletion of old events with cron

BEFORE I START TAKE 5 mins of your time pls to test my webapp and suggest additions: SUGEST ON GITHUB https://github.com/prodevmod/STEMNet.gr/issues?q=is%3Aissu
MY SITE: https://www.stemnet.app
I Just finished the Issues I had made from playtestsing with my bros!
These are the functional changes made:

• REPLY buttons worked flawelessly at every page of the site but it took me 2 hrs cause of how many different pathways were inside my webapp and I had to sort them out but guess what it finally took me 3 hrs because there was a PROBLEM with my code CAUSE I HAD to change the api/posts/post_id to api/post_id/posts but had forgotten to change the route and the method from POST to GET and lost 1 f-ing hour of my time searching for a single line of code.
• REGISTER page was easy I just had to remove some labels to make the UI mure user friendly, like honestly most changes were frontend based in this part so with my BIG brain and a litle of react documentation it was basically a peice of cake
• THE NOTIFICATIONS PART WAS THE MOST TIME CONSUMING BECAUSE IT TOOK ME 1 hour researching and 2 hours actually typing cause what was written (mostly frontend) was wrong and I had to create a new table for notifications. Ig I just didn’t know how to implement the notifications.
• Last part was RECAPTCHA V2 for more stable results it was very easy to do (took me 20 mins tops)
  Next:
• TESTING with MY bros
• Making notification icon full when user has unread notifications
• IMPLEMENT UR IDEAS

So, for the first half of this session, I was trying to debug the app and website deployment because the app deployment overrode the website deployment. And at some point, nothing worked. I then went ahead and play-tested my site with some friends, and we found some key issues that I have to fix, such as the fact that reply buttons are not functional in all pages, the register page has some unclear parts, while the notifications page doesn’t work at all. While testing, I found that a friend of mine couldn’t register, and so I tried to register too, but it wouldn’t let me because of the reCAPTCHA. So, that’s how I decided to remove reCAPTCHA v3 completely and apply reCAPTCHA v2, which I haven’t done yet. I also then went ahead and made some issues to my GitHub repository so I can keep track of what I need to change. I’m thinking of merging the two branches, although I’m not sure yet because I would like to have my main branch. I might rename my main branch and make default the react-version branch. I also made a mobile branch, but that’s only on the local git. And that’s all I did for this session. I’m thinking of expanding more on this idea and advertising it, and then also shipping it, but that’s for later on. I must first fix every mistake and then do some testing with relatives, friends, and if you want to, you can participate. And then I’m going to have to have them fill out a form so that I find out which are the weakest points of my UI and what functionalities I could add.Also app works now!!!

Small note: I made a deplyable app but because it is compiled with capacitor it needed a domain and I entered my websites domain so either the app will work fully and the web server ,ust close either only the frontent works!Actual mobile FOOTAGE(My pfp is so JOLLY):

SO the UI and most of backend is the same (IT WAS A PREEEEEETY BORING SESSION. Moreover in this session I just:

(THE APP HAS LIGHT MODE TO, I JUST PREFER DARK)

• Cleaned up the CSS and .jsx files
• Polished and Tested Everything was fine
• Made the webapp’s logo
• Hated myself cuz I didn’t know how to deploy my site
• deployed my sit with hackclub nest server and nginx and gunicorn
• Playtested w/ some friends and gathered opinions

What I Have yet to do:

• make polished/final UI
• deploy a mobile app version too
• Start advertising
• Contacting people interested in hosting my app
• Propose my idea to the greek government(I have veryyyyyyyyyyyy High Hopes I know)
• Follow me cuz this is just the start of this WEBAPP! PLEEEEEEEEEEAAAAAASE STAR MY REPO!

Ladies and Gents there was not in fact a 5% left…
More like 50% …
Soooooo:
I implemented all the event functions and group functions to work as intended. Also, I made the post detail and the event detail. I made the create group, create post, and everything.I included every function of the previous version that was in HTML, so academic profiles for the registering, multimedia code sharing and links, events and groups featuring dedicated tracking for STEM-related events. Social interactions, the platform includes a standard follower-following network. Security and technical architecture, I built using Python Flask, so I didn’t need to change anything security-wise, so I just kept the old version that using SQLite. It then translated to PostgreSQL alongside Supabase for the cloud file storage, and I have added all the login rate limits so that there is no login brute force.This was my first time coding in react so I learned two distinct ways + css to code a frontend and 1 way to do the backend!

💀💀I AM EXHAUSTED I SEE ERRORS EVERYWHERE! However on the bright side 95% of the website is done for the react version and I am commiting my REACT V1 today!So, let’s see what changed in the React version. So, I added a logout icon that is created on spot as most icons because I removed mine but kept a few to make the site simpler and more easy to load, though I kept my like buttons and my reply buttons. I removed the image to be shown from the actual profile page so that more content fits into less space. The events are pretty much the same only that I added a footer box so that the user understands where the description starts and where the specifications end. I replaced the gem with a gear and I named the page StemNet Extras Education because it sounded more like the actual thing. The group is functioning every function of the group so nothing changed there. Notifications have a bit different way of functioning but it is the same logic. Pretty much everything is the same just in React with a bit better UI and UX.The basic reason why I didn’t do more devlogs and more analytical work is because the hackathon was down so I couldn’t log anything. And when hackathon came back up around 3 hours of work I had already done, I encountered ton of bugs. That’s why I’m exhausted right now. In fact, this is an edited devlog. In my normal devlog I didn’t upload anything because I was exhausted and wanted to take a break. The thread view or the post detail post works the same. I added a cute profile picture for anyone who hasn’t got one with their initial. Light mode and dark mode are better now. Before they were a bit choppy and in some places they didn’t work. New post is very organized. And most of the text is changing with force white and force black because for some reason all the CSS I wrote didn’t make sense to me. So I just added a force thing so I could label the things I want to turn what I want them to turn to.

So one of the MANY reviewers sugested I build the application / website in react and so I have started doing that! I also drew stemnet logo! I ll cover that in the next devlog cause my lapse is still open IN CASE I wanna change it! However turns out react framework is relativly easy! But bcs I am kinda slow it took me 1 week of studying to start building! I redisigned the css to cover some of my needs and made the register login, index and custom error pages! I also found it easier to integrate my rate limit in a simple warning on the login screen! I am working on a seperate branch for better version control (I AM SO SMART IKR), first time actually using anything else than add push pull remote and satus commands for git ( I AM SO PROUD). Abt the actual project:

• The react framework is wayyyyyyyyyyyyyyyyyyy faster and leaves room for me to do silly things!
• I addaptes some things like integrating reply in posts directly (FREEDOM OF REACT) that couldn’t be implemented in html
• Imma do the rest of the app now
• I also fixed the images so that their shown in their proper aspect as I was suggested
• I dont also dont have much to document on as much of the work I did in python css and react was baxically boilerplate code found in documentation!

GUYS I DID IT! SO my last addition was:
A listening to widget just cuz music is such a big part of my personality (it was a headache to implement, I ended up usin last.fm). As a final summary Before shipping here are all the features:

1. BG music I MADE (no AI slop point +1) + a mute/unmute button
2. A hub interface HUD for the most important parts of my personal page
3. Sections: MyName, AboutMe,Skills,Achievements,Dev Stats,MyArtsySide,ContactMe,Visitor Log, A projects page , A blogs page w/ 2 blogs)
4. Interactive UI: click arround😉😉
   The content on my page is TOO MUCH, TRUST ME I KNOW BUT it is a PERSONAL SITE after all and I believe it represents me best. It is way better than using UI palletes I found on Instagram. Also mind u all the artwork and UI is hand painted and I think I did preety good plus no mean water jugging UI, EVEN THO I drank 5L in one day so I am basically replacing AI (Yeah!) Pls star my repo or support me if u can and want. ADMIT IT. this is the coolest website known to man 💀💀. I am off to polish the rest, see you on shipping!

I polished up some things and added stats section cuz Y NOT?LOWK TS is peak! When I mma gonna get super Project? This Might be the finest work of art the frontend word has ever seen!Like PROVE ME WRONG!BTW for the devlog I was about to post an AI slop gif saying peak but my pattern recognition kicked in and I found a human made (I hope it is) Akso PLS MAKE this NO. 1 on the explore page 😭😭💀💀
More about the session :

1. My mom bought me a bathroom duck from the supermarket(Thx mom)
2. I used a github readme activity/commit graph for my github stats
3. The Leetcode and codedex are hardcoded I have NOT found an API yet or any stat form…
4. My next project might be creating a dev stats api if you’d like that idea like and comment “banana” below
5. Also can you guys pls follow me and star my github repos
   Sry for yapping I didn’t have much to say on the session itself (MY HTML slop Bores me)

I made a mute button for the music to achieve the best UX! JUST LOOK AT IT! No outline for the red line cause IT WOULDNT BE COOL!I also made t so you cant have it open on a small screen with a mice waning! And LAST BUT CERTAINLY NOT LEAST I made an oppinion logger for anyone to share their opinion abt my site,me,my projects and my so called art!

I cleanedup the css cause it was a mess and I replaced the white boring div card with my pixelated fun super cool yellow version: This WAS NOT as eay as it seems. I was stuck for a WHOLE HOUR trying to figute out why it is still overflowing after all the padding I added… So after adding some borders, sprinkling in some exceptions and hating myself for not understanding css grids earlier I made it! YAY! I think this is one of my finak devlogs on this project cause literally what more could you ask for?! Btw this is me after realising it was not a padding problem but a background clip and origin problem!