Hello there! I’m Imran, and my passion for crafting impactful technological solutions drives my career as a Software Engineer. My journey into the software world began in February 2020 with a bootcamp, where I developed a keen interest in an array of technologies including HTML, CSS, JavaScript, React, Next.js, Node.js, Express, and MongoDB. This diverse skill set led me to Prayers Connect a door opened through LinkedIn that immediately captured my interest.

Upon joining Prayers Connect my excitement and eagerness to dive into the dynamic realm of software development were at their peak, particularly in areas like React, Next.js, and TypeScript. I anticipated a journey filled with challenges and rewarding experiences, hoping to make significant contributions to meaningful projects while growing professionally.

Early Days and Learning Curve

The initial phase of my journey at Prayers Connect was both exhilarating and daunting. As I embarked on my first project, I found myself immersed in a world where the theoretical knowledge from my bootcamp was put to the test. My early tasks involved working on web applications using React and Next.js, technologies I was familiar with, but now had to apply in more complex, real-world scenarios.

One of the first significant challenges I faced was adapting to the large-scale application architecture. Transitioning from small, tutorial-based projects to full-fledged, production-level applications required a steep learning curve. The intricacies of React’s component lifecycle and Next.js’s server-side rendering mechanisms were areas where I had to rapidly enhance my understanding and skills.

Another area of growth was mastering TypeScript. Initially, the strict typing and interface definitions of TypeScript seemed cumbersome compared to the flexibility of JavaScript. However, as I delved deeper, I realized the robustness it brought to our codebase, significantly reducing runtime errors and enhancing team collaboration through more readable and maintainable code.

Overcoming these challenges was not a solitary journey. I leaned heavily on the support of my team, engaging in pair programming sessions and code reviews, which were invaluable for my growth. Additionally, I dedicated time to self-study, utilizing online resources and community forums to fill gaps in my knowledge.

These early days at Prayers Connect were important for shaping my skills as a Software Engineer. They taught me not only the technicalities of coding but also the importance of collaborative learning and adaptability in the ever-evolving landscape of software development.

Internship Experience

Throughout my journey into software engineering, I’ve always held a deep belief in the power of starting my career with an internship. I prayed to Allah, hoping for an opportunity to learn industry-level best practices right from the beginning. Fortunately, my prayers were answered when I joined Prayers Connect for a six-month internship, a period that marked a significant milestone in my career and personal growth, for which I am deeply grateful, Alhamdulillah.

The six-month internship at Prayers Connect was a transformative experience. The first two months were dedicated to building a strong theoretical foundation in software engineering practices. This period of intense learning laid the groundwork for the subsequent hands-on experience.

In the remaining four months, the focus shifted to practical application. This phase was about putting theory into action and working towards mastery of the skills I had learned. A significant part of my role involved writing efficient, scalable code, developing new features, resolving numerous git conflicts, and absorbing invaluable lessons about effective coding practices. These experiences were crucial in sharpening my technical skills and deepening my understanding of software development in a real-world context.

Another highlight of my internship was the in-depth session on CI/CD pipelines and an overview of our entire cloud infrastructure, led by our CTO. This experience was invaluable, as it gave me a holistic view of our operational environment and the critical role of DevOps in modern software development. The hands-on experience with CI/CD pipelines enhanced my skills in automating the software development lifecycle, significantly contributing to my understanding of streamlined workflows and quality assurance in software engineering.

At the end of our internship, our CTO organized a Kubernetes workshop, which was a fantastic opportunity for us. This workshop offered practical insights into container orchestration, reinforcing the principles of DevOps and deepening our knowledge in a key area of modern infrastructure management. It was not just a learning experience but also a testament to our company’s commitment to continuous professional development.

During my internship, I also gained an interesting experience in writing about technical topics, specifically focusing on responsive web design. I authored an article titled ‘How to Build a Mobile-Responsive Web App with React & Material-UI,’ which delves into the intricacies of creating user-friendly, responsive web applications.

Going Deeper in Next.js, React, and TypeScript

When we began our internship, our CTO instructed us to thoroughly read the documentation of Next.js, React.js, and TypeScript. This directive was the foundation of our learning journey. As we delved into these technologies, we discovered their intricacies and the powerful synergies they create when used together.

