Showcase: 3RStore

my intro to the world of web development

Posted on June 14, 2022

3RStore can be found under this link: https://threer.tsdim.net//

Introduction

Dumb little naive young me used to play around with making ““websites”” before getting into University. I would try to make a good-looking HTML+CSS combo with some JQuery/JS garnish on top, and would expect it to do all sorts of things. Weeelll…turns out it doesn’t work that way, you need a lot more components to make a website or a web-app work properly: clients, APIs, ORMs, DBs, DevOps code etc. etc. etc.

And this is where 3RStore comes in, as it was the first major web-app that I built, and it is a project that taught me a lot of things related to web-development:

The final 10% of the project takes 90% of the time
Responsiveness is hell, even with flexbox
ORMs, Models, UnitTests, permission handling, good design in general is a must have. Design patterns are our friends, and best-practices should be followed
A lot of things about how stuff are done in the background (e.g password resets, template rendering, etc)
Never re-invent the wheel

3RStore

“But what the frick is 3RStore” I hear you say? 3RStore offers a place for all your important links you want to keep and have access to across all your devices and browsers. It’s a simple tool that saves you the trouble of creating accounts in Firefox, Chrome, Opera, wherever, and having to sync your bookmarks between them. It also offers imports and exports of “Resources” (URLs/bookmarks), easy search and delete functionality, as well as the ability to temporarily share your selected Resources via URL.

Stack

I built this web-app using plain old Flask with nothing else. Yeap, this is a Flask-only application, no SQLAlchemy, no authentication library, no front-end framework, just Flask - goold ol’ hardcoded Python & SQL. Have a look.

The project is deployed on Heroku.

Pain Points

Bookmarks

Fuck bookmarks. Ok, wait no, don’t. Importing & exporting bookmarks has caused a great deal of pain while building this web-app. Sure, importing & exporting JSON files is easy, but HTML files…not so much it seems. I don’t know why they use the HTML tags that they use, or why the use them that way - I never figured that out despite my efforts, but if you export your bookmarks from a browser in HTML form, you get this weird mess of tags where some times you close them, sometimes you don’t, and for browsers to import this file back everything has to be perfect. Fuck. Me. Just to give you an example, an exported file looks like:

<!DOCTYPE NETSCAPE-Bookmark-file-1>
<META CONTENT="text/html; charset=UTF-8" HTTP-EQUIV="Content-Type">
<TITLE>3RStore Resources</TITLE>
<H1>3RStore</H1>

<DL><P TYPE="Main">
	<DT><H3>main</H3>
	<DL><P>
		<DT><H3>projects</H3>
		<DL><P>
			<DT><H3>Z</H3>
			<DL><P>
				<DT><A HREF="https://staff.washington.edu/jon/z/glossary.html">Z Notation Glossary</A>
			</DL><P>
		</DL><P>
	</DL><P>
</DL><P>
...

Crazy I tell ya. I even thought of making the logic into a spin-off library, but that never happened. Maybe I was just a stupid programmer then and missed an obvious solution, that’s very much possible.

CSS

Writing all the CSS + Bootstrap HTML for this app was a pain as well, especially so since I wanted this app to be responsive, so that I could use it from my phone as well. At the end of the day it’s always a worthwhile experience (I got to learn about FlexBox for example) but damn do I hate this process.

Fun Points

Okay okay, enough whining, what was fun about this project?

Actually building something that I use frequently

My projects used to be one-offs that served no real purpose other than me learning a new framework or piece of technology. This changed with this project, which has been so so useful for me and it has been very sweet to have something stable, running at all times, that I can access and use :)

Refactoring the Front-End

This app didn’t use to look the way it does, I have actually refactored its look…two times? Not only that, I have actually re-written it using Django & React here and here. “But Dimitris”, you say, “didn’t you just say that you hate writing CSS/HTML?”. So what? People are weird, get over it!

This process was also very very satisfying! I’m not a designer by any means, so it feels nice to have something that looks nice (at least to me, no judging!), or perhaps changing visual styles, adding a bit of identity to the site etc.

Tags: project