Explore application by Setting it up locally or look at previews in Gallery
Group fullstack mockup of the flight-search application created during database module of our one year full-stack training. Uses mySQL as a database, Express.js for backend and React.js for frontend.
Authors: Alice Rez (Frontend-lead, main debugging help), Isabel Costa (Backend-lead), willoid (Database-lead). All authors worked on all aspects, just the main responsiveness was divided as depicted above.
Technologies used: mySQL, Express.js, React.js, React Transition group, React Hooks, React Context, Create React App, Bootstrap + ReactStrap, CSS, CSS Variables, HTML, SVG
Packages used: mySQL for Express, async, Axios, cors, nodemon
Implemented Features:
-
dynamic adding cities/companies list from database to React
-
city selected for departure can not be selected for destination
-
database contains 3 different tables (one for flights, one for companies and one for cities) - for the search of flights, joining of the tables is used
-
cors package is used in backend to manage from where can be sent request to backend
-
connections shown for way to the destination and back separately
-
left sidebar allows to filter results by price or company
-
right sidebar showing special offers as an automatic carousel, data are get from database of flights
-
if no connection is found, warning message will be shown
-
if the backend do not correspond (server probably crashed), information about service being out of order is displayed
-
of course the whole site is responsive
-
Clone repository and go to new created directory
Database:
-
If you use mySQL Shell, import database using:
sudo mysql –u root –p dbName < <path>/flight_search.sql
If you use XAMPP or other tools, use the way of importing database from their documentation
-
Check in terminal on which port your mySQL/XAMPP/other tool operates using this command:
sudo lsof -i -P -n | grep LISTEN
-
If the port number is different than 3306, change
dbPort
inbackend/config.js
on value of your port:module.exports.dbPort = "<your-mySQL-port-nr>";
-
Add your user name (
dbUser
) and password (dbPassword
) to mySQL databases inbackend/config.js
:module.exports.dbUser = "<your-mySQL-username>"; module.exports.dbPassword = "<your-mySQL-password>";
Backend:
-
Change directory to
backend
and start server by:nodemon start
Frontend:
-
In directory
frontend
, start client side using:npm start
-
If your client runs at different port than default port number 3000, change
frontendPort
inbackend/config.js
on value of your port:module.exports.frontendPort = "<your-frontend-port-nr>";
-
Enjoy!
Frontend of this project was bootstrapped with Create React App.
Fig.1 : Basic searching function
Fig.2 : Filtering through the results
Fig.3 : More filtering through results
Fig.4 : Part of special offers carousel display
Fig.5 : Responsiveness of the website
Fig.6 : Warning message when no results were found
Fig.7 : Out of Order message for case the server crashed
Fig.8 : Landing page
Fig.9 : End of the landing page
Fig.10 : Displayed search results for both directions
Fig.11 : More connection options for one direction