A full-stack job application tracking system built with React and ASP.NET Core. This portfolio project demonstrates modern web development practices with component-driven architecture, RESTful API design, and clean separation of concerns.
- ✨ Features
- 🛠️ Tech Stack
- 🔧 .NET Configuration
- 🚀 Running the Application
- 🧱 Development Notes
- 🔄 Component & UI Updates
- ✅ MVP Completion Summary
- Create and view job applications (update/delete functionality in development)
- Responsive React interface with component-scoped styling
- Interactive UI elements with hover states and smooth transitions
- RESTful ASP.NET Core Web API with structured endpoints
- Clean project architecture with separated frontend/backend directories
- Frontend: React, JSX, CSS Modules
- Backend: C# ASP.NET Core Web API
- Development: Git version control
Last Updated: June 21, 2025
This project requires .NET 8.0 runtime. Due to system having multiple .NET versions installed, the following configuration was implemented:
- Primary System: .NET 9.0.5 (global default)
- Project Runtime: .NET 8.0.117 via Homebrew (
dotnet@8) - Configuration: Shell alias created for project-specific .NET 8 usage
# Start the development server
dotnet8 run
# Application will be available at:
# http://localhost:5150- HTTPS development certificate installed for local development
- Application configured for Development environment
- Hot reload and debugging enabled
- Renamed Home component to Dashboard – Better reflects the application's purpose as a job tracking dashboard
- Implemented component-specific CSS architecture – Each component now has its own CSS file to prevent inheritance conflicts and improve maintainability
- Cleaned up global App.css – Stripped down to essential global styles only (body, fonts)
- Enhanced Navigation – Added specific CSS classes and improved button styling with distinct colors
- Restored main container frame – Added visual separation between navigation and dashboard content with border, background, and shadow effects
- Improved visual hierarchy – Clean separation between global styles and component-specific styling
- Better file organization – Component-specific CSS files imported directly into components
- Eliminated CSS conflicts – Removed generic button/nav styles that were causing inheritance issues
- Semantic CSS classes – All components now use specific, meaningful class names
- Sort functionality – Dropdown with options to sort by Date and Status
- Filter functionality – Dropdown to filter applications by Status, Company, etc.
- Enhanced navigation – Additional nav buttons for improved user experience
- Dashboard view of all job applications
- Add new applications
- View individual application details
- Update existing applications
- Clean, responsive interface
Complete frontend refactor focusing on a cohesive, professional design system with soft neutral tones and consistent component architecture.
Color Palette (Soft Blues/Grays)
- Background:
#f8fafc(neutral light) - Cards: White with
#e2e8f0borders - Accent:
#64748b(slate) - Interactive:
#475569(darker slate for hover states)
Dashboard
- Streamlined card content by removing label prefixes
- Implemented consistent class naming conventions
- Added subtle box shadows with matching border-radius for card elevation
- Enhanced hover interactions with lift effects
Read Component
- Unified styling with Dashboard for visual continuity
- Redesigned "Back" and "Update" buttons with consistent hover behavior
- Optimized spacing and removed redundant labels for cleaner layout
Create Component
- Restructured JSX using form groups for improved spacing consistency
- Upgraded date inputs to
type="date"for better user experience - Applied card-style form design with white background and soft shadows
- Aligned button styling with global navigation theme
UpdateApplication (Work in Progress)
- Established component structure matching existing layout patterns
- Applied initial styling for MVP functionality
- Marked as development placeholder
Navigation
- Removed non-standard navbar hover lift behavior
- Implemented individual button hover effects with lift and drop shadow
- Ensured smooth transitions align with global design standards
- Consistent component-scoped CSS architecture
- Standardized hover states and transitions
- Improved accessibility through semantic form structure
- Enhanced visual hierarchy with professional card-based layout
As of June 24, 2025, the core MVP for the Application Tracker has been completed. Key accomplishments from this final push include:
- ✅ Successful implementation of full CRUD operations (Create, Read, Delete)
- ✅ Refined component structure and prop flow (especially
Read.jsx) - ✅ Extracted
fetchDatafor reusable, prop-driven state updates - ✅ Ensured consistent styling and UI feedback across Dashboard and Read components
- ✅ Finalized scoped class naming for maintainable CSS
- ✅ Added concise date labels and improved visual hierarchy for card displays
- ✅ Clean frontend-backend integration with proper state synchronization
This version represents a stable, fully functional job application tracking system with core CRUD workflow. Update functionality is planned for future iterations.
Complete responsive design implementation ensuring optimal user experience across all device types.
Responsive Breakpoints
- Mobile (≤480px): Single column layout, stacked navigation buttons
- Tablet (481px-1024px): Centered layouts, responsive card grids
- Desktop (>1024px): Optimized multi-column card display
Dashboard
- Single card per row on mobile with full-width display
- Touch-friendly card sizing and spacing
- Optimized font sizes for mobile readability
Navigation
- Stacked button layout for easy thumb navigation
- Centered tablet layout for balanced visual hierarchy
- Consistent button sizing across breakpoints
Read Component
- Full-width mobile cards with vertical action buttons
- Improved touch targets for better mobile interaction
- Responsive typography and spacing
Footer
- Compact mobile footer with reduced height
- Responsive text sizing and improved GitHub icon alignment
- Comprehensive media queries across all components
- Touch-friendly InfoTooltip (added click support alongside hover)
- Eliminated horizontal scroll issues on mobile devices
- Maintained visual consistency across all screen sizes
Development completed: July 1, 2025
Today marked the transformation of the Application Tracker from a basic MVP to a production-ready, multi-user application. The implementation of session-based data isolation and completion of full CRUD operations represents a significant architectural advancement.
Challenge Solved: Multiple users sharing the same data set, causing conflicts and poor demo experience.
Implementation:
- ASP.NET Core Session Middleware integration with distributed memory caching
- Cookie-based session management with secure HTTP-only flags
- Automatic session ID generation for new visitors
- Cross-origin credential support for frontend-backend communication
Technical Details:
// Program.cs configuration
builder.Services.AddDistributedMemoryCache();
builder.Services.AddSession(options =>
{
options.IdleTimeout = TimeSpan.FromHours(2);
options.Cookie.HttpOnly = true;
options.Cookie.IsEssential = true;
options.Cookie.SameSite = SameSiteMode.None;
options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
});Breakthrough: Each user now operates in an isolated data environment.
Key Features:
- Independent data sets - Each session maintains its own application list
- Session persistence - Data survives page refreshes and navigation
- Automatic cleanup - Sessions expire after 2 hours with memory cleanup
- Concurrent user support - Unlimited simultaneous users without interference
Backend Architecture:
- Session-aware service methods with
sessionIdparameters - Dictionary-based data storage:
Dictionary<string, List<Application>> - Session-specific ID counters for new application generation
- Isolated CRUD operations per session
Challenge Solved: Missing Update functionality and complex form pre-population.
Implementation Highlights:
- Pre-populated forms with existing application data
- Consistent styling matching the established design system
- Proper data flow from Read → Update with correct prop passing
- Session-aware updates using the new session architecture
- Form validation and error handling
Technical Breakthrough:
// Proper prop passing resolution
<button onClick={() => handleUpdate(application)}>Update</button>
// vs. incorrect: <button onClick={handleUpdate}>Update</button>Innovation: One-click demo data reset with visual feedback.
Features:
- Refresh button positioned in header with rotating SVG icon
- Session-isolated resets - only affects current user's data
- Instant UI feedback with smooth animations
- Fresh demo data restoration to original 3 applications
User Experience:
- Multiple users can reset their own data independently
- Perfect for portfolio demonstrations and recruiter presentations
- No interference between different user sessions
Milestone: All four CRUD operations now fully functional with session support.
Capabilities:
- ✅ Create - Add applications with session-specific ID generation
- ✅ Read - View applications within user's session
- ✅ Update - Edit applications with pre-populated forms
- ✅ Delete - Remove applications from session-specific data
Technical Achievement: Seamless frontend-backend session integration.
Implementation:
- Added
credentials: 'include'to all fetch requests - Configured CORS policy with
.AllowCredentials() - Automatic cookie handling by browser
- Secure session management without manual token passing
Before vs. After:
// Before: No session support
fetch('/api/applications', { method: 'GET' })
// After: Session-aware requests
fetch('/api/applications', {
method: 'GET',
credentials: 'include'
})Comprehensive Testing Performed:
- Concurrent user simulation using normal and incognito browser windows
- Data isolation verification - actions in one session don't affect others
- Reset functionality testing - independent reset operations per session
- Session persistence validation - data survives browser refresh
- Cross-session CRUD testing - all operations work independently
Results: ✅ Perfect isolation achieved across all test scenarios
- Error handling implemented across all components
- Responsive design maintained throughout new features
- Performance testing with multiple concurrent sessions
- User experience optimized for portfolio demonstrations
Problem: How to isolate user data without a traditional database. Solution: Dictionary-based session storage with automatic cleanup and fresh demo data generation.
Problem: Session cookies not being sent with API requests.
Solution: Added credentials: 'include' to all fetch calls and configured CORS appropriately.
Problem: Update component receiving undefined application data.
Solution: Fixed prop passing in event handlers: onClick={() => handleUpdate(application)}.
Problem: Complex date conversion between HTML inputs and backend format. Solution: Simplified approach using text inputs with placeholder guidance.
Problem: Ensuring all CRUD operations work with session isolation. Solution: Systematic addition of sessionId parameters to all service methods.
- Multi-user session support with complete data isolation
- Full CRUD operations with professional form handling
- Demo reset functionality perfect for portfolio presentations
- Responsive design maintained across all new features
- Professional error handling and user feedback
- Session middleware integration with ASP.NET Core
- Cookie-based authentication with security best practices
- Scalable data storage ready for database integration
- Clean component architecture with consistent prop flow
- Service layer abstraction for maintainable API integration
- Multi-recruiter demonstrations without conflicts
- Professional presentation with production-ready features
- Technical complexity showcasing advanced development skills
- Real-world application solving actual multi-user challenges
Before (v1.1.0):
- Basic CRUD with shared data
- Single-user experience only
- Demo conflicts with multiple users
- Missing Update functionality
After (v2.0.0):
- Complete CRUD with session isolation
- Multi-user support with independent data
- Professional demo experience
- Full feature completeness
- Advanced session management implementation
- Multi-user architecture design and testing
- Complex state management across components
- User experience optimization for portfolio use
- Database integration to replace in-memory session storage
- User authentication for persistent user accounts
- Data Visualization for tracking metrics such as respones, total apps, etc.
- Redis session store for distributed deployment
Development Date: July 1, 2025
Release: v2.0.0 - Complete CRUD Application with Session Isolation
Status: Production Ready ✅