- 💡 About
- 📹 Demo Video
- 🎨 UI Preview
- 💻 Tech Stack
- 👷♂️ Architecture and Data Model
- 🚀 Getting Started
- ✍️ Documentation and Deploy
- ✍️ Final Reflections
Activulse was my bachelor’s degree final project at ESMAD for the TSIW program. It is a cross-platform React Native app focused on heart health and daily activity tracking, supported by a RESTful backend, database integration, and a layered architecture.
The project combines product design, mobile development, backend engineering, and data modeling. It was also developed alongside thesis and academic research work with a professor from ESS to define the problem, validate the goals, and keep the implementation aligned with the academic requirements.
Beyond the technical scope, Activulse was built to turn a public-health topic into a practical and engaging experience: step tracking, activity goals, wellness guidance, and challenge-based motivation in a single app.
The poster was designed to present the app's identity and goals at a glance, highlighting the main features, the core tools used, and the UI mockups that define the visual direction of Activulse. It is available for download on Google Drive.
The stack was chosen to support a clean cross-platform UI, a typed codebase, and a secure backend with structured persistence.
- Expo and React Native power the mobile experience.
- React and TypeScript keep the UI predictable and maintainable.
- React Query handles server state and data synchronization.
- NativeWind provides utility-first styling across the app.
- Lottie is used for the splash screen animation and motion details.
- Vite keeps the web client fast and lightweight.
- React Router organizes the navigation flow.
- ESLint enforces code quality and consistency.
- Prettier keeps formatting aligned across the repository.
- Express powers the REST API.
- JWT and bcrypt handle secure authentication.
- Swagger exposes the API documentation.
- MySQL2 and Sequelize manage persistence and data access.
- Cloudinary stores and serves media assets.
The project is organized around a layered backend and a separate data model that documents the database relationships.
The application follows a simple flow:
- Models handle persistence logic through Sequelize.
- Controllers expose the business logic through Express.
- Views render the React Native interface.
The database model is shown as a DER preview so the main entities and relationships stay readable at a glance.
-
To run locally, you will need a MySQL database running on your machine or remotely on port 3306. Update the credentials in each
.envfile before starting the project. -
You need Expo CLI installed on your machine. You can install it by running the following command:
npm install -g expo-cli-
To run the app on your phone, you will need to have the
Expo Goapp installed on your phone. You can download it from the App Store or Google Play. Scan the QR code generated by thenpm startcommand to run the app on your phone. -
To run the app on an emulator, you will need to have the Android Studio installed on your machine. You can download it from the Android Studio website. Check out React Native Setup for more information on how to set up your environment to run the app on an emulator.
-
Clone the repo
-
Run the setup script (use the correct script for your OS)
chmod +x ./scripts/setup-project.sh && ./scripts/setup-project.sh./scripts/setup-project.bat- Create a
.envfile in the following directories:
/Packages/Api/Packages/App/Packages/Web
Follow the .env.example file in each directory to fill in the required environment variables.
- Run the project (use the correct script for your OS)
chmod +x ./scripts/start-project.sh && ./scripts/start-project.shIf you get an error saying that a command was not found, edit the start-project.sh file and add your current terminal to the list of terminals (line 3).
local terminals=("x-terminal-emulator" "gnome-terminal" "konsole" "YourTerminal")To find out the name of your terminal, run the following command:
ps -p $(ps -p $$ -o ppid=) -o comm=chmod +x ./scripts/macos-start-project.sh && ./scripts/macos-start-project.sh./scripts/start-project.bat-
Clone the repo
-
Install NPM packages
cd Packages/Api
npm install
cd ../App
npm install
cd ../Web
npm install
- Create a
.envfile in the following directories:
/Packages/Api/Packages/App/Packages/Web
Follow the .env.example file in each directory to fill in the required environment variables.
- Reset the database
cd Packages/Api
npm run reset-db- Start the API
cd Packages/Api
npm run dev- Start the app
cd Packages/App
npm start- Start the Web Client
cd Packages/Web
npm run dev
| Resource | Link | Status |
|---|---|---|
| Base URL |  |
 |
| API Docs (Swagger) |  |
|
Activulse is the kind of project that only works when design, backend structure, and academic rigor move together. It started as a degree requirement and ended up as a complete product story, which is the part I value most.
The main challenge was researching a complex health domain and turning that knowledge into an app that met the project requirements without introducing implementation mistakes. That process demanded constant validation to ensure the features aligned with the research and with the intended scope.
More than delivering a final project, this work became a practical exercise in growth. It pushed me to learn a new area, strengthen my technical judgment, and understand how much careful research matters when building software for health.