Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jay-raam/weather-next.js
WeatherWise - Your Ultimate Weather Companion
https://github.com/jay-raam/weather-next.js
figma nextjs react shadcn-ui tailwindcss typescript vercel
Last synced: 1 day ago
JSON representation
WeatherWise - Your Ultimate Weather Companion
- Host: GitHub
- URL: https://github.com/jay-raam/weather-next.js
- Owner: Jay-Raam
- Created: 2024-08-29T13:28:59.000Z (27 days ago)
- Default Branch: main
- Last Pushed: 2024-08-29T14:50:29.000Z (27 days ago)
- Last Synced: 2024-09-23T02:33:06.862Z (3 days ago)
- Topics: figma, nextjs, react, shadcn-ui, tailwindcss, typescript, vercel
- Language: TypeScript
- Homepage: https://weather-next-js-jayasriraam.vercel.app/
- Size: 394 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Weatherwise — v1
Welcome to Weatherwise! I’m Jayasriraam, a front-end developer based in Chennai, and I’m thrilled to introduce you to my project. Weatherwise is a dynamic web application designed to provide users with accurate and up-to-date weather information. This project integrates a sleek, user-friendly interface with robust backend functionality to deliver an engaging weather experience.
## Tech Stack
Client: Next.js, TailwindCSS, Shadcn UI, Typescript
Hosting: Vercel
## Screenshots & Demo
[View Live Demo](https://weather-next-js-jayasriraam.vercel.app)
## Problems & Solutions
Problem 1: Accurate Weather Data Retrieval Challenge: Integrating and displaying real-time weather data from a reliable source while ensuring accuracy and consistency.
Solution: Utilized a comprehensive [Weather-API](https://www.weatherapi.com/) to fetch and display current weather conditions, forecasts. Implemented caching strategies to minimize API calls and enhance performance, ensuring users receive accurate and timely information.
Problem 2: Responsive Design Challenge: Ensuring that the application is fully responsive and provides a seamless experience across various devices and screen sizes.
Solution: Leveraged TailwindCSS for a responsive design that adjusts to different screen sizes. Incorporated Shadcn UI components for a consistent and accessible user interface. Utilized flexible grid layouts, media queries, and accessibility best practices to deliver a smooth experience on all devices.
## Run Locally
Clone the project
```bash
git clone https://github.com/Jay-Raam/Weather-Next.Js.git
```
Go to the project directory
Install dependencies
```bash
cd Weather-Next.Js
```
```bash
npm install
```
Start the server
```bash
npm run dev
```
## Contributing & Usage
Feel free to use or adapt the front-end code for your own weather-related projects. I encourage you to customize the theme and components to fit your needs. The content of this application is designed for showcases various weather-related features, reflecting my skills and capabilities.
If you have any questions or need assistance, please don’t hesitate to reach out to me on [Instagram](https://www.instagram.com/_ivanjay_/). I’m always here to help!
## License
[MIT](https://choosealicense.com/licenses/mit/)