Team Website Dev Log
By Alejandro Estrella
Hi Mr. Millard. This is our team website. It had a lot of work involved and a lot of decisions were made. Everyone on the team contributed to the website. Here is process it took to bring the website to life.
The first part of the website we had to decide was the color scheme. We used this website: https://www.realtimecolors.com/, to test out and eventually decide on a color scheme. We decided on a green with orange accent scheme.
Next we had to decide on the overall design of the website. So, me and Rayan decided to make our own designs so we then compare and decide on one after.
My Preliminary Design
Rayan's Preliminary Design
We decided to combine mine and Rayans design, incorporating my navbar and footer and incorporating Rayans background and main page.
At this point, we started separating tasks. I finished my part up in frontend by fixing some quirks with scrolling then started doing the backend. Kunjal was in charge of figuring out the layout of the website. Rayan was working on frontend. Bill and Samuel were creating everyone’s bios for the team page. Aditya was figuring out how to host the website and helping me with database setup.
For my part, I first got Sign in with Google working. I decided to go down this route instead of making a normal sign in page, since I was already familiar with Sign in with Google. That meant it was easier for me to get Sign in with Google working than a normal sign in page. I didn’t even need to set up a database at first to get Sign in with Google up.
After that, I set up the database with each user connected to the corresponding account using email. At this point, I realized the pings to the database were slow. I would later figure out that this was not a problem in production, since the database and php server would be on the same server. For now though, I implemented a cache that would store all the database data in a json file on the web server. This would later be useful once I transfer the website to the class server, since I can just make the server run completely off the cache.
The cache would include all the database data, and also a timestamp to make sure that the cache doesn’t get too old. I would use this cache for all the visible data on the website. I do not use the cache for sensitive actions, such as signing in and editing profiles.
Another problem I had to face while developing the backend was configuration data. Often, credentials and links would change when I was running on my computer, the class server, the amazon server, etc. So, I set up a file with environment variables which I reference throughout the php code.
Now that I was handling the backend, Rayan was in charge of handling the frontend. He hasn’t used HTML/CSS in a while though, so it took him some time to catch up. He would also edit images so he wouldn’t need to rely on HTML as much. This came in handy for parts of the website, such as the our name on the main page and the profiles on everyone’s individual page.
Once Ryan had finished all the team and team member pages, his work was mostly finished and he started working on Decryptor, our next project. I then connected the database to the pages.
Setting up the server to host the website also took some time. Me and Aditya had to set up all the applications on the server that were needed to run the website. We would also need to figure out how to connect the domain and make it secure with https. After we figured out how to get all these running, we were left with a server set up with git, so we can update the website via git. For sensitive files, such as credentials, we would manually upload the files via terminal. To make this easier, I created some scripts that make it very easy to do various actions on the server.
Scripts to pull from git, refresh credentials, and sshing into server.
At this point the website was looking polished. We didn’t finish the projects page, but we worked on that as we started working on the other projects. There were some minor difficulties transferring the server to the class server, but as a whole, our team website was finished.