DEV Community

How to replicate the Zelda BOTW interface with React, Tailwind and Framer-motion: Part 1

Florent Lagrede on June 20, 2020

In this article series we'll learn how to replicate the menu inventory interface of Zelda: Breath Of The Wild on the web ! Click on the image belo...
Collapse
 
rose profile image
Rose

Such a fun idea for a tutorial, I love it ✨

Collapse
 
pdlipman profile image
Philip Lipman

This is great!

Collapse
 
trostcodes profile image
Alex Trost

This is so excellent, Florent. Great concept and execution.

Collapse
 
ellenripley4 profile image
ellenripley4

This tutorial and the whole idea of Game UI on web is fire!!!!!

Collapse
 
mateuszniestroj profile image
Mateusz Niestrój

I really like how you built requirements style tutorial that aren't code along but more like: Here is requirements and here are tips how you should try to implement it. Great job, waiting for more ;-)

Collapse
 
crippler93 profile image
Luis Chavez

😮👌🔥

Collapse
 
vintharas profile image
Jaime González García

Love it!!!! :D Massive Kudos ^^

Collapse
 
learnitmyway profile image
David

Awesome idea! Do you have the complete source code somewhere? I find it a bit difficult to follow with only the gists.

Collapse
 
flagrede profile image
Florent Lagrede

Thanks ! I will provide "checkpoints" branch on the starter repository in the next two articles. The full code source will available at the end of the article series.

Collapse
 
flagrede profile image
Florent Lagrede

I manage to finish the checkpoint branch for part 1 today, it is here if needed: github.com/Flow11/zelda-botw-start...

Collapse
 
flagrede profile image
Florent Lagrede • Edited

Big thanks for the warm feedbacks !
I have already started to work on part 2, hoping to release it in the coming weeks.

Collapse
 
tonkung profile image
Tonkungs

It great.

Collapse
 
pasklan profile image
pasklan

Really good!
This can be done with react-native too?

Collapse
 
flagrede profile image
Florent Lagrede

Yes but probably not with the same stack. I'm not sure that framer-motion is supported on RN.