Tutorials on Design

Hello and welcome on Part 3 of our tutorial on how to build sophisticated full stack applications with Bolt , UX Pilot , Supabase , and ChatGPT . In Part 1 of our tutorial, we set the stage and created a plan for our app, including our Phase 1 (aka detailed MVP ) features, a UI Development Plan , and a Design System we can use to create a beautiful app of this kind. In Part 2 , we took this plan, put it to good use, and created an actual High Fidelity design for each and every part and each and every screen of our app.

Hello and welcome to Part 2 of our tutorial about how to build actually professional fullstack applications with AI. In Part 1 of our tutorial, we set the stage and created a plan for our app, including our Phase 1 (aka detailed MVP) features, a UI Development Plan , and a Design System we can use to create a beautiful app of this kind. Today, we’ll see how we can take this plan, put it to good use, and create an actual High Fidelity design for our app, which we are then going to use to build the app itself - but that will be on Part 3.

In my first article on Atomic Design for Developers I discussed a good way to organize components in your project. I highly suggest reading it first, although I'll briefly summarize it as well. If you don't know what atomic design is, please read Brad Frost's article on it . So, the big question left after Atomic Design for Developers: Project Structure is how do we actually implement atomic design in practice? First we'll do a quick review for new readers on atomic design, but those who read the last article can skip down to the Building the Google Search Page section. Atomic design is Brad Frost’s methodology for building design systems. The idea is that we can take the basic building blocks of living things and give our UI a hierarchical structure based on it.