I decided to start a project to build an entire eCommerce platform from the ground up—design to code.
Rosliny ECommerce App Production Build
Summary
This project wasn’t just about the implementation; it was about creating a cohesive brand and user experience for a fictional Chicago-based plant store. It was a good start to learning the ins and outs of figma, and getting used to the process of building out an app using mocks before writing any code.
Using tech I’ve used before (Next.js, Tailwind CSS, Stripe for payments) and also some new tech (Supabase for the backend and figma to get mocks together) I was able to implement some ecomm features.
This video is an attempt to share my journey, the motivations behind it, the inspirations for the design choices, and some of the lessons I learned along the way.
This is not a tutorial, but just an overview of an app I built on my own without following along with a separate tutorial. It also was an attempt to learn the process of editing a video about technical content.
The application is by no means production grade, and still has many improvements to be made to the code and to the design.
Video Script
As an engineer specializing in building out web applications, my usual process involves taking pre-designed mocks and building them out in code, working closely with the designers and product managers who created the requirements and mocked pages with certain ideas in mind.
Aside from building out basic CRUD apps with simple wireframes when I first started coding, I haven’t really done much since in terms of building everything from design to deployment.
So, my motivation with this project was to challenge myself by doing the entire process of app creation, not just the implementation—using the prototyping software Figma.
The project idea here was simple: a basic eCommerce platform. I’d use Next.js, Tailwind CSS, and Stripe for payments, supported by Supabase as a backend - something I haven’t used before.
I chose Supabase since it comes with its own authentication service, uses a PostgreSQL database which I’m familiar with, and has storage capabilities and seemed simple to set up. It’s also commonly used with Next.js so I figured I could manage issues that came up quickly.
Another goal with this app was to create a “brand” essence, with a distinct visual aesthetic. I wanted to prioritize getting something cohesive together that looked nice without becoming bogged down implementing smaller design details.
Drawing inspiration from various sources, I established a core color palette, logo, and style that would define the project. I was mainly inspired by the colors seen in the photos of the house plants I found as well as the idea of a storefront with various glass pots and display cases.
I set out to not just follow along with an existing tutorial but to try and build out the project on my own without doing something similar first.
So, “Rosliny” was born—a fictitious Chicago-based plant store app designed for purchasing individual potted plants (rosliny just means plant in Polish).
I created some essential pages in Figma such as:
- The sign-in/sign-up page
- The home page with a carousel and gallery section
- The product page
- The cart
- And checkout.
While the implementation was different than the initial mocks, I was overall happy with the look and feel of things.
I was able to implement in code:
- A functional sign-in/sign-out mechanism
- A home page featuring a carousel, gallery, sorting, and add-to-cart functionalities
- A navigation bar with a functional micro-cart
- Flash messaging
- Individual product pages
- An interactive cart for managing item quantities and removals
- And a full checkout process with the Stripe integration
Now, what went well:
The overall visual design of the application was what I intended. Using the provider pattern for global state worked well. And also, connecting with the Stripe integration was pretty simple. And what were some lessons learned:
That architecture patterns and core implementation details should be prioritized first. That you should focus on things that move the needle for MVP (not nitpicky design details or complex DB schema changes). And some Figma fundamentals. Future enhancements could include:
- An admin interface
- Fulfillment system
- Product search and plant category
Feel free to check out Rosliny and tell me what you think.