This group project challenged us to learn a new technology, TypeScript, in less than a week. We decided to utilize TypeScript, along with React and React Router, to create a Pokémon card deck builder. The application allows users to browse and favorite Pokémon cards, providing an interactive and enjoyable experience for Pokémon fans.
Learning a new technology, TypeScript, within a short timeframe posed several challenges and struggles for our team:
TypeScript introduces a new syntax and requires explicit typing. We had to familiarize ourselves with the TypeScript syntax and understand how to apply types to variables, functions, and components.
TypeScript enforces strict typing, which meant we had to ensure that all variables and functions were properly typed. We encountered type errors and had to debug and fix them to ensure the code was valid.
Integrating TypeScript with React required understanding how to apply types to React components, props, and state. We had to refactor our existing React components to include TypeScript types and ensure proper integration with React features.
Setting up TypeScript in our project required configuring the TypeScript compiler, updating project files, and installing TypeScript-specific tooling. We had to learn how to use TypeScript-specific tools and understand their role in the development workflow.
Learning a new technology always involves a learning curve. We had to dedicate time and effort to understand TypeScript concepts, best practices, and how to apply them effectively in our project.
Despite the challenges faced, our team achieved several wins while learning and implementing TypeScript:
TypeScript's static typing helped catch errors early in the development process. By ensuring variables and functions were properly typed, we improved the overall code quality and reduced runtime errors.
TypeScript's tooling and IDE support improved our development experience. Features such as autocompletion, type checking, and error highlighting helped us write more robust and error-free code.
TypeScript's type annotations made the codebase more self-documenting, which facilitated better collaboration among team members. The explicit types helped communicate intent and reduced the need for extensive code comments.
TypeScript's type system helped catch many potential bugs during development, reducing the time spent on debugging. The compiler's feedback guided us in fixing issues early on, improving the overall development efficiency.
With TypeScript, refactoring became less daunting. The static typing allowed us to make changes with confidence, knowing that the TypeScript compiler would catch any breaking changes or inconsistencies.
Here are the core components that each team member worked on:
- Responsible for fetching Pokémon card data from the Pokémon TCG API.
- Manages the state of all cards, favorites, loading, and error handling.
- Renders the main section of the application, including the Header, Loading and Error components, and the Switch with different routes.
- Renders the main container that displays the Pokémon cards.
- Receives data and callback functions as props to handle card selection and favoriting.
- Maps over the card data to create individual PokemonCard components.
- Represents a single Pokémon card.
- Handles the favoriting functionality, allowing users to add or remove cards from their favorites.
- Displays the card image, name, and type.
- Contains utility functions used within the application.
- Provides the cleanData function to format and clean the card data received from the API.
- Contains Cypress tests for the Favorites Page and Main Page.
- Tests the functionality of favoriting and unfavoriting cards, as well as the rendering of card details.
To run the project locally, follow these steps:
Clone the repository: git clone https://github.com/your-repo.git Change into the project directory: cd your-repo Install dependencies: npm install Start the development server: npm start Open your browser and visit http://localhost:3000
This group project pushed us to learn TypeScript in a short period and apply it to a Pokémon card deck builder. Despite the challenges, we successfully implemented TypeScript, React, and React Router to create an engaging and user-friendly application. The project not only improved our code quality and developer experience but also fostered better collaboration and increased confidence in refactoring. We are proud of our achievements and the knowledge gained through this experience.