Weather App and Chat App high-quality projects designs
Tags: webdev, react, javascript, tutorial
Published: 2021-03-10 15:44:15

Hi Folks,

More project ideas with high-quality designs coming in hot. 🔥

Btw. Andrey did an amazing job building [Notes App](https://bigsondev.com/projects/notes-app-project/) - [Preview](https://zipzip1312.github.io/React-Notes-App/) | [Code](https://github.com/Zipzip1312/React-Notes-App)

I'm so happy that many people are trying to build these projects, it's definitely worth it and will skyrocket your Frontend skills.

**Hard work always pays off, don't give up!**

---

# [Weather App](https://bigsondev.com/projects/weather-app-project/)
![Weather App Project Promo Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8f59zt6a2d0bbw80j3a9.jpg)

## Why this project?
As a Frontend Developer you'll work with data on daily basis, API calls, structuring data models, data transformation to fit in the UI. Weather App is a perfect project to practice all the above skills and additionally - craft a beautiful UI. If you use Vanilla JS for it, you'll also learn a bit of DOM manipulation.

## Recommended Technology Stack
- [CSS](https://www.w3schools.com/css/)
- [JavaScript](https://javascript.info/)
- [React](https://reactjs.org/)
- [Ant Design](https://ant.design/)
- [Ant Design Icons](https://ant.design/components/icon/)
- [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch), [axios](https://github.com/axios/axios), or [react-query](https://github.com/tannerlinsley/react-query)

---

# [Chat App](https://bigsondev.com/projects/realtime-chat-project/)
![Chat App Project Promo Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtowcmv7tg0flw25vz7x.jpg)

## Why this project?
Talk with your friends on your own chat, that's cool. It's the first step to dive into Full-stack Development, set up a Node/Express server, integrate real-time communication through socket.io and deploy Frontend + Backend e.g. on Heroku. This project will teach you a ton about how both worlds work and make you a better Developer overall.

## Recommended Technology Stack
- [CSS](https://www.w3schools.com/css/)
- [JavaScript](https://javascript.info/)
- [React](https://reactjs.org/)
- [Chakra UI](https://chakra-ui.com/)
- [Chakra Icons](https://chakra-ui.com/docs/media-and-icons/icon)
- [socket.io](https://socket.io/)
- [Express](https://expressjs.com/)

---

We're at 7 projects now. 👀 Milena is doing great work designing all these projects. We'll get to 10 soon...

Then I'll create a "Master Post" and explain why you should do these projects including what you can learn from them, stay tuned!

---
I'm thinking about creating YT video series - building [projects](https://bigsondev.com/projects/) from my website, step-by-step, modern technologies, best coding practices with a thorough explanation.

If you enjoy the content and like the idea, [Buy me a pizza](https://www.buymeacoffee.com/bigsondev).
Let's reach that goal together. 😊

Thanks for all the support!

Get in touch: [Mentorship](https://bigsondev.com/mentorship/) | [Twitter](https://twitter.com/BigsonDev) | [LinkedIn](https://www.linkedin.com/in/adrian-bigaj-282277130/)