Using reactive native for buckets list project

https://cis-linux2.temple.edu/bucketlist/home

front-end:

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

back-end :

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

license:using Apache License

task :

finish the task I attach to you

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
CIS 4398 PROJECTS IN COMPUTER SCIENCE
Database Design
Version 1
Database Design
Haein Yu, Karen J Kraft, Dennis Liang, Benjamin Charles Scuron, Curtis LAM, Jianlin
Deng, Lauren Kan, John A Karas, Ashley Kolb Malaviya
Page 1 of 7
Database Design
Version 1
CIS 4398 PROJECTS IN COMPUTER SCIENCE
REVISION HISTORY
Revision #
Author
Revision Date
Comments
0.1
John Karas
2/20/23
Added an abstract section
0.2
John Karas
2/20/23
Transferred the tables from
the excel sheet
0.3
Curtis Lam
2/22/23
Added description to each
table.
Added ER diagram.
0.4
Curtis Lam
2/25/2023
Updated tables from the
excel sheet.
Added and alter description.
Update ER diagram.
0.5
Curtis Lam
3/20/2023
Update tables fields and ER
diagram
Page 2 of 7
CIS 4398 PROJECTS IN COMPUTER SCIENCE
Database Design
Version 1
Table of Contents
Abstract …………………………………………………………………………………………………………………………………….4
Table Design ……………………………………………………………………………………………………………………………..4
users………………………………………………………………………………………………………………………………………………….. 4
profiles ……………………………………………………………………………………………………………………………………………….. 5
events…………………………………………………………………………………………………………………………………………………. 5
groups……………………………………………………………………………………………………………………………………………….. 6
status ………………………………………………………………………………………………………………………………………………… 6
Entity-Relation Diagram ……………………………………………………………………………………………………………7
Page 3 of 7
Database Design
Version 1
CIS 4398 PROJECTS IN COMPUTER SCIENCE
Abstract
This document describes and presents the database tables. There are five tables that
store user data, profile page data, event data, group type, and account status. The user table
stores login and unique identifier information to manage the userbase. The profile table will
have an associated user_id foreign key, to have a 1 to 1 relationship between a user and a
user’s profile. The profile table will store more public data while the user table will store
sensitive data. The third table is the event table. Events require location information for the
react native map. The event table will also store user filled information such as descriptions,
names, event categories, and more. Groups table stores the classification of subscription status.
For now, the application provides standard and premium for user to choose from. Lastly, the
account status table is an index of different account status in the system. For example, the user
completed the entire registration process including email verification will grant an active status.
Table Design
users
Table Field
Description
Restriction/
Nature
Data Type
Size
PK/FK
1
user_id
11
PK
email
username
password
not null, auto
increment
not null, unique
not null, unique
not null
int
2
3
4
A unique id assigned to
each user
User email address
Unique username
Account password
varchar
varchar
varchar
70
50
128
5
Secrete
nullable
varchar
32
6
7
a_datetime
r_datetime
nullable
not null
datetime
datetime
8
status_id
Store JWT secret that
use for authentication
Authentication period
Account created date
time
Account status
not null
int
11
FK
9
group_id
User group: standard,
premium
Logoutdate time
not null
int
11
FK
nullable
datetime
10 logout_datetime
Table 1. Data Table – users
Page 4 of 7
Database Design
Version 1
CIS 4398 PROJECTS IN COMPUTER SCIENCE
Required user registration information for granting access into the system will be stored in
Table 1. A unique ID assigns to each user automatically. Each user requires to provide a valid
email address, choice of password and username in the registration page for gaining access to
login the system. Beside user provided registration information, the data and time for account
creation is generated with each account and stored in the table. Logout datetime field is used
to log the date and time when user logout the system.
profiles
1
Table Field
profile_id
2
3
4
5
6
first_name
last_name
gender
dob
introduction
7
picture
Description
A unique id assigned
to each profile
User first name
User last name
User’s gender
User’s date of birth
Brief selfintroduction
User picture
Restriction/ Nature
not null, auto
increment
not null
not null
nullable
nullable
nullable
Data Type
int
Size
11
varchar
varchar
varchar
data
varchar
50
50
25
/
128
nullable
varchar
300
PK/FK
PK, FK
Table 2. Data table – profiles
Table 2 illustrates the data field of Profiles. It stores the user’s self-introduction information
posted on the profile page. User requires to input self-information when establishing the
profiles page. The profile page includes the user’s first and last name, a brief introduction, and a
picture. Each user’s profile information is stored in Profiles with a unique Profile_ID.
events
Table Field
Description
Restriction/ Nature
Data Type
Size
PK/FK
1
event_id
11
PK
name
host_date
host_time
organizer
description
not null, auto
increment
not null
not null
not null
not null
not null
int
2
3
4
5
6
varchar
date
time
varchar
varchar
50
/
/
50
128
7
8
latitude
longitude
A unique id assigned to
each event
The name of the event
Event’s hosting date
Event’s hosting date
The host of the event
A brief description of
the event
Event location: latitude
Event location:
longitude
nullable
nullable
decimal
decimal
8,6
9,6
Page 5 of 7
Database Design
Version 1
CIS 4398 PROJECTS IN COMPUTER SCIENCE
9
10
11
fee
category
creator_id
Fee per person
Event category
Creator’s user id
not null
not null
not null
decimal
varchar
int
8,2
50
11
FK
Table 3. Data Table – events
All event data are stored in Table 3. The requires information for user to create an event are listed in
above table, for example, the name of the event, hosting date time, and a brief description of the event
etc. Creater_id links the event creator’s user id.
groups
Table Field
1 group_id
2 group_name
Description
A unique number to
represent each group
name of types
Restriction/ Nature
not null
Data Type
int
Size
11
not null
varchar
40
PK/FK
PK
Table 4. Data Table – groups
Table 4 uses to show and identify user’s subscription status. A unique id assigns to each group
type.
status
Table Field
1 status_id
2 status_name
Description
a unique number for
each state
status name /
information
Restriction/ Nature
not null
Data Type
int
Size
11
not null
varchar
40
PK/FK
PK
Table 5. Data Table – status
Table 5 stores the predefined state type for logging the account status in the system. A unique id
generates to represent different account registration and login state.
Page 6 of 7
CIS 4398 PROJECTS IN COMPUTER SCIENCE
Database Design
Version 1
Entity-Relation Diagram
Figure 1. Entity-Relation Diagram
Figure 1 illustrates the relationship between five tables.
Page 7 of 7