Skip to content

Architecture

Jump to bottom
Jacqueline A edited this page Oct 23, 2024 · 11 revisions

Languages/frameworks/libraries/services/APIs:

  • Languages: React.js, Node.js, HTML, CSS
  • Database: MySQL2
  • Frontend Framework/Library: react.js, React Router
  • Backend Framework/Library: Node.js, Express, MySQL2, Cors
  • API/Services: Fetch api
  • Other Common Libraries/Tools: Dotenv, Nodemon, Bcrypt.js

What package/build manager will you use: npm

List what each person will work on:

  • Frontend and backend - Everyone
  • This will be further determined as the project progress

1. Deployment How will you deploy? Which hosting provider(s)? Automation? Scripts? Explain.

We will deploy using a traditional web hosting service, such as DigitalOcean or Vercel (for the frontend). The backend (Node.js and SQL) will be hosted on DigitalOcean or another VPS service, while the frontend (React) will be deployed using Vercel for easier continuous deployment.

2. Are you using Virtual Machines (vmware, vbox, etc) or Containers (docker) for development or deployment? Explain.

For now, we are not using virtual machines or containers. The development environment will be set up locally using Node.js and SQL, running directly on each team member's computer. Each developer will use npm commands to start the backend and frontend.

3. Is it a SPA or traditional? or mix? Explain.

ShapeShift is a SPA because we plan to load single HTML page that it’s content is updated as our user interacts with it. For ShapeShift we will have a basic outline of HTML page that includes a navigation bar, a logo, etc. that depending on the user interaction of the navigation bar and other buttons the content will update.

4. List of URLs you will implement. Explain any search arguments in English. Link (actual hyperlink) each URL to the page it shows in your Detailed Design milestone.

5. If implementing a REST API, document it. List all methods, parameters, and give English description of what they do.

We won’t be using a REST API

6. The Views of your app. Embed the images from your Design Milestone. Typically, a webpage includes multiple views. For example, this webpage has a Header, Menu, and Content views (at least).

Welcome Page

image

  1. Navigation bar tab options (will take user to different pages based on what they click on)
  2. Website logo
  3. Login button (takes user to the login page)
  4. Sign Up button (takes user to the sign up page)

Sign In Page

image

  1. User will type their information here
  2. Website logo
  3. Sign In button (confirms that they already have an account and takes them to their Dashboard)
  4. New users can click here to go to the sign up page

Sign Up Page

image

  1. Potential user will type their information here
  2. Create Account button (saves user information and creates a new profile for them)
  3. Old users can click here to go to the sign in page

User Dashboard Page

image

  1. Navigation bar tab options (will take user to different pages based on what they click on)
  2. Tab user is currently on
  3. Website logo
  4. Shows at a glance what exercises are for today
  5. A link to today's workout video
  6. Shows the user how much of the program they have completed
  7. User can enter calories to keep track

User Profile Page

image

  1. Navigation bar tab options (will take user to different pages based on what they click on)
  2. Tab user is currently on
  3. Website logo
  4. Changes the user from a regular user to a trainer, and gives them new privileges
  5. Shows user how close they are to their workout, fitness, and weight goals
  6. Shower user information

Trainer Profile Page

image

  1. Navigation bar tab options (will take trainer to different pages based on what they click on)
  2. Tab trainer is currently on
  3. Website logo
  4. Shows trainer how close they are to their workout, fitness, and weight goals
  5. Shows trainer's total subscribers
  6. Shows trainer information

Browse Page

image

  1. Navigation bar tab options (will take user to different pages based on what they click on)
  2. Tab user is currently on
  3. Website logo
  4. Filters to apply for a more advanced search
  5. Users can search for workout programs
  6. Different programs that the user can explore

Trainer Content Page

image

  1. Navigation bar tab options (will take trainer to different pages based on what they click on)
  2. Tab trainer is currently on
  3. Website logo
  4. Trainer is currently in their 'Content' tab
  5. Takes trainer to the create program page
  6. Shows their published programs
  7. Shows their program drafts

Trainer Analytics Page

image

  1. Navigation bar tab options (will take trainer to different pages based on what they click on)
  2. Tab trainer is currently on
  3. Website logo
  4. Trainer is currently in their 'Analytics' tab
  5. Takes trainer to the create program page
  6. Shows trainer their analytics (views, watch time, subscribers)

Workout Plan Page

image

  1. Navigation bar tab options (will take user to different pages based on what they click on)
  2. Website logo
  3. Takes user back to their 'Browse' tab
  4. Shows the workout plan overview
  5. Allows user to put program into their 'My Plan' tab
  6. Shows basic details about the program

Create Program Page

