Eport Asset Manager Dev Task

Project Overview

https://eport-asset-manager-beta.vercel.app/login

Eport Asset Manager: Full-Stack Asset Management System

Developed a comprehensive web-based Asset Management System as part of Eport’s technical assessment process. The project demonstrates full-stack development capabilities using modern technologies including Next.js, PostgreSQL, and cloud deployment platforms, with role-based access control and complete CRUD functionality for enterprise asset tracking.

Project Requirements

Implement dual-role authentication system (Admin and User)

Create Admin dashboard with user management, asset category creation, department management, and asset deletion capabilities

Develop User dashboard restricted to creating and viewing own assets

Persist asset information including Asset Name, Category, Date Purchased, Cost, and Department

Build with Next.js framework and PostgreSQL database

Deploy via GitHub with automatic CI/CD integration

Use Vercel for hosting and Supabase for managed PostgreSQL

Demonstrate creativity through innovative features beyond base requirements

Process

1. Requirements Analysis and Technical Planning

Analyzed assignment requirements and identified core functionalities versus enhancement opportunities. Created database schema design for users, assets, categories, and departments with proper relationships. Planned role-based access control (RBAC) architecture separating Admin and User permissions. Designed wireframes for Admin and User dashboards with distinct workflows. Established GitHub repository structure and branching strategy for version control.

2. Development Environment Setup

Initialized Next.js project with TypeScript for type safety and better developer experience. Configured Supabase project and obtained connection credentials for PostgreSQL database. Set up environment variables for secure credential management. Installed and configured necessary dependencies including authentication libraries, UI frameworks, and data validation tools. Established ESLint and Prettier for code quality and consistency.

3. Database Architecture and Schema Design

Designed normalized database schema with four core tables: users (id, email, password_hash, role, created_at), asset_categories (id, name, description, created_at), departments (id, name, description, created_at), and assets (id, name, category_id, department_id, date_purchased, cost, created_by, created_at). Implemented foreign key relationships ensuring data integrity. Created database indexes for optimized query performance. Set up Row Level Security (RLS) policies in Supabase for additional data protection. Wrote SQL migration scripts for reproducible database setup.

4. Authentication System Implementation

Built secure user registration and login system with password hashing using bcrypt. Implemented JWT-based session management for stateless authentication. Created protected route middleware enforcing authentication requirements. Developed role-based authorization logic distinguishing Admin and User capabilities. Implemented “Remember Me” functionality and session persistence. Built password validation with strength requirements. Created logout functionality with proper session cleanup.

5. Admin Dashboard Development

User Management Module: Created interface for viewing all system users with filtering and search capabilities. Implemented user creation form with role assignment (Admin/User). Built user editing functionality for updating roles and permissions. Added user deletion with confirmation prompts and cascade handling.

Category Management Module: Developed CRUD interface for asset categories. Implemented category creation with validation preventing duplicates. Built category editing and deletion with dependency checking (prevent deletion if categories have assigned assets).

Department Management Module: Created department management interface with full CRUD operations. Implemented department creation with description fields. Built department editing and soft deletion capabilities.

Asset Deletion Module: Developed comprehensive asset viewing interface showing all system assets. Implemented advanced filtering by category, department, date range, and cost. Built bulk deletion capabilities with multi-select functionality. Added confirmation dialogs preventing accidental deletions.

6. User Dashboard Development

Created streamlined asset creation interface for non-admin users. Implemented form with dropdowns populated from active categories and departments. Built date picker for purchase date selection with validation preventing future dates. Developed cost input with currency formatting and validation. Created asset list view filtered to show only user’s created assets. Implemented search and filter functionality within user’s assets. Added asset editing capability restricted to own assets.

7. Innovative Feature Enhancements

Asset Analytics Dashboard: Built visual analytics showing asset distribution by category, department cost analysis, and purchase trends over time. Created export functionality for asset reports in CSV formats.

Asset Depreciation Tracking: Developed automatic depreciation calculation based on purchase date and cost. Implemented configurable depreciation rates by asset category. Built visual indicators showing current asset values versus original costs.

Asset History and Audit Trail: Created comprehensive logging system tracking all asset modifications. Implemented activity timeline showing creation, updates, and deletions. Built admin-only audit dashboard for compliance and tracking.

Advanced Search and Filtering: Implemented full-text search across asset names and descriptions. Created multi-criteria filtering with real-time results. Built saved filter presets for frequently used search combinations.

Notifications System: Developed notification system for asset-related events. Implemented email notifications for asset approvals and deletions. Built in-app notification center with read/unread status.

