10days check-in for #100daysofMiva coding challenge || Achievements

#100daysofMiva on GitHub

The first 10 days of the #100DaysOfMiva coding challenge have been an incredible journey. From setting up my development environment to diving deep into Python and React, I've covered a lot of ground. Here's a quick check-in on what I've achieved and learned so far:

• Day 0 of #100daysofMiva || Setting up for success
• Day #1 (Part 1) || revisiting Python from scratch
• Day #2 of #100daysofMiva || Python Lists
• Setting up simple React components (also helpful for interviews)
• Simple REACT Projects || Random color project
• Python Tuples, Sets & Dictionaries || Day #5 of #100daysofMiva
• Simple React Projects (Star Rating) || Day #6 0f #100daysofMiva
• React App Setup, Resolving Dependency Conflicts in Node.js, & Debugging
• Simple React Projects || Image Slider
• Python Fundamentals || Arrays, Classes & Objects, For & While Loops, Functions, If else, Inheritance, Lambda
• Building a simple load more 'data' button with REACT using dummy JSON

Day 0: Setting Up for Success

Objective: Establish a robust development environment to support the coding challenge.

Activities:

• Configured essential tools and software, including code editors, version control (Git), and package managers.
• Set up a structured file system for organizing projects and code snippets.
• Created a GitHub repository for tracking progress and sharing code.

Key Takeaway: A well-prepared development environment is crucial for productivity. Proper setup minimizes technical debt and allows for a smoother workflow throughout the challenge.

Day 1: Revisiting Python from Scratch

Objective: Refresh foundational Python skills to ensure a strong base for upcoming challenges.

Activities:

• Revisited basic syntax, data types, and control structures in Python.
• Practiced writing simple Python scripts to solidify understanding.
• Explored Python’s standard library for common tasks like file handling and string manipulation.

Key Takeaway: Revisiting the basics not only reinforced core concepts but also highlighted Python’s simplicity and readability, which are essential for writing clean and efficient code.

Day 2: Exploring Python Lists

Objective: Deep dive into Python lists, understanding their functionality, and exploring advanced list operations.

Activities:

• Examined list creation, indexing, slicing, and iteration.
• Implemented list comprehensions to streamline data processing.
• Explored common list methods such as append(), remove(), pop(), and sort().
• Worked on practical examples like filtering data and transforming lists using comprehensions and loops.

Key Takeaway: Lists are a versatile data structure in Python, essential for managing collections of data. Mastering their operations enhances the ability to manipulate data efficiently.

Day 3: Setting Up Simple React Components

Objective: Build a foundation in React by creating simple, reusable components.

Activities:

• Set up a basic React project using Create React App.
• Created and styled basic React components, focusing on reusability and modularity.
• Explored props and state management to handle data within components.
• Developed small interactive UIs, understanding the flow of data and events in React.

Key Takeaway: React’s component-based architecture promotes modular and maintainable code. Learning to build simple components is a fundamental skill that paves the way for more complex applications.

Day 4: Building a Random Color Generator (React)

Objective: Implement a simple React project that generates random colors, practicing state management and event handling.

Activities:

• Designed a component that generates and displays a random color on user interaction.
• Utilized React’s useState hook to manage the color state.
• Implemented event handlers to trigger color changes on button clicks.
• Styled the component to enhance the user interface and experience.

Key Takeaway: This project was a hands-on exercise in using React’s state and event handling capabilities. It also provided an opportunity to practice CSS integration with React components.

Day 5: Python Tuples, Sets, and Dictionaries

Objective: Explore Python’s more advanced data structures—tuples, sets, and dictionaries.

Activities:

• Analyzed the immutability of tuples and their use in scenarios where data integrity is crucial.
• Explored sets for operations involving unique elements and performed set operations like unions and intersections.
• Worked with dictionaries to store key-value pairs, focusing on efficient data retrieval and updates.
• Implemented practical examples like counting occurrences of elements using dictionaries and eliminating duplicates using sets.

Key Takeaway: Understanding these advanced data structures is critical for efficient data management and manipulation in Python, especially when working with large datasets or requiring specific data operations.

Day 6: Creating a Star Rating Component (React)

Objective: Develop an interactive star rating component in React to practice handling dynamic user input.

Activities:

• Built a star rating system where users can select a rating by clicking on stars.
• Managed component state to reflect the current rating visually.
• Implemented conditional rendering to highlight the selected stars dynamically.
• Enhanced user experience by adding animations and transitions to the component.

Key Takeaway: This project reinforced the importance of user input handling in React. It also demonstrated how state and props can be combined to create interactive and responsive components.

Day 7: React App Setup, Resolving Dependency Conflicts, & Debugging

Objective: Set up a new React application, address common issues like dependency conflicts, and practice debugging.
Activities:

• Initialized a new React project and installed necessary dependencies.
• Encountered and resolved dependency conflicts by understanding version mismatches and using tools like npm audit and npm install with specific versions.
• Practiced debugging using browser developer tools and React DevTools to trace and fix issues.

Key Takeaway: Setting up a React project often involves managing dependencies, which can lead to conflicts. Understanding how to resolve these issues is crucial for maintaining a healthy project environment.

Day 8: Developing an Image Slider (React)

Objective: Build an image slider component in React, focusing on state management, event handling, and conditional rendering.
Activities:

• Created an image slider that allows users to navigate through images using arrow buttons.
• Managed the current slide state using useState and implemented event handlers for navigation.
• Utilized conditional rendering to show and hide images based on the current slide index.
• Styled the component to ensure a smooth user experience and added transition effects for slide changes.

Key Takeaway: This project highlighted the power of React’s state management in creating dynamic UIs. The image slider also provided a practical example of handling user interactions in a visually appealing way.

Day 9: Python Fundamentals – Arrays, Classes & Objects, Loops, Functions, Inheritance

Objective: Reinforce core Python programming concepts, focusing on object-oriented programming (OOP) and control structures.

Activities:

• Reviewed array manipulations and their importance in handling collections of data.
• Explored OOP principles by creating classes and objects, emphasizing encapsulation, inheritance, and polymorphism.
• Practiced writing Python loops (for, while) for iteration and control flow.
• Implemented functions and lambda expressions to enhance code modularity and reusability.
• Worked on examples that combined these concepts to build more complex Python programs.

Key Takeaway: A strong grasp of Python fundamentals, particularly OOP and control structures, is essential for writing organized, efficient, and scalable code. This day’s activities were crucial in reinforcing these core programming principles.

Day 10: Building a "Load More Data" Button with React

Objective: Implement a "Load More Data" functionality in React, using an API to fetch and display e-commerce product data incrementally.

Activities:

• Set up a React component that fetches product data from the dummyJSON API in batches.
• Managed state to keep track of loaded products and control the loading process.
• Implemented a button that loads additional products when clicked, updating the UI dynamically.
• Added logic to disable the button after a certain number of products have been loaded, ensuring the app remains performant.

Key Takeaway: Implementing incremental data loading is a vital feature in modern web applications. It enhances performance by reducing the initial data load and allows for a better user experience by progressively loading content.

Overall
These first 10 days have been an intense period of learning and growth. As I combine the coding challenge with other coding projects that needs me. I’ve revisited and strengthened my foundational knowledge in Python while making significant strides in mastering React.