AC Weather is a full stack weather application made with Node - Express JS and React JS.

View live project here

1. UX

   • Structure

2. Technologies Used

3. Deployment

   • Heroku

   • Local Clone

4. Credit

5. Disclaimer

Back to Top

• UX:

  • Structure

    • Features:

      Responsive on all screen devices.

      • Existing Features:

        1. Home Page

           • Welcome user with a 3D animation

        2. Weather Page

           • Where the user can search any city and have information display

        3. Favorite cities Page

           • Where user can see all his favorite cities. For details weather info can click on any city and will redirect to weather page to see more info

        4. Settings Page

           • Where user can change the settings on display weather info (E.g. °C to °F)

        5. Light and Dark Mode

      • Future Features to Implement:

        • Allow the app to set the weather from your current location

Back to Top

• Technologies Used

  • Languages:

    • HTML5 - used to structure website and its content.

    • CSS3 - to format the contents of each webpage.

    • JS - for DOM manipulation.

  • Frameworks & Libraries:

    • Express – Backend web application framework for Node.js

    • Axios - a Javascript library used to make HTTP requests from node.js

    • React Hook Form - a library that helps you validate forms in React.

    • Redux - a JavaScript library for managing and centralizing application state

    • React-Redux - is the official Redux UI binding library use to bind Reactjs and Redux

    • React Router Dom - to implement dynamic routing in a web app (React Router v6)

    • React-Bootstrap - a component-based library that provides native Bootstrap components as pure React components.

    • Dayjs - a minimalist JavaScript date library for parsing, validating, manipulating, and formatting dates.

    • Framer Motion - an animation library

    • Three.js - JavaScript 3D library

    • Bootstrap – CSS framework used to help with classes to make the app responsive.

    • GitHub - used to create and host the repository

    • Git - used for the version-control system for tracking changes in any set of files

    • Heroku - cloud platform for hosting the website

  • Additional tools:

    • VS Code - IDE

    • Create React App - This project was bootstrapped with Create React App

    • Weather API - for weather data

    • react-three/fiber - is a Three.js renderer that helps render 3D models and animations for React

    • react-three/drei - A growing collection of useful helpers and fully functional, ready-made abstractions for react-three/fiber.

    • Autoprefixer CSS - used to add prefix to css code

    • Tinypng - used to compress image file in order to reduce loading time on each page

    • CSS Validator - used to check CSS code for error

    • Am I Responsive? - for the main image in Readme to show responsive to different screen size

Back to Top

• Deployment

  • Heroku

    • The project was deployed to Heroku using the following steps:

      1. In order to deploy to Heroku you need an account

      2. Now you can create a new app from the dashboard New Menu

      3. Now you need to set up a name and select a region closest to you

         NOTE: Remember the name has to be unique and generally use a dash and lowercase letters

      4. From the dashboard of your app click on the Settings and go to Reveal Config variables

      5. Set up the Config Vars

         Key	Value
         NODE_ENV	production
         PORT	3001
         WEATHER_API_KEY	<your_secret_key>

      6. Now from the dashboard of your app click on the Deploy and from the Deployment method select Github - Connect to Github. Next on the search field type the name of the repository you want to deploy.

      7. Once it finds your repository click Connect

      8. Next you can click Enable Automatic Deploys

      9. Now From Manual Deploy you can click Deploy Branch and once it's finished you can click View

  • Local Clone

    In order to run this project locally you should have installed these 2 requirements on your machine plus an account on Weather API:

    1. VS Code - IDE or your personal preference

    2. Node.js - to run the application on your local machine

       Now you can create an account on Weather API

       Optional: you can install Git

    Steps to follow

    1. At the top of the repository click on Code and click on download zip and extract the zip file to your chosen folder or keep the same name

       Optional: if you have Git install on your machine you can type

       git clone https://github.com/constantinadrian/weather-app
       

       or to clone the repository into a different name on the folder you can run

       git clone https://github.com/constantinadrian/weather-app folder_name
       

       more info about cloning with git here.

    2. Install all dependencies with

       npm intall
       

    3. Create a .env file in server folder and add your weather api key

       WEATHER_API_KEY="your_secret_key"
       

    4. Run the application with

       npm start
       

Back to Top

• Credit

  • Code

    • https://expressjs.com/en/api.html

    • http://expressjs.com/en/resources/middleware/csurf.html

    • https://www.npmjs.com/package/csurf

    • https://stackoverflow.com/questions/9707021/how-do-i-auto-hide-placeholder-text-upon-focus-using-css-or-jquery

    • https://www.framer.com/docs/

    • JakeChampion/fetch#203 (comment)

    • https://ai.googleblog.com/2006/06/extra-extra-read-all-about-it-nearly.html

  • Media

    • Earth - 3D Model used on home page

    • Cloud - used as website logo

    • Sun - used on footer

    • Moon - used on footer and added animation

    • Clouds - used on footer and added animation

    • Eclipse - used for loading

    • Pexels - image for page not found

Back to Top

• Disclaimer

  • This project is for educational purposes only.