Humble Superhero API Frontend

A Next.js application for managing superheroes with humility. This project demonstrates modern Next.js practices, animations, and comprehensive testing.

🚀 Features

• Add and view superheroes
• Animated UI components using Framer Motion
• Form validation with error handling
• Responsive design
• Accessibility-focused components
• Comprehensive test coverage

🛠️ Tech Stack

• Framework: Next.js 13.4.1 (App Router)
• UI Library: React 18.2.0
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Heroicons
• Testing: Jest & React Testing Library

🏗️ Setup & Installation

1. Clone the repository

   git clone https://github.com/nabeelamjadsheikh/superhero
   cd superhero

2. Install dependencies

   npm install

3. Environment Setup Create a .env.local file in the root directory:

   NEXT_PUBLIC_API_BASE_URL=your_api_url_here

4. Run Development Server

   npm run dev

   Visit http://localhost:3000
5. Run Tests

   npm test           # Run tests once
   npm run test:watch # Run tests in watch mode

🧪 Testing

• Unit tests for components
• Integration tests for form submissions
• Mocked API calls and routing
• Run tests using npm test

👥 Team Collaboration Note

As a team player, I believe this project could benefit from:

• Regular code reviews to maintain code quality
• Pair programming sessions for complex features
• Documentation of component props using TypeScript or PropTypes
• Shared component library documentation
• Regular discussions about accessibility and performance improvements

🔄 Development Workflow

1. Create feature branch from main
2. Implement changes with tests
3. Run test suite
4. Create pull request with detailed description
5. Address review comments
6. Merge after approval

:thinking_face: If I Had More Time

I would explore:

1. Technical Improvements
   • Implement TypeScript for better type safety
   • Add E2E tests using Cypress
   • Implement proper caching strategy
2. Feature Additions
   • Add superhero editing functionality
   • Implement sorting and filtering
   • Add pagination for large lists
   • Implement real-time updates using WebSocket
   • Add dark mode support
3. Developer Experience
   • Set up Storybook for component documentation
   • Improve test coverage
   • Add API mocking for development

📝 Code Quality Standards

• Consistent code formatting using Prettier
• ESLint for code quality
• Component-based architecture
• Proper error handling
• Accessibility considerations
• Comprehensive test coverage

🔍 Project Structure

humble-superhero-frontend/ ├── app/ │ ├── components/ │ │ ├── ui/ │ │ ├── SuperheroForm.jsx │ │ └── SuperheroList.jsx │ ├── constants/ │ ├── page.jsx │ └── layout.js ├── tests/ ├── styles/ ├── public/ └── configuration files

🤝 Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

📜 License

This project is licensed under the MIT License - see the LICENSE file for details. Built with ❤️ and humility +++++++++++++++++++++++++++++