🕒 From Sketch to System: Building an Employee Attendance Tracker App

👋 Introduction

I have always loved the idea of creating. Having fallen in love with coding when I entered high school, I was intrigued with the possibility of bringing my idea to life by means of coding.

Like many students in tech, I struggled to figure out my starting point. Computer Science felt vast, and despite completing a few courses, I constantly felt like I wasn’t learning enough. I’m a learner by doing — and that’s when I realized that to truly grow, I needed to build something real.

So, I approached a start-up for an internship. I was given the responsibility to develop an Employee Attendance Tracker App — and that marked the true beginning of my app development journey.

This project began not as a personal idea, but as a real-world requirement during my internship — an opportunity to build something practical and impactful from the ground up. I was tasked with building an employee attendance tracker mobile app, and while I began with little more than curiosity, I came out having learned full-stack app development, API design and cloud security fundamentals.

This is article not just about what I built, but how I grew as a developer by facing real client needs, team collaboration, and full product delivery constraints. And while the project is still a work in progress, it’s already taught me more than any course ever could.

📐 Product Design & Planning

Before any code was written, I focused on understanding the product requirements. I worked with my mentor to design:

• Activity Diagrams to understand flow of attendance marking and reporting

• Use Case Diagrams for employees, managers, and admins

• Requirement Docs to clearly define the MVP

This phase taught me the importance of planning and thinking through the user experience before touching starting to code.

📌 What I Learned:

• How to structure app flow based on actual user expectations

• The role of proper documentation in guiding development

🎨 UI/UX Design in Figma

Using the requirements, I translated the user flows into visual mockups using Figma.

As a person with close to zero visual creativity, I found this stage the most complex out of all. Choosing layouts, color combinations, and designing clean mobile interfaces pushed me out of my comfort zone. Although it wasn’t a perfect start to UI design, it was a start nevertheless.

Over time, I learnt to work with Figma, discovered many plugins and tools and developed a basic visual sense.

📌 What I Learned:

• Align UI with user expectations

• Keep interfaces minimal yet informative

• Bridging the gap between design and development

📱 Frontend with React Native

For the app frontend, I used React Native — which helped build for both Android and iOS. Key things I implemented:

• A dynamic layout adaptable to different companies' needs

• React hooks like useState and useEffect for UI responsiveness

• API integration using fetch()

• UI styling with NativeWind

• Basic error handling and input validation

At first, I generated static code using AI based on my Figma design. I then manually studied and modified it to suit app requirements. I did take a course on JavaScript, but I learnt a lot more by building the project than the hours I spent on learning through courses.

I referred to a couple of YouTube tutorials to get an idea of how other developers approach this stage. This helped me explore useful tools like Expo, Android simulator, and learn about debugging techniques used by experienced devs.

📌 What I Learned:

• Building reusable UI components

• Handling asynchronous API calls

• Responsive layout design and styling

🌐 Building REST APIs with Node.js + Express

As I was working with the front end, my teammate built the backend using Node.js and Express which was a complete foreign concept to me. I took a short course in freeCodeCamp to get a basic idea on backend, after which I studied and explored the code.

The routes were made to follow REST principles, ensuring a clear separation of concerns, standardized endpoints, and ease of maintenance and integration with the frontend.

📌 What I Learned:

• Structuring an Express app

• Handling routes, middleware, request validation

• Designing clean, modular APIs

🗄️ Database Layer: PostgreSQL

We were required to use PostgreSQL for storing data. Being already familiar with MySQL from my course at school, I found it pretty easy to create and query in PostgreSQL. The challenging part was designing the database, creating triggers and dependencies. It took me a lot of restructuring and tweaking as I coded before being able to come up with the perfect table design.

📌 What I Learned:

• Database normalization and foreign key design

• Writing PostgreSQL triggers and stored functions

• Building and referencing an ER diagram to plan the DB

---

🧱 Building Scalable Architecture: SAAS Principles

The app was to designed as a SAAS (Software as a Service) model, meaning:

• It can support multiple companies and role-based access

• It has a multi-tenant ready structure (each company’s data is separate)

📌 What I Learned:

• Multi-tenant app structure

• Separation of concerns in design and development

• Planning for scalability even in early stages

🔐 Security & Authentication: JWT and Vaults

I was completely oblivious to the requirement of proper authentication. I thought storing API keys and DB credentials in a .env file was enough. But after reviewing progress with my mentor, I was introduced to vaults. He pointed out the necessity of securing sensitive information.

Authentication was implemented using JWT (JSON Web Tokens). I also used:

• Secret keys for token signing

• Secure token storage

• Concepts of vaults for environment variables and sensitive credentials

📌 What I Learned:

• Why authentication matters — especially in enterprise apps

• How JWTs work and how to handle token expiry

• Better ways to manage .env files and secret keys

🤝 Real-World Collaboration & GitHub Workflow

Having not previously built a real-time project before, including complex code structures, I didn’t understand the need of GitHub - until I lost some updates and had to recode a functionality from scratch.. Not wanting to repeat my mistake again, I started using GitHub. It provided me with back up and having different branches allowed me to go back to a checkpoint when necessary. Additionally, I and my teammate found it easy to collaborate using GitHub.

📌 What I Learned:

• Creating and switching branches for clean development

• Using GitHub for real-time collaboration

🔄 Challenges & Growth

Some challenges I faced:

• Designing a robust schema for attendance edge cases

• Keeping UI responsive while syncing with backend

• Managing time while learning + building

• Coming up with a clear idea on implementation of a functionality

There were times when I had been stuck on a very insignificant segment for hours, struggling to debug and develop. I learnt how to handle different problems the hard way. A new problem meant a new challenge, a new solution.

📈 What This Experience Taught Me

This internship helped me grow in more ways than one. The concept of learning while building turned out to be the most effective strategy for me. Over just two months, I went from not knowing what to build to designing, coding, and debugging a working product.

🚧 Still a Work in Progress

The app is still under development, and I know there’s still so much more to learn — about optimization, testing, deployment, security, and scale.

But if there’s one thing I’ve learned, it’s this:

Growth begins where certainty ends - grow as you build and build as you grow