Milestone Report ‐ 1

📍 Milestone Report - 1

Introduction

Milestone Goals

In this milestone, our main goals were to clearly define the project's requirements, create the design diagrams, and set up our development environment. We selected a few important features to implement first, which helped our team become familiar with the tools and methods we'll be using.

The features we focused on for this milestone include:

• Food Database (Requirement 1.1)
• Forum & Nutrition Tips (Requirement 1.4)
• Account Management (Requirement 1.7)

You can find more details about the requirements selected to be implemented here.

1. Requirements

1.1 Software Requirements Specification

1.2 Elicitation Questions

1.3 Scenarios

---

2. Design

2.1 Use Case Diagrams

2.2 Class Diagrams

2.3 Sequence Diagrams

---

3. Frontend

3.1 Frontend Architecture

The frontend of the Affordable and Healthy Hub project is a modern web application built with Vite, React, and TypeScript.
It provides a fast and responsive interface for users to discover, browse, and interact with affordable healthy food options.

• Framework: React 18 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Routing: React Router
• Mock API: Mock Service Worker (MSW)
• Testing: Vitest + React Testing Library

The project structure is modular, with clear separation of concerns between pages, components, services, and utilities.

Key Architectural Points:

• Mock Service Worker (MSW) is used to simulate backend APIs during development and testing.
• API Client in src/lib/apiClient.ts handles all frontend API interactions centrally.
• Tailwind CSS enables rapid UI development with a utility-first approach.
• Unit Testing ensures component reliability and API interaction correctness.

---

3.2 Viewing Instructions

Follow these steps to view and run the frontend locally:

1. Clone the repository

   git clone https://github.com/bounswe/bounswe2025group9.git
   cd bounswe2025group9/frontend

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

   The app will be available at http://localhost:5173

4. Folder Structure Overview:

   • src/pages/ – main pages like Foods, Forum, Login
   • src/components/ – reusable UI components
   • src/mocks/ – MSW mock handlers and data
   • src/lib/apiClient.ts – centralized API interaction library
   • src/styles/ – Tailwind and custom styles

5. Important Notes:

   • Mock API is active by default in development mode.
   • No backend setup is needed to explore features during development.
   • Unit tests can be run with:

     npm test

---

✅ After following these steps, the project will be fully functional for frontend development and testing.

4. Backend

4.1 Backend Architecture

The backend of the Affordable and Healthy Hub project is built using Django and Django REST Framework, providing a robust and scalable foundation for our API services. The architecture follows Django's best practices with a clear separation of concerns and modular design.

Technology Stack:

• Framework: Django 5.2
• API Framework: Django REST Framework 3.16
• Database: MySQL
• Authentication: JWT (JSON Web Tokens) using djangorestframework-simplejwt
• Testing: Django's built-in testing framework

Key Architectural Components:

• API Layer: RESTful endpoints for food database, forum, and user management
• Authentication System: JWT-based authentication for secure user sessions
• Database Models: Structured data models for users, foods, and forum posts
• Development Environment: Docker-based database setup for consistent development

4.2 Development Setup

Follow these steps to set up and run the backend locally:

1. Create and activate virtual environment

   python -m venv venv
   source venv/bin/activate

2. Install dependencies

   pip install -r requirements-dev.txt

3. Set up environment variables

   source setup.sh

4. Start the database

   docker-compose up -d

5. Run migrations

   python manage.py migrate

6. Start the development server

   ./manage.py runserver 9000

4.3 Testing

The backend includes comprehensive testing using Django's testing framework:

# Run all tests
./manage.py test

# Run specific API tests
python ./backend/manage.py test api

4.4 API Documentation

The API endpoints are documented in the Postman collection (352.postman_collection.json), which can be imported into Postman for testing and reference. The collection includes endpoints for:

• User authentication
• Account management And will cover more endpoints in the future milestones.

---

5. Mobile

5.1 Mobile Architecture

The mobile application for the Nutrihub is a native iOS and Android app built with React Native, Expo and TypeScript. It provides users with a dedicated mobile experience for accessing the platform's features, complementing the web frontend. This initial implementation concentrates on establishing the core UI, mirroring the web design where practical. Full API integration and testing are planned for the next milestone.

• Framework: React Native / Expo SDK
• Language: TypeScript
• Navigation: React Navigation (using Native Stack and Bottom Tabs)
• State Management: React Context API (currently for Authentication and Theming)
• API Client: Axios (planned for API interactions, not integrated yet)
• Testing: Jest + React Native Testing Library (Planned for testing, not integrated yet.)

The project structure within src/ is modular, promoting separation of concerns:

* `src/screens/`: Main application screens (Login, Home, Forum, Food).
* `src/components/`: Reusable UI components, organized into `common/`, `food/`, `forum/`, `home/`.
* `src/navigation/`: Navigators (`AppNavigator`, `MainTabNavigator`) and type definitions (`types.ts`).
* `src/context/`: Global state management (AuthContext, ThemeContext).
* `src/constants/`: Theme definitions (`theme.ts`).
* `src/services/`: (Placeholder for API client).

5.2 Viewing Instructions

Follow these steps to view and run the mobile application locally using the Expo Go app:

1. Prerequisites:

   • Install Node.js (LTS version recommended). Download from https://nodejs.org/. npm is included.
   • Install the Expo Go app on your physical iOS or Android device from the App Store or Google Play Store.
   • Ensure your mobile device and computer are connected to the same Wi-Fi network.

2. Clone the repository:

   git clone https://github.com/bounswe/bounswe2025group9.git

3. Navigate to the Mobile Project Directory:

   cd mobile/nutrihub

4. Install dependencies:

   npm install

5. Run the development server:

   npx expo start

   This command starts the Metro Bundler development server and displays a QR code in the terminal.

6. Open the App:

   • Open the Expo Go app on your mobile device.
   • Scan the QR code shown in your computer's terminal using the Expo Go app.
   • The app bundle will be downloaded from the development server to Expo Go, and the Nutrihub app should launch.

7. Important Notes:

   • The app connects to the Metro development server running on the local computer via Wi-Fi.
   • Authentication state for the login screen and Theme preference are persisted using AsyncStorage.
   • Currently, screens displaying lists (Food, Forum) use hardcoded data as API integration is pending.
   • Testing setup (Jest, React Native Testing Library) and API integration is planned for future implementation.

6. Deployment

6.1 Dockerization

We have dockerized our app and shared its image on Docker Hub, which can found here. For this milestone, we aimed to only dockerize the frontend. We will gradually dockerize all app using multi-stage builds.

To pull the image

docker pull ardasaygan77/frontned

to run it in a container

docker run -p 5173:5173 frontend

After this, our app can be found at http://localhost:5173

6.2 Deployment

We will deploy our app via Digital Ocean. We have applied for a $200 credit via Github Student Developer Kit and we are waiting for approval.