image

  1. Navigation bar tab options (will take trainer to different pages based on what they click on)
  2. Website logo
  3. Labels to apply to the program for searching/sorting purposes
  4. Information/videos link to add to each day of their program
  5. Trainer can name their program
  6. Trainer can give a description of their program
  7. Trainer can add a thumbnail to their program
  8. Publishes their program to the public
  9. Saves their progress as a draft and navigates back their 'My Programs' tab

User Training Page

image

  1. Navigation bar tab options (will take user to different pages based on what they click on)
  2. Tab user is currently on
  3. Website logo
  4. User's workout programs they are currently subscribed to
  5. Suggested programs, based on user's subscribed programs

7. The Database schema: set of tables/documents with list of attributes and their types. Describe each table and attribute in English.

  1. Users - all the users of the web app
    1. userID - a user ID to identify which user is logged in
      1. VARCHAR(255) PRIMARY KEY
    2. Name - the user’s name
      1. VARCHAR(30)
    3. Email - the user’s email
      1. VARCHAR(255) NOT NULL
    4. Password - a password for the account (might try to hash it)
      1. VARCHAR(255) NOT NULL
    5. Birthday - the user’s birthday
      1. VARCHAR(10)
    6. Trainer - weather or not the user is a trainer
      1. BOOLEAN NOT NULL DEFAULT 0
  2. workoutPlanEnrolled - the relationship between the ‘Users’ and WorkoutPlans
    1. user_id - user id from the Users database
      1. INT
    2. workout_course_plan_id - plan id from WorkoutPlans database
      1. INT
    3. progress - where the user is at in the plan
      1. INT DEFAULT 0
    4. Other things in the schema
      1. PRIMARY KEY (user_id, workout_course_plan_id),
      2. FOREIGN KEY (user_id) REFERENCES users(userID),
      3. FOREIGN KEY (workout_course_plan_id) REFERENCES WorkoutPlans(planID)
  3. WorkoutPlans - all the workout plans available
    1. planID - the workout plan id to identify which plan it is
      1. VARCHAR(255) PRIMARY KEY
    2. authorID - the id of the user that created this plan
      1. VARCHAR(255) FOREIGN KEY (authorID) REFERENCES users(userID)
    3. Title - the name of the plan
      1. VARCHAR(30) NOT NULL
    4. Description - a little blurb to describe the plan
      1. TEXT
    5. Level - the intensity of the plan
      1. ENUM('Beginner', 'Intermediate', 'Advanced') NOT NULL
    6. Type - what kind of workout is it
      1. VARCHAR(30)
    7. Location - where the workout can be done
      1. ENUM('At-homer', 'Gym') NOT NULL
    8. Schedule - the entire workout plan
      1. JSON (more flexible then a table). Will include week, day number, workout time, equipment, and video URL

8. List of common queries you expect will be needed. Do any of then need to join tables?

USERS:

  • (not a trainer) INSERT INTO Users (userID, Name, Email, Password, Birthday, Trainer) VALUES ('someUserID', 'Emma Doe', 'emmadoe@example.com', 'hashedPassword', '2002-02-02', 0);
  • (is a trainer) INSERT INTO Users (userID, Name, Email, Password, Birthday, Trainer) VALUES ('someUserID', 'JaneDoe', 'janedoe@example.com', 'hashedPassword', '2001-01-01', 1);
  • SELECT userID, Name, Email, Birthday, Trainer FROM Users WHERE userID = ‘someUserID’;
  • (query for login authentication only) SELECT Password FROM Users WHERE userID = 'someUserID';

WORKOUTPLAN ENROLLED:

  • INSERT INTO workoutPlanEnrolled (userID, workout_course_plan_id, progress) VALUES ('someUserID', 'somePlanID', 0);
  • SELECT wp.planID, wp.Title, wp.Description, wp.Level, wp.Type, wpe.progress FROM WorkoutPlans wp JOIN workoutPlanEnrolled wpe ON wp.planID = wpe.workout_course_plan_id WHERE wpe.user_id = 'someUserID';

WORKOUT PLANS:

  • INSERT INTO WorkoutPlans (planID, authorID, Title, Description, Level, Type, Location, Schedule) VALUES ('plan123', 'author123', 'Beginner Abs Plan', 'A workout plan designed for beginners to build core and ab strength.', 'Beginner', 'Abs', 'Gym', '{"Week": 1, "Day": "Monday", "Workout time": "10:00 AM", "Equipment": "None", "Video": "link_to_video"}');

Selecting a workout plan that a user is enrolled in requires joining the WorkoutPlanEnrolled table with the WorkoutPlans table.

Clone this wiki locally