1. Exploring Next.js: We started by exploring Next.js, a framework built on top of React. Its server-side rendering capabilities and efficient routing mechanisms stood out. We learned how Next.js enhances performance and SEO, making it ideal for building scalable, user-friendly web applications.
2. Deep Dive into React.js: Next, we immersed ourselves in React.js. We grasped the significance of components, states, and props, and how they contribute to building dynamic user interfaces. The concept of hooks and their role in functional components was a game changer for us, simplifying state management and side effects.
3. Understanding TypeScript: TypeScript, with its static typing, brought a new level of discipline to our coding. We appreciated how it reduced bugs and improved the maintainability of our code. TypeScript’s compatibility with JavaScript made the transition smoother for us.
4. Real-World Applications: Our final and main product using these technologies. This project tested our understanding and allowed us to apply our theoretical knowledge in a practical setting.

Key Project and Achievements

My tenure at Prayers Connect was marked by a key project that not only challenged me technically but also offered immense satisfaction — developing/maintaining/optimizing a platform for users to check prayer times across various states in America. This project stood out as it directly catered to the spiritual needs of our community.

In this project, I played a pivotal role in front-end development, employing technologies like React, Next.js, and Typescript. The main challenge was ensuring the precise timing of prayers, considering the diverse time zones and geographical factors. My involvement also extended to DevOps tasks, where I fixed the CI/CD pipeline issues, vital for the platform’s consistent updates and reliability.

The success of this project was not just in its technical execution but in its impact and reach. Following its success, we expanded our services to cover not just different states in America but also regions in North America and Europe. This expansion was a significant achievement, as it amplified the reach and utility of our platform to a broader audience, helping more users in their daily spiritual practices.

Lessons and Advice from My Journey

Reflecting on my 1 year at Prayers Connect the journey has been rich with learning experiences, each contributing to my growth as a software engineer and as a professional. Here are some key lessons I’ve learned, along with advice for aspiring software engineers and interns.

1. Embrace Continuous Learning: The technology field is ever-evolving, and staying updated is crucial. I learned the importance of continuously enhancing my skills and knowledge. For those starting their careers, remember that learning never stops. Be proactive in seeking knowledge, whether through formal education, online courses, or hands-on projects.
2. Value Collaboration and Communication: My time at Prayers Connect reinforced the importance of teamwork. Effective communication and collaboration are vital, not just for project success, but for personal growth as well. To aspiring engineers, don’t underestimate the power of teamwork. Be open to feedback, and always be willing to lend a helping hand to your peers.
3. Adaptability is Key: In software engineering, flexibility and adaptability are essential traits. Projects can change direction, technologies evolve, and being adaptable allows you to thrive in such environments. For interns and new engineers, be prepared to pivot when necessary and embrace change as an opportunity for growth.
4. Problem-Solving Mindset: Developing a problem-solving mindset has been crucial. It’s not just about writing code, but about understanding the problem and figuring out the most effective solution. My advice is to always dig deep into the root cause of issues and think creatively about solutions.
5. Seek Mentorship: Having a mentor can accelerate your learning and provide invaluable guidance. Don’t hesitate to reach out to experienced professionals in your field, be it for technical advice, career guidance, or networking.

To those starting their journey in software engineering, remember that every challenge is an opportunity to learn and grow. Be curious, stay determined, and don’t be afraid to step out of your comfort zone. The path may not always be easy, but the rewards and satisfaction of solving real-world problems with technology are truly worth it.

Conclusion

Reflecting on my time at Prayers Connect I am filled with gratitude for the journey that has significantly shaped my skills in software engineering and DevOps. This experience has been a blend of challenges and achievements, each contributing to my professional growth and deepening my passion for technology.

I hope my journey at Prayers Connect has provided you with insights and perhaps even some inspiration. Now, I’d love to hear from you! Whether you’re just starting in software engineering, are curious about DevOps, or have experiences of your own to share, I invite you to join the conversation. Your stories, questions, and insights are invaluable and I look forward to engaging with them.

Feel free to connect with me or reach out directly. You can find me on my LinkedIn. For more in-depth discussions or specific inquiries, you can also email me at [email protected].

Let’s connect, share experiences, and grow together in this ever-evolving world of technology!

The post My Pioneering Year in Software Engineering first appeared on Prayers Connect.

