Weather Report webpage

Dynamically rendering a simple weather homepage using async JS
🖊️ Assignment 🐞 Report a Bug 🙋‍♂️ Request Feature

The Project

Your city's weather info, one click away, is just awaiting for you! Powered by OpenWeather API.

For Microverse based in these requirements.

• Async calls to external server
• Data Structures
• Object Oriented Programming
• Factory Functions
• Single Responsibility
• Tightly Coupled Objects
• Module Pattern
• ES6 syntax
• Export/import ES6+ notation
• Linters

Features

• Next.js
• React
• TailwindCss
• Next.js-Create-App
• JS modules and ES6+ available for most browsers
• Connected an API using async/await
• Sets stickler on the repo
• Sets eslint rules

Tests

ESlint

Built With

• Next.js
• ESLint
• yarn
• vscode with ESLint extension
• Linux/GNU
• Love and Passion for code

Build

Live Demo

Try the autocomplete feature!

Prerequisites

• yarn 1.22 +
• node 16.17.1 +
• A Text Editor like VSCode
• A browser like Firefox or Chrome

Quick Start

> git clone https://github.com/Israel-Laguan/Weather-Report.git
> cd Weather-Report
> yarn install
> yarn dev

Then open http://localhost:3000/ to see the app.

Run development build

• yarn dev Runs the app in the development mode. Open localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Production

• yarn build Generates an optimized version of your application for production. to prepare HTMLL, CSS, JS This output is generated inside the /next folder.

Run tests

Optionally you can run the linter and tests: yarn lint

Learn More

Next

Next gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

React

React is a JavaScript library for building user interfaces.

• Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs.

• Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your.

• Learn Once, Write Anywhere: We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

Tailwind CSS

Tailwind CSS is modern utility-first CSS framework. It provides many CSS rules, but these are purged when production builds. So developers do not worry about CSS asset size for performance optimization.

Authors

Israel Laguan	Email me to [email protected] Connect to my Linkedin Check my GitHub Profile
Emmanuel Azócar	Email me to [email protected] Connect to my Linkedin Check my GitHub Profile
José Luis Yepez	Check my GitHub Profile

Contributing

🤝 Contributions, issues and feature requests are welcome! Feel free to check the issues page.

🤗 Show your support

Give a ⭐️ if you like this project!

🏅 Acknowledgements

• Microverse
• The Odin Project
• Readme header author
• FlatIcon images
• OpenWeatherMap API

License

📝 This project is licensed under the MIT
Feel free to fork this project and improve it