Build A Real World Beautiful Web APP with Angular — A to Z Ultimate Guide — PART I

No more ugly tutorials projects! No more fictional brands examples!

Today I am going to show you how to build a real-world beautiful weather app that is production-ready from scratch starting from design to development all the way to deployment using Adobe XD, Angular & Firebase!

⚡️ Supercharged with all the bells and whistles 😮 🔔

  • Based on the latest & greatest version of Angular
  • Firebase Authentication and Firestore (using AngularFire Lite🔥)
  • Server Side Rendered (SEO)
  • 100/100 Lighthouse PWA score
  • Modern CSS: Grid Layout & Flex Box
  • Mobile friendly and full responsive
  • 2 Modes : Dark Mode & Light Mode
  • Beautiful Minimalistic Design
  • Note: This tutorial is part of a series that will cover how to build this app and the long list of features listed above progressively and if you want me to notify you when a new tutorial comes up you can signup to my newsletter here. 💌

️Tutorial Part 2️⃣ :

Step 1: Design

I have designed the weather app in the latest version of Adobe XD. You can download the design file from here so you can see how the different layers stack up to form the final design.

A. Branding

Step 2: Development

npm i -g typescript 
npm i -g @angular/cli
ng new Minimus --routing
ng serve -o 

A. Templates And Styling

But before I start, I want to make sure that you get the most of this tutorial so please don’t just copy and paste, read the code and then open your editor and browser side by side and type everything down in your own way because that is the only way you can learn. I typed everything myself to build this app and you should too so you can understand everything thing from start to finish.

display: grid;  
grid-template-columns: auto;
grid-template-rows: 0.5fr auto;
.side-menu__conatiner {
position: fixed;
left: 0;
top: 0 }
.side-menu__container::before {...}
will-change: opacity;
.slide-menu { transform: translateX(-103%); }
.slide-menu-active {  transform: none; }
ng g c home

B. Services

we want to decouple the logic of retrieving the API weather data from a specific component and move it to a separate service that we can use throughout the application and again we are going to use the shorthand format to generate a service using the CLI.

ng g s weather

C. Routing

We have already generated the routing module when we created our app with the CLI but we have to make some modifications to the routing.module.ts to tell Angular what are the different routes (URLs) and their associated components (pages).

📱 Looking To Make This APP Responsive?

using intab.io to test Minimus in iPhone 11 + pixel devices with realtime sync

Conclusion

We made good progress in this very first part of building the Minimus Weather App we got most of the design work from branding to UI and UX decisions, We wrote a lot of HTML & CSS and we made it look beautiful.

  • Modern CSS: Grid Layout & Flex Box ✅
  • 2 Modes : Dark Mode & Light Mode ✅
  • Beautiful Minimalistic Design ✅

Continue reading Part II of this tutorial!

Check out the continuation of this tutorial series where we continue adding the rest of the features to Minimus:

  • 🐦Twitter API Integration
  • 🔥 Firebase Authentication and Firestore
  • 💯 100/100 Lighthouse PWA score
  • 👇 and much more… 👇

Want to Become an Angular Master?

💼 Founder @ intab.io — Code CSS 2X Faster In Your Browser | Full-Stack Developer & UI/UX Designer | Tunisian | INTJ Personality Type

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store