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 when reviewing my project please make an account if you dont want to share your real info atleast use a fake email generator and login from the inbox cause rly all the dedication i ve put into this project is in that page after logging in.

I cleaned up some things I added a login limit to avoid bruteforce and a custom html page for when the user exceeds the limit. I wrote the README.md from scratch cause I had used AI to make the process quicker. I added comments so anyone who might wants to do a PR isn’t deterred by the ammount of confusing jargon.Fixed some css issues and added more to the STEM EXTRA page. I also added a captcha v3 verificator to avoid having bots raid my platform…. PLEASE READ PREVIOUS DEVLOGS TO UNDERSTAND THE MISSSION

Just run last tests added more stem material!!!! With these devlog I want to gain your atention to spread the word to people you think will find it useful as it is primarly for greek students but the important part is that it is for students that do not have stem guidance and don’t know where to start from. With these project students not only gain guidance and benefit from the community but can contribute back into it (by posting about an upcoming event they heard about) creating a self sustaining alumni driven platform.Thank you for your attention!!! Enjoy my project!! Make sure to checkout the vid (old version) see progress!!! https://youtu.be/QUGb-TlbM0Q

Okay, so I did the last cleanup, so my project is ready for shipping. In this session, I removed the feed button because it was unnecessary. The stemnet.gr logo takes you to the feed. I restricted the navigation feature icons only for the logged-in users. I forced the login prompt button to retain a clean white text background and properly structured the mobile and desktop navbar. I added hero card styling. I also added an extremely beneficial part of the site with all the extra academics a student can take. There I will upload different links and resources for Greek students to study STEM outside of the school curriculum. I think that’s a very good idea and very nice I created and thought of. And while testing the final product, I was headbanging to “So Lucky” by Twice and “Loser” by Tame Impala.

I added the group chat section with search results in integration in search.html. Added the dedicated group chat ads section that queries matching groups. Feed discovery banner has some sponsored or featured group chats. Then I added the light and dark mode system with zero flash theme script. I embedded the synchronous script. I also added a dynamic navbar toggle so it will be more user-friendly and theme-aware UI that inverts the colors of non-visible UI depending on the theme.

I’ve implemented a lot of cybersecurity measures, so SQL injection or mitigations won’t happen. I fixed the SQL search. Following and followers list .html didn’t work before, now it works flawlessly. I changed servers because the server I used was very slow. I am using Nest of Hacklab currently. Yeah, that’s all the changes for today, but it turned out pretty neat. Check out the video.

I officially think the first version of my site is ready to be shipped. I fixed some last minute bugs. I added AJAX so that the user doesn’t have to always refresh the page to see their likes.For further informations visit the github repo. Alo I hosted it on nest so that the site would be faster. I also spent 4-5 Hours reading flask and jinja and json documentation to debug and apply cybersecurity measures. Youtube preview: https://www.youtube.com/watch?v=QUGb-TlbM0Q

Big coding session. I migrated the site to the Hacklab Nest because it gives me more potential and a larger and faster server. It will have many benefits. I finished the basic idea I had in mind for this site.

Basically, it includes:

• A feed

• An event section

• A notification section

• A profile section, along with followers and following sections

• An affiliate links section in the profile page

• Posts that show up both in the feed and the logged-out section

• A search button to search for users and posts that might interest you

• A filter feature to search posts by category

• A new post button

• A log out button

• A login button

• A register button with registration verification provided by resend

I’m clocking off for the day. I think I finished the biggest part of the project. I improved my site’s cyber security from brute force SQL injections, remote post, delete, and edit. I added:
a search page
an event page
a post page
a feed page
a profile page
followers and following list
a follow button
a like button
a comment to reply button where you basically post something replying to something else
However I doubt the efficiency of this project and if it’s going to carry out as I want it. I really hope it does. Ideally I host it online with a custom domain. I have the eligibility to take one for free because I’m in the GitHub student pack. I don’t know if it’s really worth it. Take a look at my project and you tell me. I also added a profile picture. please comment your opinion: should I make it public or what? https://stemnet-gr.onrender.com/register

I have made the web app applicable to a mobile app too so if you join from mobile, everything will be in a normal view and it will not be deformed. I worked on the profile. The followers and following are applicable, clickable, and you can see who you are following or who your followers are. I added links to GitHub and LinkedIn, which have their own personalized icons. All the rest have just a bug icon, a reference to all the bugs that have deterred many fellow coders. Next, I’m planning to create the full post and events mechanism because, on this site, you can add posts or events.

Additionally, I will implement notifications, which is another functionality.

After that, I will work on the verification of each user with an automated email and upload the first working STEMnet to GitHub, although I have a lot to work on.

Before you see the progress I’ve made, I want you to know this project was made by me as the final project of my CS50 course. Not just to get over the course but to solve an actual problem you see in Greece we have very limited access to clubs and robotics in general. Imagine there is only one shop in the whole state that you can buy electronic components from. I managed to make an SQL database with all the users’ posts, likes, etc., information, a login page, a new post page, a profile page, and affiliate links for networking between students. I’m still working on cyber security. However we are clear of SQL injections so that’s good. The CSS is rather simple but working and I think I will keep it. I might add some shadows just to make it feel more interactive. The buttons are already interactive so that’s good.