Devlog 3: React.js!

What’s Old?

I never got to go in-depth on what this is, so now would be a good time as ever to do that. This project was originally a school assignment which mandated that the legacy python CGI library was used to retrieve the data of forms instead of using something like JS to read the value of the inputs.
Here are the features of the original site:

• Login page which would create a cookie that had user information including the user name, type, and more data pertaining to that particular user
• Login page would take you to the Home page on login, which would look different based on which of the contexts you were logged in as (this is basically checking if you are a school Admin, Teacher, or Student) and would update the Navbar to include buttons linking to context-specific pages as well as the Dashboard based on this context
  • Admin view had a Home page which would display overall school statistics
  • Admin specific pages included pages to add or delete a course, or add, delete, or assign/remove a user from a course
  • Teacher view had a Home page which would display courses taught and the amount of students in each course
  • Teacher specific pages were pages to modify the grades of students, and each course would have its own page for editing the grades
  • Student had no specific pages and would see their grades displayed in a table on the Dashboard on the Home page
• Navbar had a Logout button which deleted the aforementioned cookies by setting their “expires” value to 0
• SuccessIndicator Indicated whether a form action succeeded or not by reading a GET request
• Similar pages were in one .html file and were modified based off a GET request parameter to display appropriate content

What’s New?

It is important to note that this is a complete rewrite of the project!

The code similarity between the current state of the site and the original state (which you can view by going to the Legacy release linked here!) is minimal.

• I completely remade the project by making a new directory and then rebasing the newly created project onto the previous repository stack. This added my files to the GitHub repo without me having to make a new one, which was convenient. I learned how to rebase using git to do this, expanding my knowledge of git.
• The project has been rewritten to mostly use .jsx files instead of the mess that was using .html, .css, .js, and .py files for a single page of the website. Now, every single component (whether that be a page, a styled form, or even just a header) has its own file, which makes everything WAY MORE organized!
• Every single form on the website is now a <FormStyled/> which is a component that I made. To make this work I simply add a JS object which has a key-value pair notation of Input Name - OnChange handler, which makes making forms way faster. Development has overall been way more pleasing as compared to not having react.js due to the amount of new things in react!
• Every single interaction with things outside the DOM is now in a convenient services/ folder, which includes files such as manageCookies.js and httpRequests.js which allow me to import certain functions anywhere in the code. This is an improvement over me simply copy and pasting the same code over and over again in two different files.
• Speaking of organization, all files are now organized in the src/ folder by type of component/use. For example, my components which I add to the website at will are in the components/ folder while the overall page layout components are in the pages/ folder

View my commit history for commit-by-commit commentary on the code that I modified!

SupaBase incoming!

I finished the main layout of the website and it works using python’s legacy cgi library, but now I am porting it over to use contemporary technologies.

Currently, the program is written in HTML, CSS, JS, and Python with no frameworks, and uses 2 JSONs as the database. The plan is to port the project over to use react.js, tailwind css for styling, supabase for the database, and possibly even creating a REST API for retrieving certain user info.

Login page and cookies!

I successfully created a cookie retrieval system for my school project. I am creating a school directory management system. The login page stores the login information as a cookie (if successful) and then the home.js file displays it! Next step: display different buttons on the side navbar based on the type of user!