Asset Assignment Tracking: Added functionality to assign assets to specific users or projects. Created asset transfer workflows with approval mechanisms. Implemented asset availability status (Available, In Use, Under Maintenance, Disposed).

8. UI/UX Design and Implementation

Created modern, professional interface using Tailwind CSS for styling. Designed intuitive navigation with role-specific menu items. Implemented responsive layouts optimized for desktop, tablet, and mobile devices. Built consistent component library for buttons, forms, cards, and modals. Developed loading states and skeleton screens for improved perceived performance. Implemented error states with helpful user guidance. Created accessible forms with proper labels, ARIA attributes, and keyboard navigation.

9. Data Validation and Error Handling

Implemented client-side validation using Zod schema validation. Built server-side validation for all API endpoints preventing invalid data. Created comprehensive error handling with user-friendly messages. Implemented input sanitization preventing XSS and injection attacks. Built form validation with real-time feedback. Developed error boundary components catching runtime errors gracefully.

10. API Development

Created RESTful API endpoints using Next.js API routes. Implemented authentication middleware validating JWT tokens. Built authorization checks ensuring role-based access control. Developed endpoints for all CRUD operations (users, categories, departments, assets). Implemented pagination for large dataset queries. Created API response standardization for consistent error and success formats. Built rate limiting to prevent abuse.

11. Testing and Quality Assurance

Performed comprehensive functionality testing across all user flows. Tested role-based access ensuring proper permission enforcement. Validated form inputs with edge cases and boundary conditions. Conducted cross-browser testing (Chrome, Firefox, Safari, Edge). Performed responsive design testing across various screen sizes. Tested database operations ensuring data integrity and constraint enforcement. Validated API endpoints with various payloads including malformed data.

12. Deployment and CI/CD Setup

Connected GitHub repository to Vercel for automatic deployments. Configured environment variables in Vercel dashboard. Set up main branch for production deployments and develop branch for staging. Implemented automated deployment previews for pull requests. Configured Supabase production database with proper security settings. Set up database backup and recovery procedures. Tested automatic redeployment by pushing commits to GitHub. Documented deployment process for team collaboration.

13. Documentation and Code Quality

Created comprehensive README with setup instructions, environment configuration, and deployment guide. Documented API endpoints with request/response examples. Wrote inline code comments explaining complex logic. Created user manual with screenshots for both Admin and User roles. Documented database schema with entity-relationship diagrams. Prepared submission documentation for HR team review. Granted repository write access for Eport team testing.

Results

Successfully delivered a production-ready Asset Management System within the specified deadline, demonstrating full-stack development proficiency and attention to detail. The application exceeds base requirements through innovative features including analytics dashboards, depreciation tracking, audit trails, and advanced search capabilities. The role-based architecture cleanly separates Admin and User functionalities while maintaining an intuitive user experience across both dashboards. The automated CI/CD pipeline through Vercel and GitHub ensures seamless deployments, while Supabase provides robust, scalable database infrastructure. The project showcases modern development practices including TypeScript for type safety, comprehensive validation, responsive design, and security best practices.

Key Technical Achievements

Full-Stack Implementation: Complete Next.js application with server-side rendering and API routes

Secure Authentication: JWT-based authentication with bcrypt password hashing and role-based authorization

Database Design: Normalized PostgreSQL schema with foreign keys, indexes, and Row Level Security policies

Automated Deployment: GitHub integration with Vercel providing automatic CI/CD on every commit

Responsive Design: Mobile-first interface using Tailwind CSS with full tablet and desktop optimization

Advanced Features: Analytics dashboards, depreciation tracking, audit trails, and comprehensive search

Data Validation: Client and server-side validation with Zod schemas preventing invalid data

Type Safety: Full TypeScript implementation reducing runtime errors and improving maintainability

Scalable Architecture: Component-based design enabling future feature additions and modifications

Production Ready: Deployed live application with proper error handling, loading states, and user feedback

Technologies Used

Frontend: Next.js 14, React 18, TypeScript, Tailwind CSS

Backend: Next.js API Routes, PostgreSQL (Supabase)

Authentication: JWT, bcrypt

Validation: Zod

Deployment: Vercel, Supabase

Version Control: Git, GitHub

Additional Tools: ESLint, Prettier, date-fns

Project Outcome

The Asset Manager application successfully demonstrated technical competency across the full development stack, from database design through deployment automation. The addition of innovative features beyond base requirements showcased creativity and initiative, while clean code organization and comprehensive documentation highlighted professional development practices. The project served as a strong portfolio piece for the Eport interview process, illustrating ability to deliver production-quality applications under deadline constraints.