In today’s digital landscape, the responsive web app is crucial to provide a seamless and enjoyable user experience across various devices and screen sizes. In this blog post, I will explore the importance of responsive design and demonstrate how to build a responsive web application using React and Material-UI. Throughout this post, I will cover responsive layout techniques, adaptive components, and handling different screen sizes to ensure our application looks and functions flawlessly on any device.

Why Responsive Web App Matters

Responsive design plays a pivotal role in ensuring that your web app adapts and responds to the user’s device, whether it’s a desktop, tablet, or mobile phone. By eliminating the need for separate designs for different devices, the responsive design enhances development efficiency and reduces maintenance efforts. Additionally, responsive design significantly improves accessibility, increases user engagement, and positively impacts search engine rankings. For further insights on software engineering, visit the Prayers Connect blog. You can visit the Prayers Connect blog to read more about software engineering.

CSS in JS

CSS in JS refers to an innovative approach in web development where CSS styles are written and managed using JavaScript instead of traditional external CSS files. This approach involves defining CSS styles as JavaScript objects or using CSS-like syntax within JavaScript code.

The advantages of CSS in JS are manifold. First, it enhances encapsulation, allowing for more effective component styling. Moreover, it facilitates the creation of dynamic and responsive styles, enabling seamless adaptation to different devices. Additionally, CSS in JS enhances code organization and simplifies dependency management, resulting in more flexible and reusable styles.

What are MUI Breakpoints

MUI breakpoints are responsive breakpoints provided by the Material-UI (MUI) library. In the context of web development, breakpoints define specific screen widths at which the layout of a responsive web application should change. These breakpoints are instrumental in ensuring that the design and components of your application adapt and respond effectively to different screen sizes and devices.

MUI Breakpoints that Can be used to Create Responsive Designs

MUI breakpoints are responsive breakpoints provided by the Material-UI (MUI) library. In the context of web development, breakpoints define specific screen widths at which the layout of a responsive web application should change. These breakpoints are instrumental in ensuring that the design and components of your application adapt and respond effectively to different screen sizes and devices.

MUI Breakpoints that Can Be Used to Create Responsive Designs
Material-UI (MUI) offers a set of predefined breakpoints that can be utilized to create responsive designs. These breakpoints are based on common device sizes and serve as reference points for adapting the layout and styles of components at different screen widths. Let’s explore the default breakpoints provided by Material-UI:

xs (Extra Small): The smallest breakpoint, typically targeting mobile devices. The range spans from 0px to 599.95px.

sm (Small): This breakpoint is designed for small devices like smartphones. It covers a range from 600px to 959.95px.

md (Medium): The medium breakpoint is suitable for tablets and small laptops. It spans from 960px to 1279.95px.

lg (Large): This breakpoint caters to larger devices like laptops and desktops. The range extends from 1280px to 1919.95px.

xl (Extra Large): The extra-large breakpoint represents larger screens, such as large desktop monitors or high-resolution displays. It starts from 1920px.

Getting Started with Responsive Web App

Let’s start by setting up a React project and integrating Material-UI. We will install the necessary dependencies and configure our project to leverage Material-UI’s responsive features. So open your terminal and run this command. Also, you can follow installation guidelines from here.

npm create vite@latest

After successfully creating React app now let’s install MUI on our React App. Run the below command to your terminal. You can follow MUI installation guidelines from here.

npm install @mui/material @mui/styled-engine-sc styled-components

So now we already understood the MUI breakpoints right? let’s see how we can change the app text and font size inside the BreakpointDemo.jsx file. Simply create a new component called BreakpoinDemo.jsx and mount it with the main.jsx file in your react app. Then just copy this code in your BreakpointDemo.jsx

import React, { useState, useEffect } from 'react';
import { useTheme } from '@mui/material/styles';
import { Container, Typography } from '@mui/material';

