Product Requirement Document - FelizCity Site

Summary

Product Requirement is as simple as 1, 2, and 3.

I have performed a Product Planning for FelizCity Fitness App previously. I will take the second step to review the development's product requirement. The end output will be an API passing of the backend Express Site to the frontend React Site.

Background

It became clear in the last UIUX research that in order for the Fitness App to be accepted, it has to have a learning partner who is willing to collaborate by offering the Venue and Trainer for booking. The main players - Fitness First, and Anytime Fitness have responded that the venues they have are for intermal fitness programs. For ActiveSG, there is no access to Community Club Venues.

There must be a solution to break the stalemate of the lack of business proposition.

Product Objective

To break the stalemate, the App must pivot from the original idea. Instead of the Trainer offering a Gym Program, we allow trainer to offer a digital training program to bypass the restriction set by the Business on its Venue operations. The trainees will make an ApplePay/GooglePay subscription for a month and renew it on a monthly basis to consume the digital assets on web and mobile app.

This is the real state of Product Management where we often pivot more than we proceed with the initial Design Thinking Process. This is a good thing as we have demonstrated that Design Thinking indeed work by highlighting a focal point for optimization. The reality of product can mean that the Government or Private partnership has formed an ecosystem that cannot be broken and we should always fight a battle that we can win than to throw a tantrum and insist on having what we cannot have. If we do not adapt to the situation, the other option would be to drop the idea. This is to clearly demonstrate that the dynamics and thrill of Product Management often not seen by the public. There are many Product Professionals who walk the journey alone and need to be appreciated for choosing the best available option, often times, these brave Warriors become the un-noticed heroes in the background.

Use Cases

• To build the basic site - Header, Footer, Hero Image

• To build the User Management and User Login Page

• To build the Subscription Management Page

• To build the Digital Media Management Page

• To build the Purchased History Management Page

Item	Description	Acceptance Criteria	Remarks
Header	As a User, I want a clean minimalistic black and white view of the entire brand so I can navigate to the next touchpoint in the user journey	Given as a User When I am on the landing Page Then I want to have a clear prompt on my next step Functional Requirement - Display a Login and Sign Up Button on the top right corner of the Web Site - Display a list of Users to Staff who have logged in. Staff can also create Users. Non-Functional Requirement - Display a hero image to speak about the free Signing Up process to use FelizCity Fitness App
Footer	As a User, I want to see 3 columns so I can easily navigate to the three main channel touchpoints	Company - About Us- Contact Us Portfolio - FelizCity Fitness App Digital Media - FelizCity App Store - FelixCity Play Store
Dashboard Header	As a User, I want to see which App I am using so I can easily navigate around	FelizCity Fitness App
Dashboard Sub Header	As a User, I want to see which function I am using so I can easily navigate around	User Subscription Digital Media Purchased
User	As a User, I want to see the listing Page so that I can navigate to view the detail page	Listing Page Detail Page
Subscription	As a User, I want to slide the switch to subscribe so that I can subscribe the Digital Media Subscription	Apple Pay Google Pay
Digital Media	As a User, I want to see the listing Page so that I can navigate to view the detail page	Listing Page Detail Page
Purchased	As a User, I want to see the listing Page so that I can navigate to view the detail page	Active - Listing Page - Detail Page

Structure

root/

├── backend/

│ ├── app.js # Primary entry point for the backend

│ ├── config/

│ │ ├── db.config.js # Database connection configuration

│ │ ├── env.config.js # Environment variables configuration

│ ├── controllers/

│ │ ├── user.controller.js # Example: User controller

│ │ └── index.js # Optional: Aggregate controllers

│ ├── models/

│ │ ├── user.model.js # Example: User model

│ │ └── index.js # Sequelize or ORM model aggregation

│ ├── routes/

│ │ ├── user.routes.js # Routes for user-related API endpoints

│ │ └── index.js # Combine all routes

│ ├── middleware/

│ │ └── auth.middleware.js # Example: Authentication middleware

│ └── utils/

│ └── helpers.js # Utility functions

├── frontend/

│ ├── src/

│ │ ├── App.js # Entry point for the React Native app

│ │ ├── components/ # Reusable React Native components

│ │ ├── screens/ # Individual screens

│ │ ├── services/ # API service functions (e.g., Axios calls)

│ │ ├── navigation/ # React Navigation configuration

│ │ ├── context/ # Context API for global state

│ │ └── styles/ # Shared stylesheets

│ ├── package.json # Frontend dependencies

│ └── .env # Environment variables for frontend

├── .env # Shared environment variables

└── package.json # Root dependencies

Basic Site

• app.js

const express = require('express');

const bodyParser = require('body-parser');

const cors = require('cors');

const routes = require('./routes');

const db = require('./models');

const app = express();

// Middleware

app.use(cors());

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: true }));

// Routes

app.use('/api', routes);

// Database Connection

db.sequelize.sync()

.then(() => console.log('Database synced successfully.'))

.catch(err => console.error('Database connection failed:', err));

// Start Server

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {

console.log(`Server running on http://localhost:${PORT}`);

});