Condelu Meals
Condelu (a mashup of "convenient" and "delicious") is a website I built for an imagined vegetarian restaurant. Over my senior year in high school, I dedicated 130+ hours to refining what became one of my largest projects. Although it failed to achieve its purpose, I value everything my first attempt at building a functional, decent-looking website taught me.
How It Started
I was invited to join the club that this website was built for by a few of my high school friends over the course of a different project that we were working on together. TSA (the Technology Student Association, not the plane security people!) is an organization centered around STEM innovation and leadership skill development through competition. As someone who had two years of experience at the time with Texas’s largest set of academic competitions — UIL — the club seemed like an appealing way to spend my senior year.
So I joined. TSA has students select from a list of competitions, each with a prompt based on the yearly theme. There were other aspects to my membership, such as fundraising and travel to conferences, but my focus was the one competition I chose.
Web development (technically called webmaster, but that title makes me feel conceited to say) is exactly what it sounds like: I had to build a website. The prompt for that year was to create a website representing a vegetarian or vegan restaurant that we had to make up. Everything else was up to me to decide.
Deliverables
Before ever touching my IDE, I sat down and planned out what basic features such a website would need. A menu page depicting every possible item to be bought from the restaurant seemed like a necessity. In the modern day, having a flow for performing online orders would also be a requirement, even if those orders would never actually be fulfilled.
I had to keep in mind that I wasn’t building just any run-of-the-mill restaurant site, however. The requirements were explicitly for a vegetarian site, which would certainly have different priorities. Some space on the home page would have to be dedicated to outlining not only the green nature of the food to be bought, but also to the sustainability practices that would surely be considered. Nutrition facts were also sure to be a key consideration for the imaginary customers, so I needed to emphasize those under every item as well.
Yet I also needed some way to differentiate myself and my creation from that of the countless other submissions, some way to wow the judges. I had a few ideas:
- A discount code system that automatically applies a code on certain days
- Ratings updated in real time as users place orders.
- Plenty of time spent on fancy animations that would look great to any viewers
I learned a lot about not overdoing that latter point, but more on that later.
The Process
Let’s spend a bit on the tech stack I used. As someone who predominantly had experience in Java programming beforehand, I elected to use Spring Boot for the server logic. That allowed me to use Thymeleaf for processing HTML templates, and I was shocked by how relatively easy it was to update the content on the page dynamically.
Speaking of which, this project was my first experience with using a database. I opted for a MySQL server, but Spring Boot has a plugin that mostly abstracts away the actual SQL queries and instead uses Java classes. Still, I stored every menu item, user account, and review as records in their own tables. It was more gratifying than I’d like to admit seeing accounts that I created on my browser actually show up in the database and persist after a server restart.
For the front end, I wanted to practice the basics, so I opted not to use a framework. Instead, I worked with HTML, vanilla Javascript, and a nice little CSS preprocessor called SCSS. A few libraries for animations later, and I had everything I needed to build the most important part of the site.
Disaster Strikes
In hindsight, the problem was that this was my first time building a project with a front-end component that actually needed to look good, and I wanted to make it impressive. That meant I wanted to be fancy, to go that extra mile and stun the judges with the utter beauty of my creation.
That’s all well and good, but it initially led me to compromise on the most important part of any website: being a solid, functional experience for the users. My specific crime? I thought it would be cool to have the entire website scroll horizontally.
Don’t get me wrong, it looked awesome. When it worked. However, the solution I came up with was an utterly buggy mess. The animation would jitter for no apparent reason, scroll triggers were inconsistent at best, and it did not feel at all intuitive.
I wasn’t experienced enough yet to solve these problems in a reasonable time frame. I had bitten off more than I could chew with that design decision, and the deadline was still looming over the horizon.
So how did I get around that problem? I pivoted. The prior idea was fundamentally meant to show off, not to provide a coherent experience for ‘customers’ that would encourage them to make a ‘purchase.’ I needed to be a little less fancy, so that’s what I did.
I made the edits necessary to completely disable the horizontal scrolling, bringing the entire site far more in line with a normal viewing experience. Immediately, I liked what I had done far more, even with the issues that such a large change brought about. Still, I had to rewrite substantial sections of the project and delete hours of work.
That experience was not completely a bust of wasted time, however. It taught me a valuable lesson that I would far prefer to learn in a project with little true importance than through the course of an actual position with stakes. The goals and priorities of any project need to be determined early on, and then they need to be kept in mind throughout the entire creation process. For a website front-end, that priority is almost always the experience of the end user.
It is true that the ultimate point of the website was to impress the judges. However, I forgot that the judges weren’t just picking the prettiest and most complicated website. They set a problem, and the best site would be the one that solved that problem the best. Making something pretty but unusable was not solving that problem — I needed to do both.
In the End
Despite the shift I made early on in the site’s development, my submission did not place at the state competition despite winning first at regional. It was a disappointment, but in hindsight, the experience cannot be described completely merely with a couple of medals.
It was only the second website I ever created, and the first that needed not only more advanced functionality than I had done in the past but also a visually appealing — yet functional — design. I gained valuable practice with the core web technologies in particular, as well as in the basic concepts underlying how databases are structured.
More than any technical skills, though, this project taught me how to keep its true goals in mind and then make design decisions based on them. It showed me how to recognize when I’m making a poor decision based on those goals, and it helped me see the importance of rectifying that problem before it has the chance to gain inertia and become a part of the final product.