const BreakpointDemo = () => {
  const theme = useTheme();
  const [currentBreakpoint, setCurrentBreakpoint] = useState('');

  useEffect(() => {
    const handleResize = () => {
      const { breakpoints } = theme;
      let activeBreakpoint = '';

      if (window.innerWidth < breakpoints.values.xs) {
        activeBreakpoint = 'xs';
      } else if (window.innerWidth < breakpoints.values.sm) {
        activeBreakpoint = 'sm';
      } else if (window.innerWidth < breakpoints.values.md) {
        activeBreakpoint = 'md';
      } else if (window.innerWidth < breakpoints.values.lg) {
        activeBreakpoint = 'lg';
      } else {
        activeBreakpoint = 'xl';
      }

      setCurrentBreakpoint(activeBreakpoint);
    };

    window.addEventListener('resize', handleResize);
    handleResize();

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [theme]);

  const getBackgroundColorForBreakpoint = (breakpoint) => {
    switch (breakpoint) {
      case 'xs':
        return 'red';
      case 'sm':
        return 'blue';
      case 'md':
        return 'green';
      case 'lg':
        return 'orange';
      case 'xl':
        return 'purple';
      default:
        return 'white';
    }
  };

  const backgroundColor = getBackgroundColorForBreakpoint(currentBreakpoint);

  return (
    <Container style={{ backgroundColor }}>
      <Typography variant="h2" color="textPrimary">
        Current Breakpoint is: {currentBreakpoint}
      </Typography>
    </Container>
  );
};

export default BreakpointDemo;

1. To test it on your browser Open your browser and navigate to http://localhost:5173 (Where your React development Server is running) You should see the BreakpointDemo component rendered, and the text background color will change based on the current breakpoint.
2. Resize your browser window to see the text background color change dynamically as the breakpoint changes.

By following these steps, you will be able to run and test the code in your browser. The BreakpointDemo component will display the current breakpoint and change the text background color accordingly as you resize the window. Are you interested to learn more about React MUI? Then watch this video tutorial.

Mastering Responsive Web App Development with React and MUI

When creating a responsive web application using React and Material-UI, here are some best practices and tips to consider:

1. Firstly Plan for Mobile-First Design: Start designing and developing your application with a mobile-first approach. This ensures that the application is optimized for smaller screens and progressively enhanced for larger screens.
2. Next Use Material-UI’s Grid System: Material-UI provides a powerful Grid component that simplifies responsive layout creation. Utilize the grid system to create responsive layouts that adapt to different screen sizes.
3. In addition, It’s important to Follow Material Design Guidelines: Adhere to the principles and guidelines of Material Design when designing your application’s user interface. This helps maintain consistency and familiarity across different devices and platforms.
4. To handle different screen sizes effectively, Utilize Material-UI’s Breakpoints: Take advantage of Material-UI’s built-in breakpoints to handle different screen sizes. Use the responsive props and CSS-in-JS solutions like styled-components or the Material-UI styling system to conditionally apply styles based on breakpoints.
5. Ensure thorough testing on Real Devices and Emulators: Ensure you test your application on real devices and emulators representing various screen sizes and orientations. This helps identify and address any issues specific to different devices and form factors.
6. Optimize image loading by using responsive images and lazy loading techniques: Optimize the loading of images by using responsive images and lazy loading techniques. Consider using the img component provided by Material-UI or popular image optimization libraries.

Enhancing User Experience and App Responsiveness: Tips & Tricks

1. Prioritize Content: Firstly, ensure that the most important content is prominently displayed and easily accessible on smaller screens. Prioritize key information and actions to provide a seamless user experience on mobile devices.
2. Use Responsive Typography: Next, implement responsive typography that adjusts based on screen size. Use relative units like rem or em to make the text scale appropriately on different devices. Consider using Material-UI’s responsive typography features for consistent and readable text across breakpoints.
3. Optimize Navigation: In addition, simplify and streamline your navigation for mobile devices. Use techniques like collapsing menus, off-canvas navigation, or bottom navigation to provide a user-friendly experience on smaller screens. Consider using Material-UI’s Drawer or BottomNavigation components.
4. Lazy Load Content: To improve performance, implement lazy loading techniques to load content and resources only when needed. This improves initial load times and reduces the amount of data transferred, particularly for mobile users with limited bandwidth.
5. Performance Optimization: Lastly, prioritize performance optimization. Minimize the use of heavy animations, unnecessary JavaScript, and excessive DOM manipulation. Optimize the code by removing unused dependencies and applying performance best practices. Consider using tools like code splitting and tree shaking to reduce bundle size and improve load times.

Conclusion

In conclusion, building responsive web apps with React and Material-UI for exceptional user experiences on any device. Implement responsive design, adaptive components, and screen size handling techniques. Check documentation for MUI Breakpoints and the link for the Responsive Layout Grid. Delight users with a seamless experience.

The post How to Build a Mobile-Responsive Web App with React & Material-UI first appeared on Prayers Connect.