Streetzone

This project started as a simple marketplace for streetwear enthusiasts with a blog to drive traffic. It quickly expanded into a full community hub with rich user-interactions like follows, notifications, and real-time messaging.

The website was designed and solo developed by me from October 2018 to September 2019. It is currently being rewritten to use TypeScript.

The frontend was built using JavaScript & React and styled using Sass, which was eventually replaced by styled-components.

Initially, the backend used Amazon Web Services including DynamoDB, S3, Cognito, and Lambda. Eventually DynamoDB proved unfit for this project, so I migrated the backend to Firebase and its Firestore database, which provided a better pricing model, simpler API, subscriptions, and more.

The final stack includes among others:

• JavaScript & TypeScript
• styled-components
• Algolia Search
• React
• Firebase
• Axios

The marketplace, like all other parts of the site use Algolia search indexes, kept in sync by Firebase Cloud Functions for full-text search, filtering, and sorting.

Logged-in users looking to sell can list their items for sale and buy different promotional tools like “bumps” and home page slots. Users looking to buy can contact owners of items they want using one of their listed contact methods or the in-app real-time chat feature.

Users can arrange trades or simply chat using the in-app messaging feature. If enabled by the user, receiving a message will send a browser notification as well as display an unread badge in the UI.

Previously contacted users are kept in history for quick access. Additional care was put into making the messaging section intuitive and familiar on mobile devices.

The website has an integrated blog with categorized and tagged posts, searchable using Algolia. The posts are written in markdown and added via a custom admin interface.

The entire website was created with mobile devices in mind and works on screens of any dimensions. A combination of media queries and modern layout methods like flexbox and CSS grid were used to achieve this. Additional care was put into making touch input a first-class citizen, with e.g. swipeable carousels.

Although I never launched this project publicly, the hands-on experience of building a big app like this from scratch was well worth it. I’ve grown my skills writing React components, choosing technologies to fit the needs of a project, and so much more.

Coming back to rewrite this app in TypeScript taught me the value of writing clean, self-documenting code, which has become my priority going forward.