Bucket List Backend Programming Code Worksheet

App:Buckest List

front-end:

https://github.com/bscuron/bucketlist.git

back-end :

https://github.com/bscuron/bucketlist-backend.git

please create the screen for list view which. is create a container to store created events and then upload it to GitHub

list view == twitter home page

like the wireframe :

Both signup and login are now complete.

During signup, the user enters their data (username, email, password). After submission, the data is sent to the back-end for validation. Validation includes a set of criteria:

– Username must be at least 6 characters long- Email must be in the form of an email address- Password must be at least 8 characters long, contain at least one number and have a mixture of uppercase and lowercase letters- Password and confirm password must match

If all criteria is met (and username and email are not duplicates), an account is created. Upon account creation, a QR code is displayed to the user for TOTP (time-based, one-time password) MFA (multi-factor authentication). After scanning the QR code with the Google Authenticator app, codes will be continuously generated. These codes are necessary to login. NOTE: on mobile, it is not easy to scan a QR code. For this reason, a backup code is presented to the user that they can copy and paste into Google Authenticator. Next, the user can click the ‘login’ button displayed with the QR code. After doing so, the user will be redirected to the login screen.

The login screen has three inputs: username, password, and MFA code. The MFA code is generated by Google Authenticator. Once the user enters their credentials and submits the form, the data is sent to the backend for authentication. If credentials are missing/invalid, an error message is displayed to the user. Otherwise, the user is redirected to the database screen (NOTE: when implemented, the user will be redirected to the home screen). By default, back-end routes are protected. For this reason, we are using JSON web tokens (JWTs). After a successful login, a JWT is distributed to the user and stored on the client-side (NOTE: no sensitive information is stored within the JWT). When the front-end requests data from the back-end, the front-end must provide the JWT in the request header. Without the token, no data is sent to the front-end. To prevent tampering, a secret is used to generate JWTs. To learn more about JWTs see here:

https://jwt.io/introduction

The signup page and login page were inspired by the labs completed in the previous three weeks of class. During implementation, security was the top priority. Another top priority was ease of use for our application user. Too much typing would cause the user to leave our application for a less secure one. Additional data will be gathered from users post-login.

2/22/23, 8:50 PM
‎
Table of Contents
1. Bucketlist Demo
1.1. Frontend
1.2. Backend
1.3. Linux Server Setup
1. Bucketlist Demo
1.1. Frontend
Technology (as of right now):
React Native (UI software framework, cross-platform)
React Native Paper (Google Material Design library)
Axios (promise-based HTTP Client for the browser, used to make HTTP requests)
1.2. Backend
Technology (as of right now):
Node.js (open source server environment)
Express.js (application framework for building RESTful APIs with Node.js, web routing)
Node.js MySQL driver (to access and augment MySQL database from our server)
1.3. Linux Server Setup
Install Node.js and NPM:
Install nvm (https://github.com/nvm-sh/nvm#installing-and-updating) using curl or wget
Append these two lines to the end of your ~/.bashrc (runs whenever the bash shell is started interactively):
# Load Node and NPM
export NVM_DIR=”$HOME/nvm”
[ -s “$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh”
Comment this line out in ~/.cshrc (prevent switching to client):
# auto goto client
# [ “$tty” != “” ] && [ `hostname -s` = ‘CIS-Linux2’ ] && exec gotoclient
Append this line to the end of your ~/.cshrc (switch to bash shell on server login)
exec bash
Exit your SSH session
SSH back into the server
Run `nvm install 16.19.0` to install Node version 16.19.0 (old version because linux server is running old
Ubuntu OS)
file:///Users/benscuron/Documents/spring_2023/projects_in_computer_science/demo/notes.html
1/2
2/22/23, 8:50 PM
‎
Run `node –version && npm –version` to ensure that both are installed
To serve your React Native application you will need serve (https://www.npmjs.com/package/serve), more
instructions can be found here: https://docs.expo.dev/distribution/publishing-websites/
You should now be able to run your React Native code on the server, but it will not be accessible. Apache2
redirect is necessary to make the application available to outside users.
Setup Apache2 Redirect (SERVER ADMIN NEEDED, thomas.stauffer@temple.edu):
Redirect to point to your React Native application running on a certain port
Here is the configuration for the Bucketlist application (front-end and back-end):
RewriteEngine On
ProxyPreserveHost On
# sp23 Benjamin Scuron
RewriteRule
ProxyPassReverse
^/bucketlistBackend(.*)
/bucketlistBackend
[http://localhost:8000$1]http://l
http://localhost:8000/
# sp23 Benjamin Scuron
RewriteRule
ProxyPassReverse
^/bucketlist(.*)
/bucketlist
[http://localhost:19006$1]http://
http://localhost:19006/
As you can see, our front-end application is running on localhost port 8000. When a user of the application
navigates to https://cis-linux2.temple.edu/bucketlist, they are redirected to the React Native application on
localhost port 8000. The back-end application is running on port 19006. When a user navigates to https://cislinux2.temple.edu/bucketlistBackend, they are redirected to the Node.js application on localhost port 19006. The
front-end and back-end then communicate via HTTP requests.
Author: Ben Scuron
Created: 2023-02-22 Wed 20:50
Validate
file:///Users/benscuron/Documents/spring_2023/projects_in_computer_science/demo/notes.html
2/2