By Joud Kattaa Shikhoni and Jana Sweity
Development time: 4 hours
Built with: Replit, React, TypeScript, Express, and PostgreSQL
Introduction
Can we build a functional wellness tracking application in just four hours?
That was the challenge behind Denge, a web application that brings nutrition, activity, hydration, sleep, and weight tracking into one place.
The name Denge means “balance” in Turkish. We chose it because our project focuses on everyday habits rather than a single measurement or an unrealistic definition of a healthy lifestyle.
During our four-hour development session, we worked on turning this idea into a working application with personal accounts, persistent records, and a multilingual interface.
This article shares what we planned to build, what we completed, the challenges we encountered, and what we would like to improve next.
The Problem We Wanted to Address
Wellness information is often scattered across different places. Someone might record their weight in a notebook, check their steps in another application, and forget how much water they drank during the day.
Our idea was to make this information easier to organize.
Instead of building an application that promises medical advice or automatic health improvements, we focused on a practical question:
How can we help users record their daily habits and review them in one clear interface?
What We Planned to Complete
With only four hours available, we needed a focused scope. Our main goals were to:
- Create a clear dashboard showing a daily overview.
- Allow users to record meals and review estimated nutritional information.
- Support activity logging and manually entered step counts.
- Track water intake, sleep, and weight history.
- Let users set personal daily goals.
- Add account creation and sign-in.
- Save records in a database rather than keeping them only in the browser.
- Make the interface usable on both desktop and mobile screens.
We also wanted Denge to feel approachable. The visual direction used cream, sage, and olive colors, with simple cards and straightforward navigation.
These goals gave us a concrete definition of a useful first version.
What We Completed
By the end of the four-hour build, we had a working version of Denge covering the main tracking features.
1. A Daily Dashboard
The dashboard brings the main daily information together, giving users a starting point for reviewing their records and progress toward their goals.
2. Nutrition and Meal Logging
Users can record meals and review estimated calories and nutritional values.
We made an important distinction here: nutritional values are estimates, not precise medical measurements. Denge supports tracking and awareness; it does not prescribe a diet.
3. Activity and Step Records
Users can log activity and enter their daily step count.
In the current version, steps are entered manually. We have not connected the application to phone sensors, fitness watches, or other wearable devices.
4. Water and Sleep Tracking
The application includes records for water intake and sleep duration, allowing users to track more than food and exercise alone.
5. Weight History and Personal Goals
Users can record weight measurements over time and configure personal targets for calories, steps, water, sleep, and weight.
These targets are chosen by the user rather than presented as medical recommendations.
6. Personal Accounts
Denge includes account creation, sign-in, and an account page showing the user’s name, email address, and optional age.
We chose to collect age in years rather than a complete date of birth because the current application does not need that extra information.
7. A Multilingual Interface
The interface supports Turkish, Arabic, and English, including right-to-left layout support for Arabic.
This helped us consider accessibility across languages, not only across screen sizes.
How We Built It
We developed the project using Replit, with the following stack:
| Part of the Application | Technology |
|---|---|
| User Interface | React and TypeScript |
| Frontend Tooling | Vite |
| Styling | Tailwind CSS |
| Server-State Management | TanStack Query |
| Backend API | Node.js and Express |
| Database | PostgreSQL |
| Database Access | Drizzle ORM |
| Authentication | Clerk |
| API Contract and Client Generation | OpenAPI and Orval |
The frontend communicates with the Express API, which reads and writes records in PostgreSQL.
For personal records, the backend uses the authenticated user’s identity to determine account ownership. It does not rely only on an account identifier supplied by the browser.
Using an OpenAPI contract also helped keep frontend requests and backend responses aligned.
Challenges We Encountered
Account Creation Was More Than a Sign-Up Form
One issue appeared during profile completion: saving the age succeeded, but saving the name failed because the authentication configuration rejected the native name update.
We resolved this by storing Denge’s display name in the appropriate user profile metadata and updating the places where the application reads that name.
This taught us to check the entire journey—not only whether an account was created, but also whether profile information was saved, displayed correctly, and still available after refreshing the page.
Translation Required Layout Changes
Supporting Arabic was not simply a matter of replacing Turkish or English text.
We also had to consider reading direction, alignment, longer labels, and mixed-direction content such as email addresses.
A translated interface is only useful if the layout remains comfortable to use.
A Four-Hour Limit Required Prioritization
The time limit encouraged us to focus on a functional core rather than attempt every possible feature.
We prioritized recording, saving, and displaying useful information. Features such as wearable integrations and advanced recommendations were outside the scope of this first version.
Completing a working prototype in four hours does not mean that every production concern is finished. Further testing and improvements remain important.
What We Want to Develop Next
Our next priorities are:
- Editable account information: make it easier to update profile details.
- Cross-device language preferences: remember the selected language across sessions and devices.
- Data export and deletion: give users more control over their personal records.
- Further privacy testing: continue checking that one account cannot access another account’s records.
- Better input validation and feedback: make incorrect entries easier to identify and fix.
- Optional fitness integrations: explore automatic activity tracking through supported services in a future version. These are planned improvements, not features we claim are already available.
What We Learned
The project showed us that building an application involves much more than creating attractive screens.
Authentication, database persistence, localization, and error handling all affect whether a feature works from the user’s perspective.
We also learned the value of being clear about limitations: manual step entry should be described as manual, nutritional estimates should be labeled as estimates, and planned features should be separated from completed ones.
Conclusion
In four hours, we built a functional first version of Denge that combines several daily wellness records in one application.
The result gives us a foundation to continue developing, while the experience helped us understand the importance of realistic scope, complete user journeys, and clear communication.
Denge is not a replacement for professional medical or nutritional advice. Its purpose is to help users organize their records and become more aware of their everyday habits.
Created by Joud Kattaa Shikhoni and Jana Sweity.
Source Code
Building Denge in four hours was a valuable lesson in prioritizing features, making technical decisions, and creating a multilingual user experience.
What would you improve or add to Denge next?
Top comments (0)