Skip to content

Architecture

Jump to bottom
Anna Phan edited this page Oct 20, 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 progess

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

Sign In Page

image

Sign Up Page

image

User Dashboard Page

image

User Profile Page

image

Trainer Profile Page

image

Browse Page

image

Trainer 'My Programs' Page

image

Trainer Analytics Page

image

Workout Plan Page

image

Create Program Page

image

User Training Page

image

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