NongDanOnline

Frontend Development

I was responsible for designing and implementing the main web frontend of NongDanOnline.

The frontend was built with:

• Next.js

• TypeScript

• Tailwind CSS

The main development goals were:

• Responsive layouts

• Reusable components

• Consistent UI patterns

• Maintainable application structure

• Clear role-based interfaces

• Reliable backend integration

Frontend Architecture

The frontend was structured around reusable UI components and modular application features.

Instead of creating isolated pages with duplicated UI logic, shared interface elements were designed as reusable components.

A conceptual structure looks like:

Frontend
│
├── Authentication
│
├── Role-based Navigation
│
├── Farm Management
│
├── Livestock Management
│
├── Health Management
│
├── Vaccination Management
│
├── Administration
│
└── Shared Components

Shared components helped maintain UI consistency and reduced duplicated implementation across different features.

Reusable Component Design

Reusable components were an important part of the frontend architecture.

Common interface patterns were designed to be reused across multiple modules.

Examples of reusable UI patterns include:

UI Components
│
├── Forms
├── Tables
├── Modals
├── Navigation
├── Layout Components
├── Buttons
├── Input Components
└── Status / Information Components

This approach improved:

• Maintainability

• Development speed

• Visual consistency

• Code reuse

• Future extensibility

Responsive Design

The web interface was designed to work across different screen sizes.

Tailwind CSS was used to implement responsive layouts and maintain consistent styling throughout the application.

The responsive design focused on keeping operational interfaces usable while still supporting information-heavy management screens.

Backend Integration

The frontend communicates with backend services through APIs.

Backend technologies used in the project include:

• .NET

• C#

• Node.js

The frontend is responsible for consuming backend APIs and presenting the resulting data through the application interface.

A simplified data flow can be represented as:

User
  ↓
Next.js Frontend
  ↓
REST API
  ↓
Backend Services
  ↓
Database

Frontend / Backend Collaboration

A significant part of my responsibility was coordinating frontend integration with the backend team.

This included:

• Integrating API endpoints

• Handling API responses

• Troubleshooting integration issues

• Aligning frontend requirements with backend implementation

• Handling errors returned by backend services

• Testing end-to-end feature behavior

Because the frontend and backend were developed by different team members, maintaining clear interface contracts between both sides was important for keeping development efficient.

System Architecture

At a high level, NongDanOnline follows a multi-client architecture.

                   ┌─────────────────────┐
                   │        Users        │
                   └──────────┬──────────┘
                              │
              ┌───────────────┴───────────────┐
              │                               │
              ▼                               ▼
     ┌──────────────────┐            ┌──────────────────┐
     │   Web Frontend   │            │  Mobile Client   │
     │                  │            │                  │
     │     Next.js      │            │     Flutter      │
     │    TypeScript    │            │                  │
     │   Tailwind CSS   │            │                  │
     └────────┬─────────┘            └────────┬─────────┘
              │                               │
              └───────────────┬───────────────┘
                              │
                              ▼
                     ┌─────────────────┐
                     │   Backend API   │
                     │                 │
                     │   .NET / C#     │
                     │    Node.js      │
                     └────────┬────────┘
                              │
                              ▼
                     ┌─────────────────┐
                     │   Data Layer    │
                     └─────────────────┘

The web and mobile applications communicate with backend services rather than accessing data directly.

This separation makes it easier to maintain independent frontend, mobile, and backend codebases.

Technology Stack

Frontend

Next.js
TypeScript
Tailwind CSS

Next.js

Used as the main framework for building the web application.

It provides the project structure and React-based frontend architecture used throughout the platform.

TypeScript

Used across the frontend to improve type safety and make the codebase easier to maintain.

TypeScript helps identify common integration problems during development, especially when working with API data structures.

Tailwind CSS

Used for styling and responsive layout implementation.

Tailwind allowed reusable visual patterns to be implemented quickly while maintaining consistency across the application.

Backend

.NET
C#
Node.js

Backend services provide the business logic and APIs consumed by the web and mobile applications.

Mobile

Flutter

A Flutter-based mobile client was developed as another interface to the NongDanOnline system.

The mobile application communicates with the same backend services used by the web application.

DevOps

Docker
Jenkins

Docker

The application was containerized using Docker.

Containerization helped create a more consistent environment between development and deployment.

Instead of manually installing application dependencies directly on the deployment server, services could be packaged and run through containers.

A simplified deployment structure is:

Docker Environment
│
├── Frontend
│
├── Backend Services
│
└── Supporting Services

Benefits included:

• Consistent deployment environments

• Easier service management

• Better environment isolation

• Simplified deployment

• Reduced configuration differences between environments

CI/CD with Jenkins

I established Jenkins CI/CD pipelines for the project.

The goal was to automate parts of the build and deployment workflow rather than relying entirely on manual deployment.

A simplified CI/CD flow:

Developer
   │
   ▼
Git Repository
   │
   ▼
Jenkins Pipeline
   │
   ├── Build
   │
   ├── Test
   │
   └── Deploy
   │
   ▼
Docker Environment
   │
   ▼
Application

This workflow helped create a repeatable deployment process and reduced manual deployment steps.

Development Workflow

The project involved several independent development areas:

Frontend
Backend
Mobile
DevOps

