![screenshot](https://private-user-images.githubusercontent.com/47388359/322386549-c281e16d-4453-4b52-87dc-e4dd1b955298.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQwMjE1MzIsIm5iZiI6MTcyNDAyMTIzMiwicGF0aCI6Ii80NzM4ODM1OS8zMjIzODY1NDktYzI4MWUxNmQtNDQ1My00YjUyLTg3ZGMtZTRkZDFiOTU1Mjk4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE4VDIyNDcxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTlkY2ZmYTVjYjQ1NzgzMGIxMjEwZjA4ZDcxMzNiY2Q3MzgyNTRlMWZiODYxM2ZhOWQ3MjQ5ODA0MmYyN2ZmOTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.XzCefbro_PpIWDUiEHizbi7X3X3OFyXi9mVb4wxAfYA)
https://weather-cast-sooty.vercel.app/
The web page has been developed using NextJS and TailwindCSS.
The following technologies and best practices have been employed:
-
Javascript, NextJS and TailwindCSS: The project utilizes a combination of these technologies to create a responsive and visually appealing web page.
-
Responsive Design: The webpage is designed to be fully responsive and should adapt seamlessly to various device widths without any breakage.
-
Components and Containers: Proper use of components and containers has been maintained to ensure code modularity, scalability and reusability.
To run this project locally, follow these steps:
- Clone the repository to your local machine:
git clone https://github.com/thagoo/weather-cast.git
- Navigate to the project directory:
cd weather-cast
- Install dependencies:
npm install
- Setup ENV vars
# API to fetch cities list
OPENDATASOFT_API="opendatasoft api URL"
# Openweather
OPENWEATHER_API="openweather api id"
# Openweather map
NEXT_PUBLIC_OPENWEATHER_MAP_TOKEN="openweather map api id"
#Rapid API
RAPID_API_HOST="rapid api host"
RAPID_API_KEY="key"
# MapBox
NEXT_PUBLIC_MAPBOX_API_ID="mapbox secret"
- Build the project
npm run build
- Run the production server locally
npm start
or
- Run the development server:
npm start
This will start the respective server, and you can view the webpage by accessing http://localhost:3000 in your browser.
Thank you for checking out my project!