The app helps travelers getting more organized and alert for their upcoming trips. It provides users with safety guidelines related to COVID 19 pandemic. Logged in users can check if they have everything they need before their flight by checking boxes of lists (initially provided) of mostly recommended items and packing tips. Also, according to their needs, users can create new entries and annex them to the list initially provided. Users also have access to airport maps for eventual connections or just to spot airport amenities. It’s user-friendly, and accessible to everyone.

You can access a working prototype of the react app here: https://fly-smart-capstone-client.vercel.app/

This app is for logged-in user.

• As a visitor,
• I want to understand what I can do with this app (or sign up, or log in),
• So I can decide if I want to use it.

• As a returning register user
• I want to enter my password and username to use this app,
• So I can have access to my account.

• As a visitor
• I want to register to use this app
• So I can create a personal Fly Smart account.

• As a logged-in user,
• I want to be able to preview the content of the app,
• So i can start looking for guidelines about traveling by plane during the COVID 19 pandemic.

• As a logged-in user,
• I want to be able to match the recommended items with the items I am packing,
• So that I can organize my trip.

• As a logged-in user,
• I want to be able to add new entries to my personal to-bring list,
• So that I can create a list according to my personal needs.

Landing/Login Page
Home Page
Forum Page
My Posts Page

Full website graybox wireframes

Full Page Screenshot

The app's functionality includes:

• User can create entries
• User can mark entries as completed

• Users (database table)

  • id
  • email (email validation)
  • password (at least one number, one lowercase and one uppercase letter at least eight characters that are letters, numbers or the underscore)

• Checklist

  • id
  • user_id
  • title
  • completed

• Notes

  • id
  • user_id
  • title
  • completed

• Index.js (stateless)
  • App.js (stateful)
    • LandingPage.js (stateful) - gets the "prop name" and the "callback prop name" from the App.js
      • Login.js (stateful) -
      • Register.js (stateful) -
    • HomePage.js (stateful) -
      • Navbar.js (stateless) -
    • Checklist.js (stateful) -
      • Navbar.js (stateless) -
    • MyNoteForm.js (stateful) -
      • Navbar.js (stateless) -
      • MyNote.js (stateful) -

• Front-End: HTML5, CSS3, JavaScript ES6, React
• Back-End: Node.js, Express.js, Mocha, Chai, RESTful API Endpoints, Postgress
• Development Environment: Heroku

This API services the Fly Smart React client application and comprises an Express server coupled with a PostgreSQL database. The database stores user information from the Fly Smart client. This server has authentication endpoints for creating an account, logging in and access user notes data such as packing list entries and checklist. Passwords are securely hashed and stored and authentication is handled using JWT.

A typical request pattern looks like this:

• A user visits the Fly Smart client application, creates an account and makes a POST request to store their username, email and hashed password in the database.
• A user logs in by submitting a POST request to the login endpoint. Their hashed password is compared to the database and if valid, a token is returned to the client.
• As users interact with the app, they make repeated POST and GET PATCH DELETE requests to the protected endpoints: GET /api/checklist GET /api/notes, POST /api/notes/:note.id, DELETE /api/notes/:note.id GET api/users POST api/users Requests are validated, responses are sent accordingly and the user data is returned and rendered in the UI.

App is built to be usable on mobile devices, as well as responsive across mobile, tablet, laptop, and desktop screen resolutions.

This is v1.0 of the app, but future enhancements are expected to include:

• More pages in order to include more search results

Use command line to navigate into the project folder and run the following in terminal

• To install the node project ===> npm install
• To migrate the database ===> npm run migrate -- 1
• To run Node server (on port 8000) ===> npm run dev
• To run tests ===> npm run test

• To install the react project ===> npm install
• To run react (on port 3000) ===> npm start
• To run tests ===> npm run test