Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/youssefwilliam/iweather

This is a repo for the ACML'18 project, in this project we created a weather app, where u can know the weather of any city around the globe and save them to check them later.
https://github.com/youssefwilliam/iweather

backend database docker dockerfiles express mysql-database phpmyadmin phpmyadmin-database react reactjs reactrouter redux xampp xampp-server yarn

Last synced: 6 days ago
JSON representation

This is a repo for the ACML'18 project, in this project we created a weather app, where u can know the weather of any city around the globe and save them to check them later.

Awesome Lists containing this project

README 

        
In this project we are using React.js and mysql as a server for the application.


We will get through running the app and the tools needed for it.



# Part 1: Tools needed



#### For the Database:



### Download and install xampp

Xampp is an open source package that contains MariaDB that we use in the project


Simply it provide us a localhost and we can build a MySQL database,

You can find the link here:[https://www.apachefriends.org/index.html]



### Import Database

After downloading Xampp, you can import the database of the project without creating a new one, just open [http://localhost/phpmyadmin]

but make sure Xampp is activated with Apache and MySQL services are ON

Then import the database and now it's ready.



#### Install react on your device:



### `npm install react`



By opening [https://www.npmjs.com/package/react] you can find all the helpfull ways of understanding the React package,

but for now you just need this command and that's it.



Backend requirments



###  `npm install yarn`



Just open node.js comand promt and type it



Yarn is way faster and reliable and it caches faster and that what we need to run our server for the database, open [https://www.npmjs.com/package/yarn] and check all the info needed.



###  `npm init -y`

Just open node.js comand promt and go direct to the server folder



This is no initiate yarn package on your system



###  `yarn add express mysql cors`



Just open node.js comand promt and go direct to the server folder



In this part we add express and mysql database configs to the index.json file 



### `nodemon index.js`



Just open node.js comand promt and go direct to the server folder



That's the way for running the backend or the server for the project, which enables the server.


It connects the server on port 4000, so in order to check the connection, open [http://localhost:4000](http://localhost:4000) to view it on the browser. 



# Part 2: React Dependencies



### `npm install`

Before running the project, you have to install all the libraries and packages



### `npm start`



Runs the app in the development mode.


Open [http://localhost:3000](http://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.



# Part 3: Server Dependencies:



### Front-end Dependencies:

#### `react`   `react-dom`   `react-scripts`   `react-notifications`   `react-bootstrap`   `bootstrap`   `material-ui`  

#### `material-ui/core`   `material-ui/icons`   `yarn`



### Back-end Dependencies:

#### `cors`  `express`  `mysql`  `nodemon`



All of these dependencies are installed once the Dockerfile is run



To run the server, open the index json file in the server forder and run this command on it, if everything went right with the connection with the local database on [localhost/phpmyadmin], the cmd will print 
iWeather server is listining on port 4000
 


After that you are good to go.



# Part 4: Docker:



### `docker-compose up`

In this command, we aim for running both dockerfiles of the project with different ports assigned to each of them in the file



### Separate Dockerfile run

We have two dockerfiles in the project, one for the frontend and the other for the server backend, all is run in one command but for seprate commands:

#### First build:  `docker build -t  .`

#### Second run:  `docker run -p <3000/4000:3000/4000> `