This fullstack app features a homepage where are generated 5 random locations for visiting this year, a search page where the user can search a city, and the informations about city are provided from Geocoding API and OpenWeather API by fetching informations. The city page contains more details about the selected city, such as humiduty, temperature, sunrise, sunset and many others. Also you can the city to favorites, and by doing this the information of that city is stored in a MongoDB database. The favorite page contains every city that the user added to favorites. If the server is restarded and the city is still in the database, the user can't add the city again, only if he deletes it. Another feature of the app is that it is fetching photots from Pixabay API based on the name and the country of the city and those photos are added on a carousel on the city page.
Homepage
Search Page
After searching a city
City Page with detailed info about the city
Adding a city to favorite (The icon button changed)
Favorite Page
1. Clone the Repository and open with VSCode:
git clone https://github.com/clauf14/modern-web-app-city-explorer.git
2. Open the terminal and type:
npm i react
npm install next@latest
npm install openmeteo
npm i mongoose
npm i @chakra-ui/react
npm i react-icons
npm i --save unsplash-js
3. Do the following prerequisites:
Change in .env file with your mongoDB database cluster connection string and chaneg in pages/city/[cityId]/page.jsx the Openweather API key noted as API_key
4. Type in terminal:
npm run dev
4. Click on the link and enjoy!
- Server started on http://localhost:3000
- Node.js
- Next.js
- JavaScript
- React
- MongoDB
- ChakraUI