01
Context and problem
Yofeii Délices sells seasonings and marinades. The brand wanted a website where customers discover the products, fill a cart and pay online.
It also needed an internal tool to add a product, follow an order or change a banner without calling a developer.
02
My role
I built the front end of the website and the back office. The Laravel API was built in parallel by a back-end developer, and we coordinated at each delivery.
- 01E-commerce website
- 02Back office
- 03API integration
- 04Reusable components
03
Approach
On the website, customers browse the catalogue, open a product page, fill their cart and pay with Stripe. The cart is kept if they close the page.
In the back office, the team manages products, stock, orders and customers, and changes the home page banners. A dashboard sums up sales.
Screenshot 1 of 6
04
Technical choices
A few choices helped me work with an API that changed at the same time as the front end.
- Astro
- React
- TypeScript
- Tailwind CSS
- TanStack Query
- Stripe
- Laravel API
01A catalogue always up to date
At first, a product added in the back office did not show up on the website. I had the pages generated on each visit, so products and prices are always up to date.
02API calls in one place
Every request goes through the same function. When the API changed, I only had one file to update.
03Reusable components
Colours, light and dark themes, buttons and fields shared by every screen. This let me redo the visual design without rewriting the pages.
04Reporting what I noticed
While testing the payment flow, I noticed two points to secure on the server. I explained them in writing to the back-end developer.
05
Results
The website and the back office are live. The team manages its catalogue, orders and banners on its own.
- screens in the back office
- 30+
- weeks to build the back office
- 7
06
What I learned
Working with a changing API takes organisation: keeping all calls in one place saved me a lot of fixes.
I should have written tests from the start, especially for a tool linked to payments. I will on my next project.