Because the application was developed by a small cross-functional team, integration between these areas was especially important.

My work involved connecting these areas through:

• Shared requirements

• API integration

• Technical coordination

• Deployment configuration

• Debugging

• End-to-end testing

Technical Responsibilities

My technical responsibilities across the project included:

Architecture

• Designed the frontend architecture.

• Contributed to overall system architecture.

• Structured application modules.

• Defined reusable frontend patterns.

• Designed role-based frontend workflows.

Frontend

• Developed the web interface using Next.js.

• Used TypeScript throughout the frontend.

• Implemented responsive layouts with Tailwind CSS.

• Built reusable UI components.

• Integrated backend APIs.

• Implemented role-based interfaces.

• Debugged frontend issues.

Integration

• Worked closely with Backend Developers.

• Integrated REST API endpoints.

• Investigated frontend/backend integration issues.

• Tested feature workflows across services.

• Coordinated implementation changes between frontend and backend.

DevOps

• Containerized application services using Docker.

• Configured deployment workflows.

• Established Jenkins CI/CD pipelines.

• Supported deployment troubleshooting.

• Maintained development-to-deployment workflows.

Leadership

• Led a four-person development team.

• Coordinated responsibilities between frontend, backend, mobile, and DevOps work.

• Supported technical problem solving.

• Assisted team members with integration issues.

Technical Challenges

Multi-role User Experience

One of the important challenges was designing one platform for multiple types of users.

Farm staff, veterinarians, and administrators have different responsibilities and therefore should not interact with exactly the same functionality.

The application architecture needed to support role-aware navigation and interfaces.

Approach

The frontend was structured around Role-Based Access Control.

Authenticated User
       │
       ▼
Identify User Role
       │
       ├── Administrator
       │      └── Administrative Features
       │
       ├── Farm Staff
       │      └── Operational Features
       │
       └── Veterinarian
              └── Health-related Features

This made the user interface more relevant to each role and kept restricted functionality separated.

Maintaining UI Consistency

As the number of features increased, independently implementing UI elements for every screen could easily create duplicated code and inconsistent interfaces.

Approach

Reusable components and shared patterns were introduced for commonly used UI elements.

This allowed new features to reuse existing building blocks instead of recreating interface logic.

Cross-Team API Integration

Frontend and backend development happened in parallel.

Changes to API contracts could affect frontend implementation and create integration issues.

Approach

We worked closely across frontend and backend development to:

• Verify API payloads

• Debug failed requests

• Coordinate data structures

• Resolve integration issues

• Test end-to-end workflows

Deployment Consistency

Manually configuring application environments can introduce differences between developer machines and deployment environments.

Approach

Docker was used to containerize application services.

Jenkins was introduced to automate build and deployment workflows.

This created a more predictable delivery process.

What I Learned

NongDanOnline provided practical experience beyond implementing individual frontend screens.

The project required thinking about the application as a complete system.

Key areas I gained experience in include:

• Leading a small cross-functional development team

• Designing scalable frontend structures

• Building role-based applications

• Working with backend teams

• API-driven frontend development

• Debugging distributed application issues

• Docker-based deployment

• Jenkins CI/CD

• Coordinating web, backend, and mobile development

• Translating operational requirements into software workflows

The project strengthened my ability to move between frontend development, system integration, team coordination, and deployment responsibilities.

My Contribution Summary

AreaContributionProject LeadershipLed a 4-person development teamFrontend ArchitectureDesigned the web frontend structureFrontend DevelopmentBuilt interfaces with Next.js and TypeScriptStylingImplemented responsive UI with Tailwind CSSComponentsDesigned reusable frontend componentsAuthorization UXImplemented role-based frontend workflowsAPI IntegrationIntegrated frontend features with backend APIsDebuggingResolved frontend and integration issuesDevOpsContainerized services with DockerCI/CDEstablished Jenkins deployment pipelinesCollaborationCoordinated Backend, Frontend, Mobile, and DevOps work

Tech Stack

Next.js TypeScript Tailwind CSS .NET C# Node.js Flutter Docker Jenkins CI/CD

Project Metadata

name: NongDanOnline
type: Capstone Project
category:
  - Agriculture
  - Farm Management
  - Livestock Management

client: Amazing Tech Company

period:
  start: 2025-03
  end: 2025-05

role:
  - Project Leader
  - Full-stack Developer
  - DevOps

team:
  size: 4
  composition:
    backend: 2
    frontend_devops: 1
    mobile: 1

tech_stack:
  frontend:
    - Next.js
    - TypeScript
    - Tailwind CSS

  backend:
    - .NET
    - C#
    - Node.js

  mobile:
    - Flutter

  devops:
    - Docker
    - Jenkins
    - CI/CD

main_features:
  - Livestock Management
  - Livestock Health Tracking
  - Vaccination Scheduling
  - Farm Administration
  - Role-Based Access Control

user_roles:
  - Administrator
  - Farm Staff
  - Veterinarian

responsibilities:
  - Project Leadership
  - Frontend Architecture
  - Frontend Development
  - Reusable Component Design
  - Backend API Integration
  - Role-Based UI Development
  - Docker Containerization
  - Jenkins CI/CD
  - Deployment
  - Troubleshooting