A comprehensive comic book collection management system built with React and ASP.NET Core, demonstrating full-stack development skills with complete CRUD operations, authentication, and modern web development practices.
comicTracker/
├── backend/ # ASP.NET Core Web API
│ ├── ComicTracker.sln # Solution file
│ └── src/
│ └── ComicTracker.API/ # Main API project
├── frontend/ # React application
├── docs/ # Documentation
├── README.md # This file
└── .gitignore # Git ignore rules
- Click the green "Code" button above
- Select "Codespaces" → "Create codespace on main"
- Wait for the environment to load (2-3 minutes)
- In the terminal, run:
./start-app.sh - Open
http://localhost:3000when prompted
Prerequisites: .NET 8 SDK, Node.js 18+
# Clone and setup
git clone https://github.com/Dystopiatron/comicTracker.git
cd comicTracker
./start-app.sh- ✅ Story 1: User Registration with email/password validation
- ✅ Story 2: User Login with JWT authentication and session management
- ✅ Story 3: Add Comic (CREATE) - Complete form with series, issue, condition, price
- ✅ Story 4: View All Comics (READ) - Paginated collection display with all details
- ✅ Story 5: Edit Comic (UPDATE) - In-place editing with form validation
- ✅ Story 6: Delete Comic (DELETE) - Confirmation dialog and safe removal
- ✅ Story 7: View Profile - User information and collection statistics
- Regular User:
demouser/Demo123! - Admin User:
comicfan/MyComics2024
- Registration Test: Click "Register" → Create new account → Auto-login
- Login Test: Use demo credentials above
- Add Comic Test: "Add New Comic" → Fill form → Save → Verify in collection
- View Collection Test: Navigate to "Collection" → See all comics with details
- Edit Comic Test: Click edit icon → Modify details → Save → Verify changes
- Delete Comic Test: Click delete icon → Confirm → Verify removal
- Profile Test: View "Profile" page → See user stats and comic count
- User Authentication: JWT-based authentication with registration and login
- Comic Management: Full CRUD operations for comic collections
- Advanced Search & Filtering: Search by series, issue, publisher, or condition
- Collection Statistics: Comprehensive analytics including total value and breakdowns
- Responsive Design: Works on desktop and mobile devices
The backend is organized with:
- Controllers: API endpoints
- Services: Business logic
- Data: Entity Framework Core context
- Models: Domain entities
- DTOs: Data transfer objects
The React frontend uses:
- React Router: Client-side routing
- Context API: State management
- Modern hooks: useAuth, useComics
- Responsive CSS: Mobile-first design
- 📊 Statistics Dashboard: Collection analytics and visual charts
- 🔍 Advanced Search: Filter by publisher, condition, price range
- 👑 Admin Panel: User management and system statistics
- 📱 Responsive Design: Mobile-optimized interface
- 🖼️ Image Support: Comic cover image URLs
- ⚡ Performance: Pagination, lazy loading, optimized queries
- 🛡️ Security: Input sanitization, CORS protection, rate limiting
- ✅ Full-Stack Development: Complete frontend and backend integration
- ✅ Database Design: Proper normalization and relationships
- ✅ API Development: RESTful design principles
- ✅ Authentication: Secure token-based authentication
- ✅ CRUD Operations: Complete data manipulation functionality
- ✅ Modern React: Hooks, Context API, functional components
- ✅ Responsive Design: Mobile-first CSS and Bootstrap
- ✅ Version Control: Git workflow with meaningful commits
- ✅ Deployment Ready: Environment configuration and production setup
This project fully meets and exceeds all MVP requirements with professional-quality implementation and bonus features demonstrating advanced full-stack development skills.
Additional documentation can be found in the docs/ directory:
- API implementation details
- Frontend development guide
- Copilot prompts and instructions
This project is licensed under the MIT License.